ดูวิธีค้นหาการโต้ตอบที่ช้าในข้อมูลภาคสนามของเว็บไซต์เพื่อหาโอกาสในการปรับปรุงการโต้ตอบกับ Next Paint
ข้อมูลภาคสนามเป็นแหล่งที่มาที่เชื่อถือได้เมื่อพูดถึงประสบการณ์การใช้งานเว็บไซต์ของผู้ใช้จริง โดยจะแสดงตัวอย่างปัญหาที่คุณอาจไม่เห็นในข้อมูลห้องทดลองเพียงอย่างเดียว แม้ว่าการโต้ตอบนั้นสามารถจำลองได้ในเครื่องมือที่อยู่ในห้องทดลอง แต่คุณจะไม่สามารถจำลองการโต้ตอบในห้องทดลองได้เหมือนกับที่ผู้ใช้ในภาคสนามได้รับประสบการณ์ การรวบรวมข้อมูลภาคสนามสําหรับ Interaction to Next Paint (INP) สําคัญต่อการทําความเข้าใจว่าหน้าเว็บตอบสนองต่อผู้ใช้จริงมากน้อยเพียงใด และมีข้อมูลประกอบเพื่อช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดียิ่งขึ้น
สิ่งที่คุณควรรวบรวมในภาคสนามและเหตุผล
เมื่อรวบรวมข้อมูล INP ในฟิลด์ คุณจะต้องรวบรวมข้อมูลต่อไปนี้เพื่อให้บริบทว่าเหตุใดการโต้ตอบจึงล่าช้า
- ค่า INP นี่คือข้อมูลสำคัญที่คุณจำเป็นต้องเก็บรวบรวม การกระจายของค่าเหล่านี้จะกำหนดว่าหน้าเว็บเป็นไปตามเกณฑ์ INP หรือไม่
- สตริงตัวเลือกองค์ประกอบที่รับผิดชอบ INP ของหน้าเว็บ การทราบ INP ของหน้าเว็บเป็นสิ่งที่ดี แต่ก็ยังไม่เพียงพอ คุณจะมืดมัวไม่รู้ตัวว่าองค์ประกอบใดเป็นแหล่งที่มา การบันทึกสตริงตัวเลือกองค์ประกอบจะทําให้คุณทราบได้อย่างแน่ชัดว่าองค์ประกอบใดส่งผลต่อการโต้ตอบ
- สถานะการโหลดหน้าเว็บสำหรับการโต้ตอบที่เป็น INP ของหน้าเว็บ เมื่อหน้าเว็บกำลังโหลดอยู่ คุณควรคิดว่ามีกิจกรรมเทรดหลักเกิดขึ้นอีก ซึ่งอาจทำให้เวลาในการตอบสนองของการโต้ตอบสูงขึ้น ในระหว่างการโหลดหน้าเว็บ การแยกวิเคราะห์ HTML, การแยกวิเคราะห์สไตล์ชีต รวมถึงการประเมินและการเรียกใช้ JavaScript จะเกิดขึ้น การทราบว่าการโต้ตอบเกิดขึ้นระหว่างการโหลดหน้าเว็บหรือหลังจากนั้นจะช่วยให้คุณทราบว่าต้องเพิ่มประสิทธิภาพเพื่อให้การเริ่มต้นระบบที่เร็วขึ้นหรือไม่ เพื่อให้การโต้ตอบเกิดขึ้นบนเทรดหลักได้มากขึ้น หรือการโต้ตอบที่มีผลต่อ INP ของหน้าเว็บเองนั้นช้าไม่ว่าสิ่งใด
startTimeของการโต้ตอบ การบันทึกstartTimeของการโต้ตอบช่วยให้คุณทราบว่าการโต้ตอบเกิดขึ้นเมื่อใดในไทม์ไลน์ประสิทธิภาพ- ประเภทเหตุการณ์ ประเภทเหตุการณ์เป็นสิ่งที่ควรทราบ เนื่องจากการโต้ตอบจะบอกว่าการโต้ตอบเป็นผลมาจาก
click,keypressหรือกิจกรรมที่มีสิทธิ์ประเภทอื่นๆ การโต้ตอบของผู้ใช้อาจมีการเรียกกลับหลายรายการ และสามารถช่วยคุณระบุการเรียกกลับของเหตุการณ์ในการโต้ตอบที่ใช้เวลาเรียกใช้นานที่สุด
ถึงแม้ว่าทั้งหมดนี้ดูจะมีความสำคัญมากมาย แต่คุณไม่จำเป็นต้องคิดค้นใหม่เพื่อไปถึงจุดนั้น โชคดีที่มีข้อมูลนี้แสดงอยู่ในไลบรารี JavaScript ของ web-vitals และคุณจะดูวิธีรวบรวมข้อมูลได้ในส่วนถัดไป
วัดการโต้ตอบในช่องด้วยไลบรารี JavaScript web-vitals
ไลบรารี JavaScript web-vitals เป็นวิธีที่ยอดเยี่ยมในการค้นหาการโต้ตอบที่ช้าในช่อง เนื่องจากไลบรารี JavaScript ช่วยให้สามารถระบุการระบุแหล่งที่มาสำหรับสาเหตุของการโต้ตอบดังกล่าว คุณสามารถรวบรวม INP ได้ในเบราว์เซอร์ที่รองรับ Event Timing API และพร็อพเพอร์ตี้ interactionId
การใช้ผู้ให้บริการการตรวจสอบผู้ใช้จริง (RUM) เพื่อรับ INP เป็นวิธีที่สะดวกที่สุด แต่ก็ไม่ได้เป็นตัวเลือกเสมอไป หากกรณีของคุณเป็นแบบนี้ คุณจะใช้ไลบรารี JavaScript web-vitals เพื่อรวบรวมและส่งข้อมูล INP ไปยัง Google Analytics สำหรับการประเมินในภายหลังได้
// Be sure to import from the attribution build:
import {onINP} from 'web-vitals/attribution';
function sendToGoogleAnalytics ({name, value, id, attribution}) {
// Destructure the attribution object:
const {eventEntry, eventTarget, eventType, loadState} = attribution;
// Get timings from the event timing entry:
const {startTime, processingStart, processingEnd, duration, interactionId} = eventEntry;
const eventParams = {
// The page's INP value:
metric_inp_value: value,
// A unique ID for the page session, which is useful
// for computing totals when you group by the ID.
metric_id: id,
// The event target (a CSS selector string pointing
// to the element responsible for the interaction):
metric_inp_event_target: eventTarget,
// The type of event that triggered the interaction:
metric_inp_event_type: eventType,
// Whether the page was loaded when the interaction
// took place. Useful for identifying startup versus
// post-load interactions:
metric_inp_load_state: loadState,
// The time (in milliseconds) after page load when
// the interaction took place:
metric_inp_start_time: startTime,
// When processing of the event callbacks in the
// interaction started to run:
metric_inp_processing_start: processingStart,
// When processing of the event callbacks in the
// interaction finished:
metric_inp_processing_end: processingEnd,
// The total duration of the interaction. Note: this
// value is rounded to 8 milliseconds of granularity:
metric_inp_duration: duration,
// The interaction ID assigned to the interaction by
// the Event Timing API. This could be useful in cases
// where you might want to aggregate related events:
metric_inp_interaction_id: interactionId
};
// Send to Google Analytics
gtag('event', name, eventParams);
}
// Pass the reporting function to the web-vitals INP reporter:
onINP(sendToGoogleAnalytics);
หากคุณมี Google Analytics และใช้งานโค้ดก่อนหน้าในเว็บไซต์ของคุณ คุณจะได้รับการรายงานแบบละเอียดที่ไม่ได้เป็นเพียง INP ของหน้าเว็บเท่านั้น แต่ยังมีข้อมูลบริบทที่เป็นประโยชน์ซึ่งทำให้คุณเข้าใจได้ดีขึ้นว่าจะเริ่มเพิ่มประสิทธิภาพการโต้ตอบที่ช้าที่ใด
ตรวจสอบทุกระยะเวลาเซสชัน ไม่ใช่แค่ไม่เกิน onload
การใช้ไลบรารี JavaScript web-vitals ดังที่กล่าวไว้ก่อนหน้านี้ อาจส่งผลให้ระบบส่งเหตุการณ์ Analytics หลายรายการไปยัง Google Analytics ก็ไม่เป็นไร เนื่องจากรหัสที่ web-vitals สร้างสำหรับหน้าปัจจุบันจะยังคงเหมือนเดิม และ Google Analytics จะอนุญาตให้คุณเขียนทับข้อมูลก่อนหน้า
อย่างไรก็ตาม ผู้ให้บริการ RUM บางรายอาจไม่ได้ใช้วิธีนี้ ดังนั้นหากคุณกำลังสร้างโซลูชันการรวบรวม RUM ของตนเอง คุณจะต้องคำนึงถึงเรื่องนี้ด้วย หากผู้ให้บริการวิเคราะห์รายปัจจุบันไม่อนุญาตให้เขียนทับระเบียนที่มีอยู่ คุณจะต้องบันทึกค่า delta ทั้งหมด กล่าวคือ ความแตกต่างระหว่างสถานะของเมตริกในอดีตและปัจจุบันของเมตริก สำหรับเมตริกและส่งโดยใช้รหัสเดียวกับที่ไลบรารี web-vitals ให้ไว้ จากนั้นคุณสรุปการเปลี่ยนแปลงเหล่านั้นได้ด้วยการจัดกลุ่มตามรหัส ดูข้อมูลเพิ่มเติมได้ที่ส่วนเกี่ยวกับการจัดการเดลต้าของเอกสารประกอบ web-vitals
รับข้อมูลภาคสนามได้อย่างรวดเร็วด้วย CrUX
รายงาน UX ของ Chrome (CrUX) คือชุดข้อมูลอย่างเป็นทางการของโปรแกรม Web Vitals ข้อมูลจาก CrUX เพียงอย่างเดียวอาจไม่ให้ข้อมูลทั้งหมดที่คุณต้องการแก้ปัญหา INP ที่เฉพาะเจาะจง แต่จะแจ้งให้คุณทราบว่าคุณมีปัญหาตั้งแต่แรกหรือไม่ แม้ว่าคุณจะรวบรวมข้อมูลภาคสนามผ่านผู้ให้บริการ RUM อยู่แล้ว ให้ลองเปรียบเทียบกับข้อมูล CrUX สำหรับเว็บไซต์ (หากมี) เนื่องจากมีวิธีการที่แตกต่างกัน
คุณประเมิน INP ของเว็บไซต์และดูข้อมูล CrUX ของเว็บไซต์ได้โดยใช้ PageSpeed Insights (PSI) PageSpeed Insights อาจให้ข้อมูลฟิลด์ระดับหน้าเว็บสำหรับเว็บไซต์ที่รวมอยู่ในชุดข้อมูล CrUX หากต้องการตรวจสอบ URL ด้วย PageSpeed Insights ให้ไปที่ https://pagespeed.web.dev/ ป้อน URL ที่จะทดสอบ แล้วคลิกปุ่มวิเคราะห์
เมื่อเริ่มการประเมินแล้ว ข้อมูล CrUX จะพร้อมใช้งานทันทีที่ Lighthouse (เครื่องมือห้องทดลอง) ทำงาน
เมื่อ Lighthouse ดำเนินการประเมินเสร็จแล้ว PSI จะป้อนข้อมูลการประเมินนั้นด้วยการตรวจสอบ Lighthouse
จะเกิดอะไรขึ้นหากฉันไม่มีข้อมูลภาคสนาม
คุณอาจตกอยู่ในสถานการณ์ที่คุณไม่มีหรือไม่สามารถรวบรวมข้อมูลภาคสนามได้ หากตรงกับสถานการณ์ของคุณ คุณจะต้องใช้เครื่องมือในห้องทดลองเพื่อค้นหาการโต้ตอบที่ช้า สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการทดสอบในห้องทดลอง โปรดอ่านวิธีวินิจฉัยสาเหตุที่ทำให้เกิด INP ที่ไม่ดีในห้องทดลองด้วยตนเอง
บทสรุป
ข้อมูลภาคสนามเป็นแหล่งข้อมูลที่ดีที่สุดที่คุณสามารถใช้ในการทำความเข้าใจว่าการโต้ตอบใดเป็นปัญหาสำหรับผู้ใช้จริงในภาคสนาม โดยการดึงข้อมูลที่มีใน PageSpeed Insights หรืออาศัยเครื่องมือรวบรวมข้อมูลภาคสนาม เช่น ไลบรารี JavaScript ของ web-vitals (หรือผู้ให้บริการ RUM ของคุณ) จะมั่นใจได้มากขึ้นว่าการโต้ตอบใดที่เป็นปัญหามากที่สุด จากนั้นจึงไปต่อที่ทำให้เกิดการโต้ตอบที่เป็นปัญหาอีกครั้งในห้องทดลอง จากนั้นจึงแก้ไขปัญหา
รูปภาพหลักจาก Unsplash โดย Federico Respini