Interfejs Long Animation Frame API jest już dostępny

Barry Pollard

Obsługa przeglądarek

  • 123
  • 123
  • x
  • x

Źródło

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.
Logowanie rozszerzenia wskaźników internetowych w konsoli wyświetla dane LoAF.

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.
Strona może mieć wiele LoAF, z których jeden jest powiązany z interakcją z INP.

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.