「Long Animation Frame API」(LoAF 發音的 Lo-Af) 已從 Chrome 123 版推出,我們還更新了工具和指南,協助您充分發揮這個全新 API 的效益。
web-vitals
JavaScript 程式庫提供 LoAF
Web-Vitals JavaScript 程式庫第 4 版包含與 INP 互動相關的長動畫影格 (或影格),如「在領域中尋找緩慢互動」指南所述,這份指南提供了使用 LoAF 運用方式的資訊。
在 2024 年 Google I/O 大會中,我們在 INP 偵錯的新欄位深入分析中發表了這項資訊,包括 提升 LoAF 功能,找出其他拖慢 INP 互動速度的指令碼。
直接在程式庫中整合 API,可讓 RUM 合作夥伴使用此 API 公開此資料,包括 RUMVision 及 DebugBear 的喜歡。這也讓其他 RUM 供應商對他們的產品進行了開放原始碼參考實作。
Web Vitals 擴充功能現在提供 LoAF
Web Vitals 擴充功能已更新,現在納入長動畫影格資料,可協助您對 INP 互動進行偵錯:
![Web Vitals 擴充功能控制台記錄功能。](https://developer.chrome.com/static/blog/loaf-has-shipped/image/loaf-web-vitals-extension.png?hl=zh-tw)
有助於瞭解互動當下正在執行的其他指令碼,因為這些指令碼通常是延遲的原因 (尤其是輸入延遲),但到目前為止無法診斷使用擴充功能時。
更新使用 LoAF 的指南
此外,我們也在主要的 Long Animation Frames API 文件中更新指南,協助您充分運用這個 API。
![網頁上的長動畫影格範例,醒目顯示的項目為 INP LoAF。](https://developer.chrome.com/static/blog/loaf-has-shipped/image/loaf-inp.png?hl=zh-tw)
本指南是以我們在相關領域使用 API 的方式為基礎,例如此工具中的 Taboola 的個案研究。我們正在進行一些其他個案研究,希望日後能發布更多類似的範例。
此外,我們也在 MDN 上記錄了 API。
結論
Long Animation Frames API 是網路平台的新增功能,已見過許多網站使用此 API 來改善其網站,而且在試用階段亦然。我們希望這個 API 能協助更多人採用此 API 開發工具,並改善網站的回應速度。