Die Long Animation Frame API wurde

Barry Pollard

Unterstützte Browser

  • 123
  • 123
  • x
  • x

Quelle

Die Long Animation Frame API (LoAF-gesprochen Lo-Af) wurde von Chrome 123 veröffentlicht und wir haben jetzt auch unsere Tools und Anleitungen aktualisiert, damit Sie diese neue API optimal nutzen können.

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

Version 4 der Web-Vitals-JavaScript-Bibliothek enthält die langen Animationsframes (Frames) im Zusammenhang mit der INP-Interaktion, wie im Leitfaden Langsame Interaktionen vor Ort finden beschrieben, um Informationen zur Nutzung von LoAF bereitzustellen.

Auf der Google I/O 2024 haben wir diese Informationen im Vortrag New Field Insights for Debugging INP vorgestellt. Unter anderem haben wir LoAF genutzt, um andere Scripts zu identifizieren, die Ihre INP-Interaktionen verlangsamen.

Durch die direkte Integration der API in die Bibliothek können RUM-Partner, die diese API verwenden, diese Daten, einschließlich RUMVision und DebugBear, verfügbar machen. Es bietet auch eine Open-Source-Referenzimplementierung für andere RUM-Anbieter, die sie in ihrem eigenen Produkt verwenden möchten.

LoAF ist in der Web Vitals-Erweiterung verfügbar

Die Web Vitals-Erweiterung wurde aktualisiert und enthält nun Framedaten für lange Animationen, damit Sie INP-Interaktionen leichter debuggen können:

<ph type="x-smartling-placeholder">
</ph> Logging der Web Vitals-Erweiterung in der Konsole.
Das Logging der Web Vitals-Erweiterung in der Konsole liefert LoAF-Daten.

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

Aktualisierte Anleitung zur Verwendung des LoAF

Wir haben auch unsere Anleitung in unserer Long Animation Frames API-Dokumentation aktualisiert, damit Sie diese API optimal nutzen können.

<ph type="x-smartling-placeholder">
</ph> Beispiele für lange Animationsframes auf einer Seite mit hervorgehobenem INP-LoAF
Eine Seite kann viele LoAFs haben, von denen eines mit der INP-Interaktion zusammenhängt.

Diese Anleitung basiert darauf, wie wir diese API in der Praxis beobachtet haben, z. B. in dieser Fallstudie von Taboola. Wir arbeiten an einer Reihe weiterer Fallstudien und freuen uns darauf, in Zukunft weitere Beispiele dieser Art veröffentlichen zu können.

Darüber hinaus haben wir die API auf MDN dokumentiert.

Fazit

Das Long Animation Frames API ist eine interessante Ergänzung der Webplattform und wir haben bereits eine Reihe von Websites gesehen, die dieses API bereits während der Testphase zur Verbesserung ihrer Websites verwenden. Wir freuen uns auf eine breitere Nutzung der API in den Tools und eine verbesserte Reaktionsfähigkeit auf Websites dank dieses APIs.