Long Animation Frame API 已經

Barry Pollard

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: not supported.
  • Safari: not supported.

Source

長動畫影格 API (LoAF，發音為 Lo-Af) 已在 Chrome 123 推出，我們也更新了工具和指南，協助您充分運用這項新 API。

LoAF 可在 web-vitals JavaScript 程式庫中使用

web-vitals JavaScript 程式庫第 4 版包含與 INP 互動相關的長動畫影格 (或影格)，如在實地環境中找出緩慢的互動指南所述，並納入如何運用 LoAF 的相關資訊。

在 2024 年 Google I/O 大會上，我們在「用於偵錯 INP 的新版實地洞察資料」演講中介紹了這項資訊，包括利用 LoAF 找出導致 INP 互動速度變慢的其他指令碼。

直接在程式庫中整合 API，讓使用此 API 的 RUM 合作夥伴能夠公開這類資料，包括 RUMVision 和 DebugBear 等。這也為其他想將 RUM 加入自家產品的供應商，提供了開放原始碼參考實作項目。

LoAF 可透過 Web Vitals 擴充功能使用

Web Vitals 擴充功能已更新，加入長動畫影格資料，協助您對 INP 互動進行偵錯：

Web Vitals 擴充功能控制台記錄。
Web Vitals 擴充功能主控台記錄會顯示 LoAF 資料。

這項功能可讓您查看互動期間執行的其他指令碼，這些指令碼通常會導致延遲 (特別是輸入延遲)，但目前在使用擴充功能時，很難診斷這些延遲。

更新版 LoAF 使用指南

我們也更新了主要 Long Animation Frames API 說明文件中的指引，協助您充分運用這個 API。

網頁上長動畫影格範例，其中以 INP LoAF 醒目顯示。
網頁可能有多個 LoAF，其中一個與 INP 互動相關。

這份指南的內容是根據我們在實務中觀察到這個 API 的使用方式而編寫，例如 這份 Taboola 的案例研究。我們正在進行許多其他個案研究，並期待日後能發布更多這類範例。

此外，我們也在 MDN 上說明 API。

結論

Long Animation Frames API 是網頁平台的令人期待的新功能，我們發現許多網站在試用階段就已開始使用這個 API 改善網站。我們期待這個 API 在工具中廣泛採用，並透過這個 API 改善網站的回應速度。