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

Brendan Kenny

Elizabeth Sweeny

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

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

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

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

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

ไปที่ PageSpeed Insights

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

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

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

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

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

ใช้โฟลว์ผู้ใช้ Lighthouse

โหมดระยะเวลาใหม่ในแผง Lighthouse ใน DevTools ช่วยให้คุณเริ่ม 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 ที่แสดงเป็น "การโต้ตอบจนกว่าจะมีการวาดภาพครั้งถัดไป"
  • 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)
  • โมดูล npm ของ Lighthouse: การวัด INP พร้อมใช้งานในกรอบเวลา (ใช้ Puppeteer สําหรับอินพุตสังเคราะห์)

การทำงานในอนาคตและคำขอให้แสดงความคิดเห็น

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

หากมีความคิดเห็นเกี่ยวกับสิ่งใดก็ตาม ตั้งแต่ความมีประโยชน์ของเมตริกไปจนถึงความสะดวกในการวัดผล โปรดแจ้งให้เราทราบในกลุ่ม Google สำหรับความคิดเห็นเกี่ยวกับ Web Vitals