Interfejs Long Animation Frame API (Lo-Af nazywany również LoAF) został udostępniony w Chrome 123. Zaktualizowaliśmy też nasze narzędzia i wskazówki, by pomóc Ci w pełni wykorzystać jego możliwości.
LoAF jest dostępny w bibliotece JavaScript web-vitals
Wersja 4 biblioteki JavaScript Web Vitals zawiera długą ramkę animacji (lub klatki) związaną z interakcją INP, jak opisano w przewodniku Znajdowanie powolnych interakcji w polu, aby uwzględnić informacje o korzystaniu z LoAF.
Podczas konferencji Google I/O 2024 zaprezentowaliśmy te informacje w prezentacji na temat nowych statystyk dotyczących debugowania INP, w tym o wykorzystywaniu LoAF do identyfikowania innych skryptów spowalniających interakcje z INP.
Integracja interfejsu API bezpośrednio z biblioteką umożliwia partnerom RUM, którzy korzystają z tego interfejsu, udostępnianie tych danych, w tym takich danych jak RUMVision i DebugBear. W ramach tego rozwiązania udostępniamy też referencyjną implementację open source innym dostawcom rozwiązań RUM, którzy rozważają wdrożenie ich we własnych usługach.
Narzędzie LoAF jest dostępne w rozszerzeniu Web Vitals
Zaktualizowaliśmy rozszerzenie do wskaźników internetowych, aby uwzględniało dane o długich klatkach animacji, aby ułatwić debugowanie interakcji INP:
![Logowanie rozszerzenia wskaźników internetowych.](https://developer.chrome.com/static/blog/loaf-has-shipped/image/loaf-web-vitals-extension.png?hl=pl)
Pozwala to sprawdzić, jakie inne skrypty są uruchomione w momencie interakcji, co często jest przyczyną opóźnień (zwłaszcza wprowadzania danych wejściowych), ale do tej pory trudno było je zdiagnozować podczas korzystania z rozszerzenia.
Zaktualizowane wskazówki na temat korzystania z LoAF
Aby pomóc Ci w pełni wykorzystać możliwości, zaktualizowaliśmy też wskazówki w głównej dokumentacji interfejsu Long Animation Frames API.
![Przykłady długich klatek animacji na stronie z wyróżnionym przyciskiem INP LoAF.](https://developer.chrome.com/static/blog/loaf-has-shipped/image/loaf-inp.png?hl=pl)
Wskazówki zostały opracowane na podstawie obserwacji wykorzystania tego interfejsu API w terenie, na przykład w tym studium przypadku firmy Taboola. Pracujemy nad innymi studiami przypadków i mamy nadzieję, że w przyszłości opublikujemy więcej takich przykładów.
Dodatkowo udokumentowaliśmy ten interfejs w MDN.
Podsumowanie
Interfejs Long Animation Frames API jest ciekawym dodatkiem do platformy internetowej. Zauważyliśmy, że już wiele witryn korzysta z tego interfejsu, by ulepszać swoje strony, nawet w fazie próbnej. Liczymy na szersze zastosowanie tego interfejsu API w narzędziach i poprawę responsywności witryn dzięki temu interfejsowi.