การรองรับเครื่องมือ การโต้ตอบกับ Next Paint (INP)

เบรนแดน เคนนี
Brendan Kenny
Twitter GitHub
อลิซาเบธ สวีนีย์
Elizabeth Sweeny
Twitter GitHub

เรายินดีเป็นอย่างยิ่งที่ได้รับการสนับสนุนด้านเครื่องมือรอบแรกสำหรับเมตริกการตอบสนองที่รอดำเนินการใหม่ ซึ่งก็คือ การโต้ตอบกับ Next Paint (INP) หากต้องการดูข้อมูลเกี่ยวกับเมตริก โปรดอ่านคู่มือเมตริก INP อย่างเป็นทางการ

การวัดที่แนะนำ

เป้าหมายของการวัด INP คือทำความเข้าใจว่าหน้าเว็บตอบสนองต่อข้อมูลที่ผู้ใช้ป้อนได้เร็วเพียงใด วิธีเดียวที่จะได้ข้อมูลที่สมจริงคือการวัดว่าหน้าเว็บตอบสนองอย่างไรสำหรับผู้ใช้จริงที่เข้าชมเว็บไซต์โดยใช้ข้อมูลจากภาคสนาม

การวัด INP ในห้องทดลองจะช่วยให้เข้าใจช่วงเวลาของกิจกรรมได้ดีขึ้นและจุดที่ต้องมีการเพิ่มประสิทธิภาพ เครื่องมือห้องทดลองจะไม่โต้ตอบกับหน้าเว็บโดยอัตโนมัติ ดังนั้นจึงต้องป้อนข้อมูลด้วยตนเองขณะวัดผล หรือต้องมีการเขียนสคริปต์ด้วยเครื่องมืออัตโนมัติ เช่น Puppeteer เมื่อระบุการโต้ตอบที่สำคัญจากเส้นทางของผู้ใช้ทั่วไปแล้ว คุณจะสามารถลองใช้การโต้ตอบดังกล่าวเพื่อระบุปัญหาหรือสคริปต์ และทำการทดสอบ CI เพื่อป้องกันการถดถอย

สำรวจประสบการณ์ที่ผู้ใช้จริงได้รับ (ข้อมูลภาคสนาม)

ไปที่ PageSpeed Insights

PageSpeed Insights จะดึงข้อมูลในช่องมาจาก API การรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) และแสดงภาพรวมเกี่ยวกับประสิทธิภาพของหน้าเว็บและต้นทางในช่วง 28 วันที่ผ่านมา ปัจจุบัน ข้อมูลนี้ประกอบด้วย INP

รายงาน PSI เกี่ยวกับ Core Web Vitals ที่ในฟิลด์ โดยมีส่วนที่ไฮไลต์แสดงค่าเมตริก INP ใหม่และเครื่องหมายที่แสดงตำแหน่งในที่เก็บข้อมูลเร็ว เฉลี่ย และช้า

ลองใช้งานได้ที่ PageSpeed Insights

รวบรวมค่า INP ของคุณเองจากฟิลด์

หากคุณต้องการรวบรวมข้อมูล INP สำหรับเว็บไซต์ด้วยตนเอง วิธีที่ง่ายที่สุดคือไลบรารี web-vitals ซึ่งตอนนี้มีการรองรับ INP อย่างเต็มรูปแบบในรุ่นเบต้าแล้ว

import {onINP} from 'web-vitals';

onINP(({value}) => {
  // Log the value to the console, or send it to your analytics provider.
  console.log(value);
});

อ่านข้อมูลเพิ่มเติมเกี่ยวกับ web-vitals และวิธีวัดผลในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ

ส่วนขยาย Web Vitals ใน Chrome

ส่วนขยาย Web Vitals จะแสดงทั้งภาพรวมของประสบการณ์การใช้งานหน้าเว็บของผู้ใช้ (จาก CrUX API) รวมถึงค่าแบบเรียลไทม์ของ CWV และเมตริกที่สําคัญเกี่ยวกับการเข้าชมหน้าเว็บปัจจุบัน

รายงานจากส่วนขยาย แสดงค่าของ Core Web Vitals แต่ละรายการ และรวมค่าสำหรับ INP

ติดตั้งส่วนขยาย Web Vitals สำหรับ Chrome

วิเคราะห์ปัญหาด้านประสิทธิภาพ (ข้อมูลในการทดสอบ)

ใช้โฟลว์ผู้ใช้ของ Lighthouse

โหมดช่วงเวลาใหม่ใน Lighthouse Panel ในเครื่องมือสำหรับนักพัฒนาเว็บช่วยให้คุณเริ่มต้น Lighthouse, โต้ตอบกับหน้าทดสอบได้ตามต้องการ แล้วรับรายงานสิ่งที่เกิดขึ้นในช่วงเวลานั้น ปัจจุบัน รายงานนี้มี INP และการตรวจสอบเพื่อช่วยวินิจฉัยปัญหาการตอบสนองต่างๆ

คุณจะสร้างการโต้ตอบชุดเดียวกันแบบอัตโนมัติได้โดยใช้ขั้นตอนของผู้ใช้ Lighthouse INP พร้อมใช้งานในโฟลว์ผู้ใช้ตั้งแต่ Lighthouse 9.6

รายละเอียดความพร้อมใช้งานของเครื่องมือ

  • รายงานประสบการณ์ของผู้ใช้ Chrome (CrUX)
    • BigQuery: INP อยู่ในรูปแบบ interaction_to_next_paint
    • CrUX API: INP อยู่ในรูปแบบ interaction_to_next_paint
    • แดชบอร์ด CrUX: รวมข้อมูล INP
  • PageSpeed Insights
    • pagespeed.web.dev: ข้อมูลช่อง INP ระดับหน้าและต้นทางจาก CrUX API แสดงเป็น "การโต้ตอบกับ Next Paint"
    • PSI API: INP อยู่ในรูปแบบ INTERACTION_TO_NEXT_PAINT_MS
  • ไลบรารี JS web-vitals รายการ
    • web-vitals รวมการสนับสนุน INP
  • ส่วนขยาย Web Vitals ใน Chrome
    • รวมการวัด INP ภายในและข้อมูลฟิลด์ INP เมื่อมีให้ใช้งานจาก CrUX API
  • Lighthouse
    • แผง Lighthouse ใน DevTools: การวัด INP พร้อมใช้งานในโหมด "ช่วงเวลา" ใน Chrome Canary (104)
    • โมดูล npm ของ Lighthouse: การวัด INP ที่ใช้ได้ในช่วงเวลาต่างๆ (ใช้ puppeteer สำหรับอินพุตสังเคราะห์)

งานในอนาคตและคำขอความคิดเห็น

จากนี้ไป ทีมเครื่องมือของ Chrome จะยังคงลงทุนในด้านการแก้ไขข้อบกพร่องและคำแนะนำในการเพิ่มประสิทธิภาพสำหรับ INP

หากคุณมีความคิดเห็นเกี่ยวกับอะไรก็ตามจากประโยชน์ของเมตริกเพื่อให้การวัดผลง่ายขึ้น โปรดไปที่กลุ่ม Google web-vitals-feedback