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

Brendan Kenny

Elizabeth Sweeny

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

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

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

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

ค้นพบประสบการณ์ของผู้ใช้จริง (ข้อมูลภาคสนาม)

ไปที่ PageSpeed Insights

PageSpeed Insights ดึงข้อมูลภาคสนามจาก Chrome User Experience (CrUX) Report API และแสดงภาพรวมประสิทธิภาพของหน้าเว็บและต้นทางในช่วง 28 วันที่ผ่านมา ตอนนี้ข้อมูลนี้รวมถึง 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 และวิธีวัดผลในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ

ส่วนขยาย Chrome Web Vitals

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

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

วินิจฉัยปัญหาด้านประสิทธิภาพ (ข้อมูลในห้องทดลอง)

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

โหมดช่วงเวลาใหม่ในแผง Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บช่วยให้คุณเริ่ม 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 แสดงเป็น 'Interaction to Next Paint'
  • PSI API: INP พร้อมใช้งานเป็น INTERACTION_TO_NEXT_PAINT_MS
• web-vitals ไลบรารี JS
  • web-vitals รองรับ INP
• ส่วนขยาย Web Vitals ใน Chrome
  • รวมการวัดผล INP ในเครื่องและข้อมูลภาคสนาม INP เมื่อพร้อมใช้งานจาก CrUX API
• Lighthouse
  • แผง Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บ: การวัดผล INP พร้อมใช้งานในโหมด "ช่วงเวลา" ใน Chrome Canary (104)
  • โมดูล Lighthouse npm: การวัดผล INP พร้อมใช้งานในช่วงเวลา (ใช้ Puppeteer สำหรับอินพุตสังเคราะห์)

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

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

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