เรายินดีที่ได้เปิดตัวเครื่องมือสนับสนุนรอบแรกสําหรับเมตริกการตอบสนองที่รอดําเนินการใหม่อย่าง 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
- BigQuery: INP พร้อมใช้งานเป็น
- PageSpeed Insights
- pagespeed.web.dev: ข้อมูลภาคสนาม INP ระดับหน้าเว็บและระดับต้นทางจาก CrUX API ที่แสดงเป็น "การโต้ตอบจนกว่าจะมีการวาดภาพครั้งถัดไป"
- PSI API: INP พร้อมใช้งานเป็น
INTERACTION_TO_NEXT_PAINT_MS
web-vitals
ไลบรารี JSweb-vitals
รองรับ INP
- ส่วนขยาย Web Vitals ใน Chrome
- รวมการวัด INP ในพื้นที่และข้อมูลในช่อง INP หากมีจาก CrUX API
- Lighthouse
- แผง Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บ: การวัด INP พร้อมใช้งานในโหมด "ช่วงเวลา" ใน Chrome Canary (104)
- โมดูล npm ของ Lighthouse: การวัด INP พร้อมใช้งานในกรอบเวลา (ใช้ Puppeteer สําหรับอินพุตสังเคราะห์)
การทำงานในอนาคตและคำขอให้แสดงความคิดเห็น
นับจากนี้เป็นต้นไป ทีมเครื่องมือของ Chrome จะลงทุนในความสามารถในการแก้ไขข้อบกพร่องและคำแนะนำในการเพิ่มประสิทธิภาพสำหรับ INP ต่อไป
หากมีความคิดเห็นเกี่ยวกับสิ่งใดก็ตาม ตั้งแต่ความมีประโยชน์ของเมตริกไปจนถึงความสะดวกในการวัดผล โปรดแจ้งให้เราทราบในกลุ่ม Google สำหรับความคิดเห็นเกี่ยวกับ Web Vitals