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

ซึ่งมีประโยชน์ในการดูสคริปต์อื่นๆ ที่ทำงานอยู่ขณะที่คุณโต้ตอบ ซึ่งมักเป็นสาเหตุของความล่าช้า (โดยเฉพาะความล่าช้าในการป้อนข้อมูล) แต่ที่ผ่านมาการวินิจฉัยเมื่อใช้ส่วนขยายนี้เป็นเรื่องยาก
คำแนะนำที่อัปเดตเกี่ยวกับการใช้ LoAF
นอกจากนี้ เรายังได้อัปเดตคําแนะนําในเอกสารประกอบหลักของ Long Animation Frames API เพื่อช่วยให้คุณได้รับประโยชน์สูงสุดจาก API นี้

คำแนะนำนี้อิงตามวิธีที่เราเห็นการใช้ API นี้ในภาคสนาม เช่น ในกรณีศึกษานี้จาก Taboola เรากําลังรวบรวมกรณีศึกษาอื่นๆ และหวังว่าจะได้เผยแพร่ตัวอย่างเพิ่มเติมเช่นนี้ในอนาคต
นอกจากนี้ เรายังได้จัดทำเอกสารประกอบเกี่ยวกับ API ใน MDN ด้วย
บทสรุป
Long Animation Frames API เป็นการเพิ่มที่น่าตื่นเต้นสำหรับแพลตฟอร์มเว็บ และเราได้เห็นเว็บไซต์หลายแห่งใช้ API นี้เพื่อปรับปรุงเว็บไซต์ของตนแล้วในช่วงทดลองใช้ เราหวังว่า API นี้จะนำไปใช้งานในเครื่องมือต่างๆ มากขึ้นและช่วยปรับปรุงการตอบสนองของเว็บไซต์