Long Animation Frame API (LoAF อ่านว่า Lo-Af) จัดส่งมาจาก Chrome 123 และตอนนี้เราได้อัปเดตเครื่องมือและคำแนะนำเพื่อช่วยให้คุณได้รับประโยชน์สูงสุดจาก API ใหม่นี้
LoAF มีให้ใช้งานในไลบรารี JavaScript web-vitals
ไลบรารี JavaScript สำหรับเว็บแอปเวอร์ชัน 4 ประกอบด้วยเฟรมภาพเคลื่อนไหวขนาดยาว (หรือเฟรม) ที่เกี่ยวข้องกับการโต้ตอบ INP ตามที่ระบุไว้ในคู่มือค้นหาการโต้ตอบช้าในช่องเพื่อระบุข้อมูลเกี่ยวกับวิธีใช้ประโยชน์จาก LoAF
ที่ Google I/O 2024 เราได้นำเสนอข้อมูลนี้ในการพูดคุยเรื่องข้อมูลเชิงลึกแบบใหม่สำหรับการแก้ไขข้อบกพร่องของ INP ซึ่งรวมถึงการใช้ประโยชน์จาก LoAF เพื่อระบุสคริปต์อื่นๆ ที่ทำให้การโต้ตอบ INP ของคุณช้าลง
การผสานรวม API ในไลบรารีโดยตรงจะทำให้พาร์ทเนอร์ RUM ที่ใช้ API นี้เปิดเผยข้อมูลนี้ รวมถึงรายการต่างๆ ที่คล้ายกับ RUMVision และ DebugBear และยังเป็นการใช้งานข้อมูลอ้างอิงแบบโอเพนซอร์สสำหรับผู้ให้บริการ RUM รายอื่นๆ ที่กำลังมองหาข้อมูลอ้างอิงในผลิตภัณฑ์ของตนเอง
LoAF พร้อมใช้งานในส่วนขยาย Web Vitals
ส่วนขยาย Web Vitals ได้รับการอัปเดตให้รวมข้อมูลเฟรมภาพเคลื่อนไหวขนาดยาวเพื่อช่วยคุณแก้ไขข้อบกพร่องของการโต้ตอบ INP ดังนี้
วิธีนี้มีประโยชน์ในการดูสคริปต์อื่นๆ ที่ทำงานอยู่ขณะที่คุณโต้ตอบ ซึ่งมักเป็นสาเหตุของความล่าช้า (โดยเฉพาะความล่าช้าของอินพุต) แต่วิเคราะห์ได้ยากเมื่อใช้ส่วนขยาย
คำแนะนำที่อัปเดตเกี่ยวกับการใช้ LoAF
นอกจากนี้ เรายังอัปเดตคำแนะนำในเอกสารประกอบหลักของ Long Animation Frames API เพื่อช่วยให้คุณได้รับประโยชน์สูงสุดจาก API นี้
คําแนะนํานี้อิงจากวิธีที่เราเห็นการใช้ API นี้ภาคสนาม เช่น ในกรณีศึกษานี้จาก Taboola เรากำลังศึกษากรณีศึกษาอื่นๆ อยู่จำนวนหนึ่ง และหวังว่าจะเผยแพร่ตัวอย่างที่คล้ายกันนี้เพิ่มเติมในอนาคต
นอกจากนี้ เรายังได้บันทึก API ไว้ใน MDN ด้วย
บทสรุป
Long Animation Frames API เป็นส่วนเสริมที่น่าสนใจสำหรับแพลตฟอร์มเว็บและเราได้เห็นเว็บไซต์จำนวนมากใช้ API นี้ในการปรับปรุงเว็บไซต์ของตนแม้จะอยู่ในช่วงทดลองใช้ก็ตาม เราหวังว่าจะนำ API นี้ไปใช้ในวงกว้างขึ้นในการใช้เครื่องมือและปรับปรุงการตอบสนองบนเว็บไซต์ด้วย API นี้