Long Animation Frame API (LoAF로 발음하는 Lo-Af)는 Chrome 123에서 출시되었습니다. 이제 이 새로운 API를 최대한 활용할 수 있도록 도구와 가이드도 업데이트했습니다.
LoAF는 web-vitals JavaScript 라이브러리에서 사용할 수 있습니다.
Web-vitals JavaScript 라이브러리 버전 4에는 필드에서 느린 상호작용 찾기 가이드에 설명된 대로 INP 상호작용과 관련된 긴 애니메이션 프레임 (또는 프레임)이 포함되어 LoAF를 활용하는 방법에 관한 정보가 포함되어 있습니다.
Google I/O 2024에서는 LoAF를 활용하여 INP 상호작용 속도를 늦추는 다른 스크립트를 파악하는 등 INP 디버깅을 위한 새로운 필드 인사이트에서 이 정보를 소개했습니다.
라이브러리에 API를 직접 통합하면 이 API를 사용하는 RUM 파트너가 RUMVision, DebugBear와 같은 이 데이터를 노출할 수 있습니다. 이는 자체 제품에 대해 이를 고려 중인 다른 RUM 제공업체를 위한 오픈소스 참조 구현도 제공합니다.
Web Vitals 확장 프로그램에서 LoAF를 사용할 수 있습니다
INP 상호작용을 디버그할 수 있도록 긴 애니메이션 프레임 데이터를 포함하도록 Web Vitals 확장 프로그램이 업데이트되었습니다.
<ph type="x-smartling-placeholder">
이는 상호작용 시 실행 중인 다른 스크립트를 확인하는 데 유용합니다. 이러한 스크립트는 지연 (특히 입력 지연)의 원인이 되는 경우가 많지만 지금까지는 확장 프로그램을 사용할 때 진단하기 어려웠습니다.
LoAF 사용에 관한 안내가 업데이트됨
또한 이 API를 최대한 활용할 수 있도록 기본 Long Animation Frames API 문서의 안내를 업데이트했습니다.
<ph type="x-smartling-placeholder">
이 가이드는 현장에서 이 API가 사용된 방식을 기반으로 합니다(예: Taboola의 우수사례). YouTube는 다른 많은 우수사례를 연구하고 있으며 앞으로 이와 같은 예를 더 많이 게시할 수 있기를 기대합니다.
또한 MDN의 API를 문서화했습니다.
결론
Long Animation Frames API는 웹 플랫폼에 추가된 흥미로운 기술입니다. 이미 많은 사이트에서 시험 단계에 있는 동안에도 이 API를 사용하여 사이트를 개선하고 있습니다. Google은 이 API를 통해 도구에서 API를 더 광범위하게 채택하고 웹사이트의 응답성을 개선할 수 있기를 기대합니다.