ตอนนี้การโต้ตอบกับ Next Paint เป็นเมตริก Core Web Vitals ที่มีความเสถียรแล้ว โดยมาแทนที่ First Input Delay
วันนี้เป็นวันสุดท้าย หลังจากทำงานมาหลายปี ในที่สุดเราก็พร้อมที่จะทำให้การโต้ตอบกับ Next Paint (INP) เป็นเมตริกที่เสถียรใน Core Web Vitals ซึ่งถือเป็นก้าวสำคัญในการวัดการตอบสนองของการโต้ตอบ ซึ่งช่วยแก้ไขจุดบกพร่องต่างๆ ของ First Input Delay (FID)
ในโพสต์นี้ เราจะสรุปสิ่งที่เปลี่ยนแปลงไปในวันนี้อย่างคร่าวๆ ตั้งลำดับเวลาในการเลิกใช้งานและนำ FID ออกจากเครื่องมือของ Chrome โดยเฉพาะ รวมถึงแชร์แหล่งข้อมูลบางอย่างเพื่อช่วยคุณค้นหาและแก้ไขปัญหา INP
มีอะไรเปลี่ยนแปลงบ้างในวันนี้
ในด้านของ Chrome ตอนนี้เครื่องมือ Core Web Vitals ทั้งหมดของเราจะแสดงสถานะเสถียรของ INP (หากมี) ตัวอย่างเช่น เครื่องมือต่างๆ อย่าง PageSpeed Insights, แดชบอร์ด CrUX และส่วนขยาย Web Vitals จะแสดง INP ในเมตริก Core Web Vitals ทั้ง 3 แบบอย่างเด่นชัดยิ่งขึ้น ใน PageSpeed Insights โดยเฉพาะตรรกะการประเมิน Core Web Vitals จะประเมินประสิทธิภาพ INP แทน FID ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลงที่เกี่ยวข้องใน Search Console ได้ที่บล็อกโพสต์ของทีม Search
นอกจากนี้ ตั้งแต่วันนี้เป็นต้นไป เครื่องมือบางอย่างอาจแสดงประกาศการเลิกใช้งานสำหรับ FID เพื่อเป็นคำเตือนว่าเมตริกดังกล่าวไม่ใช่ Core Web Vitals อีกต่อไปและจะถูกนำออก ส่วนลำดับเวลาการเลิกใช้งาน FID ต่อไปนี้จะกล่าวถึงวันที่ต่างๆ เพื่อให้มั่นใจว่าคุณจะได้รับการเปลี่ยนแปลงจาก FID โดยสมบูรณ์แล้ว
ลำดับเวลาการเลิกใช้งาน FID
เนื่องจาก INP กลายเป็นเมตริก Core Web Vitals แทน FID แล้ว Chrome จึงจะเลิกรองรับ FID อย่างเป็นทางการ ซึ่งหมายความว่าเครื่องมือ Chrome จะไม่รับประกันความพร้อมใช้งานของ FID อีกต่อไป และนักพัฒนาแอปจะมีเวลาจนถึงวันที่ 9 กันยายน 2024 ในการเปลี่ยนไปใช้ INP
วิธีนี้สำคัญอย่างยิ่งสำหรับผู้บริโภคที่ใช้ API รายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) หรือ PageSpeed Insights แอปพลิเคชันที่ประมวลผลข้อมูล FID จาก API เหล่านี้จะต้องเปลี่ยนไปใช้ INP ภายในวันที่ 9 กันยายนเพื่อหลีกเลี่ยงการหยุดทำงานหรือบริการขัดข้อง เพื่อความชัดเจน การเปลี่ยนแปลงนี้คือการเปลี่ยนแปลงที่ส่งผลกับส่วนอื่นของ API เวอร์ชันล่าสุด และจะไม่มีตัวเลขเวอร์ชันหลักเพิ่มขึ้น
แหล่งข้อมูลสำหรับเพิ่มประสิทธิภาพ INP
ไม่ว่าคุณจะดู INP เป็นครั้งแรกหรือเป็นผู้เชี่ยวชาญด้านการปรับเปลี่ยนตามอุปกรณ์ คอลเล็กชันแหล่งข้อมูลการเพิ่มประสิทธิภาพ INP เป็นจุดเริ่มต้นที่ดีในการค้นหาสิ่งที่คุณต้องการ คอลเล็กชันเอกสารที่ใช้ได้ตลอดนี้ครอบคลุมทุกอย่าง ตั้งแต่คำจำกัดความของตัวเมตริกเอง เทคนิคในการวัดผลในระดับท้องถิ่นและกับผู้ใช้จริง คำแนะนำที่ใช้ได้จริงเพื่อเพิ่มประสิทธิภาพกรณีการใช้งานที่หลากหลาย และรายการกรณีศึกษาจากชีวิตจริงที่แสดงคำแนะนำในการใช้งานจริง
ในการใช้เอกสารเหล่านี้ ต่อไปนี้เป็นเวิร์กโฟลว์ทั่วไปที่คุณสามารถทำตามเพื่อค้นหาและแก้ไขปัญหา INP บนเว็บไซต์ของคุณ
ทำความคุ้นเคยกับวิธีที่ INP วัดการตอบสนองต่อการโต้ตอบของผู้ใช้ในเอกสาร INP ตามรูปแบบบัญญัติ
ดูข้อมูลผู้ใช้จริงเพื่อประเมินประสิทธิภาพ INP ของเว็บไซต์ ประสบการณ์ INP อย่างน้อย 75% ควรตอบสนองต่อข้อมูลของผู้ใช้ภายในเวลาไม่ถึง 200 มิลลิวินาทีจึงถือว่าดี หากเว็บไซต์ของคุณมี INP ที่ดีอยู่แล้ว ก็ไม่ต้องกังวล
เชื่อมต่อ URL ใน PageSpeed Insights หรือตรวจสอบรายงาน Core Web Vitals ใน Search Console หากเว็บไซต์ของคุณรวมอยู่ในชุดข้อมูล CrUX
โปรดตรวจสอบกับผู้ให้บริการวิเคราะห์ว่ารองรับการตรวจสอบ INP หรือไม่
สร้างโซลูชัน INP ของคุณเองโดยใช้ web-vitals.js
หากจำเป็น ให้ใช้เครื่องมือเว็บไซต์เพื่อรวบรวมข้อมูลการวินิจฉัยเกี่ยวกับประสบการณ์ของผู้ใช้ ข้อมูลเมตานี้เป็นข้อมูลเมตาที่สำคัญ เช่น องค์ประกอบในหน้าเว็บที่ผู้ใช้โต้ตอบด้วย สาเหตุที่ทำให้เนื้อหาทำงานช้า รวมถึงข้อมูลอื่นๆ ที่เป็นประโยชน์ โดยรวมแล้ว ข้อมูลนี้จะช่วยให้คุณเข้าใจโอกาสที่ดีที่สุดในการปรับปรุง
สร้างการโต้ตอบที่ช้าในเครื่องด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome วิธีนี้จะช่วยให้คุณเห็นชัดว่าเกิดอะไรขึ้นบ้างและโค้ดที่ไม่เหมาะสมคืออะไร
เพิ่มประสิทธิภาพโค้ดของคุณเพื่อให้ทำงานน้อยที่สุดเท่าที่จะเป็นไปได้ในระหว่างจัดการการโต้ตอบของผู้ใช้ ดังนี้
วัดผลการเปลี่ยนแปลงในระดับท้องถิ่น และตรวจสอบประสบการณ์ของผู้ใช้จริงเพื่อให้มั่นใจว่าประสิทธิภาพ INP ของคุณได้รับ (และคงเดิม) อย่างรวดเร็ว
เราหวังว่าคําแนะนํานี้จะช่วยให้คุณเดินบนเส้นทางที่ถูกต้องในการเพิ่มประสิทธิภาพ INP หากพบปัญหาใดๆ ระหว่างการใช้งาน คุณก็ขอความช่วยเหลือได้ทุกเมื่อด้วยการโพสต์คำถามที่ติดแท็ก interaction-to-next-paint ใน Stack Overflow
การเปิดตัว INP เป็น Core Web Vitals เป็นเรื่องที่นานมาแล้ว เรากลับไปดูโพสต์แรกเกี่ยวกับการสร้างเมตริกการตอบสนองต่อการตอบสนองที่ดีขึ้นในปี 2021 นับแต่นั้นมา เราได้นำความคิดเห็นของชุมชนที่ยอดเยี่ยมทั้งหมดมาพิจารณา และพัฒนาเมตริกที่เราเชื่อมั่นอย่างแรงกล้าที่จะแนะนำนักพัฒนาซอฟต์แวร์ในการปรับปรุงประสบการณ์ของผู้ใช้ในส่วนที่ด้อยโอกาส ซึ่งนำไปสู่เว็บที่ดีขึ้นในที่สุด ขอขอบคุณทุกคนที่ช่วยกำหนดทิศทางเมตริกนี้ และมุ่งมั่นทุ่มเทในการปรับปรุงสถานะของการตอบสนอง