Interfejs Long Animation Frame API jest już dostępny

Barry Pollard

Browser Support

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

Source

Interfejs Long Animation Frame API (LoAF, wymawiany jako Lo-Af) jest dostępny od wersji Chrome 123. Zaktualizowaliśmy też nasze narzędzia i wskazówki, aby pomóc Ci w pełni wykorzystać możliwości tego nowego interfejsu API.

LoAF jest dostępny w bibliotece JavaScript web-vitals

Wersja 4 biblioteki JavaScript web-vitals zawiera długie klatki animacji związane z interakcją INP, opisane w przewodniku Znajdowanie wolno działających interakcji w polu. Zawiera ona informacje o tym, jak korzystać z Long-running Action Frame.

Podczas konferencji Google I/O 2024 przedstawiliśmy te informacje w wykładzie Nowe statystyki dotyczące działań na polu, które ułatwiają debugowanie interfejsów INP, w tym wykorzystanie LoAF do identyfikowania innych skryptów, które spowalniają interakcje z interfejsem INP.

Integracja interfejsu API bezpośrednio w bibliotece umożliwia partnerom RUM korzystającym z tego interfejsu udostępnianie tych danych, np. RUMVision i DebugBear. Jest to też implementacja referencyjna typu open source dla innych dostawców RUM, którzy chcą dodać tę funkcję do swoich usług.

LoAF jest dostępny w rozszerzeniu Web Vitals

Rozszerzenie Web Vitals zostało zaktualizowane, aby zawierało dane o długich klatkach animacji, które ułatwiają debugowanie interakcji INP:

Logowanie w konsoli rozszerzenia Web Vitals.
Logowanie na konsoli rozszerzenia Core Web Vitals wykorzystuje dane LoAF.

Dzięki temu możesz zobaczyć, jakie inne skrypty są wykonywane w momencie interakcji. Często są one przyczyną opóźnień (zwłaszcza opóźnień w wprowadzaniu danych), ale do tej pory trudno było je zdiagnozować za pomocą rozszerzenia.

Zaktualizowane wskazówki dotyczące korzystania z LoAF

Aby ułatwić Ci korzystanie z tego interfejsu API, 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 INP LoAF
Strona może mieć wiele LoAF, z których jeden jest powiązany z interakcją INP.

Te wskazówki są oparte na tym, jak ten interfejs API jest używany w praktyce, np. w tym przypadku firmy Taboola. Pracujemy nad wieloma innymi studiami przypadków i planujemy w przyszłości publikowanie kolejnych przykładów.

Dodatkowo dokumentację interfejsu API znajdziesz na stronie MDN.

Podsumowanie

Interfejs Long Animation Frames API to ekscytujące uzupełnienie platformy internetowej. Już w trakcie fazy próbnej zauważyliśmy, że wiele witryn używa tego interfejsu do ulepszania swoich stron. Liczymy, że interfejs API będzie szerzej stosowany w narzędziach, a dzięki temu strony internetowe będą szybciej reagować.