Die Long Animation Frame API wurde

Browser Support

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

Source

Die Long Animation Frame API (LoAF, ausgesprochen „Lo-Af“) ist seit Chrome 123 verfügbar. Wir haben auch unsere Tools und Anleitungen aktualisiert, damit Sie diese neue API optimal nutzen können.

LoAF ist in der web-vitals-JavaScript-Bibliothek verfügbar

Version 4 der JavaScript-Bibliothek für Web Vitals enthält den oder die langen Animationsframes, die sich auf die INP-Interaktion beziehen, wie im Leitfaden Langsame Interaktionen im Feld finden dokumentiert.

Bei der Google I/O 2024 haben wir diese Informationen im Vortrag Neue Informationen für die Fehlerbehebung bei INP vorgestellt. Dabei ging es unter anderem darum, wie Sie mithilfe von LoAF andere Scripts identifizieren können, die Ihre INP-Interaktionen verlangsamen.

Durch die direkte Einbindung der API in die Bibliothek können RUM-Partner, die diese API verwenden, diese Daten freigeben, z. B. RUMVision und DebugBear. Außerdem bietet sie eine Open-Source-Referenzimplementierung für andere RUM-Anbieter, die sie ihrem eigenen Produkt hinzufügen möchten.

LoAF ist in der Web Vitals-Erweiterung verfügbar

Die Web Vitals-Erweiterung wurde aktualisiert und enthält jetzt Daten zu langen Animationsframes, die Ihnen bei der Fehlerbehebung bei INP-Interaktionen helfen:

Console-Logging der Web Vitals-Erweiterung
In der Konsole der Web Vitals-Erweiterung werden LoAF-Daten protokolliert.

So können Sie sehen, welche anderen Scripts zum Zeitpunkt Ihrer Interaktion ausgeführt werden. Diese sind oft die Ursache für Verzögerungen (insbesondere Eingabeverzögerungen), die bei Verwendung der Erweiterung bisher nur schwer zu diagnostizieren waren.

Aktualisierte Anleitung zur Verwendung von LoAF

Außerdem haben wir unsere Anleitung in der Hauptdokumentation zur Long Animation Frames API aktualisiert, damit Sie diese API optimal nutzen können.

Beispiele für lange Animationsframes auf einer Seite, wobei der INP-LoAF hervorgehoben ist.
Eine Seite kann viele LoAFs haben, von denen eine mit der INP-Interaktion zusammenhängt.

Diese Empfehlungen basieren auf der Verwendung dieser API in der Praxis, z. B. in dieser Fallstudie von Taboola. Wir arbeiten an weiteren Fallstudien und werden in Zukunft weitere Beispiele wie diese veröffentlichen.

Außerdem haben wir die API auf MDN dokumentiert.

Fazit

Die Long Animation Frames API ist eine spannende Ergänzung der Webplattform. Bereits während der Testphase haben wir festgestellt, dass viele Websites diese API nutzen, um ihre Websites zu verbessern. Wir freuen uns darauf, dass die API in Tools noch stärker eingesetzt wird und dass Websites dank dieser API reaktionsfähiger werden.