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">
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">
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.