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

Brendan Kenny

Elizabeth Sweeny

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

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

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

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

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

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

ไปที่ PageSpeed Insights

PageSpeed Insights จะดึงข้อมูลภาคสนามจาก 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 ในเครื่องมือสำหรับนักพัฒนาเว็บช่วยให้คุณเริ่ม 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-feedback