이제 Long Animation Frame API가 제공되었습니다.

Barry Pollard

Browser Support

• 123
• 123
• x
• x

Source

Long Animation Frame API (LoAF, Lo-Af로 발음)가 Chrome 123부터 제공되었으며, 이제 이 새로운 API를 최대한 활용하는 데 도움이 되는 도구와 안내도 업데이트되었습니다.

LoAF는 web-vitals JavaScript 라이브러리에서 사용할 수 있습니다.

웹-비탈스 JavaScript 라이브러리 버전 4에는 현장에서 느린 상호작용 찾기 가이드에 설명된 대로 INP 상호작용과 관련된 긴 애니메이션 프레임 (또는 프레임)이 포함되어 LoAF를 활용하는 방법에 관한 정보가 포함됩니다.

Google I/O 2024에서는 LoAF를 활용하여 INP 상호작용 속도를 저하시키는 다른 스크립트를 식별하는 방법을 비롯해 이 정보를 INP 디버깅을 위한 새로운 현장 통계 세션에서 발표했습니다.

API를 라이브러리에 직접 통합하면 이 API를 사용하는 RUM 파트너가 RUMVision, DebugBear 등의 데이터를 노출할 수 있습니다. 또한 자체 제품에 RUM을 추가하려는 다른 RUM 제공업체를 위한 오픈소스 참조 구현도 제공합니다.

LoAF는 웹 바이탈 확장 프로그램에서 사용할 수 있습니다.

지원 중단됨: 이 게시물이 게시된 이후 웹 Vitals 확장 프로그램이 지원 중단되었으며 여기에서 설명하는 LoAF 기능은 이제 DevTools에서 사용할 수 있습니다.

INP 상호작용을 디버그하는 데 도움이 되는 긴 애니메이션 프레임 데이터를 포함하도록 Web Vitals 확장 프로그램이 업데이트되었습니다.

웹 바이탈 확장 프로그램 콘솔 로깅에 LoAF 데이터가 표시됩니다.

이는 상호작용 시 실행 중인 다른 스크립트를 확인하는 데 유용합니다. 이러한 스크립트는 지연 (특히 입력 지연)의 원인인 경우가 많지만 지금까지는 확장 프로그램을 사용할 때 진단하기 어려웠습니다.

LoAF 사용에 관한 가이드 업데이트

또한 이 API를 최대한 활용할 수 있도록 기본 Long Animation Frames API 문서의 안내를 업데이트했습니다.

페이지에는 여러 LoAF가 있을 수 있으며, 그중 하나는 INP 상호작용과 관련이 있습니다.

이 안내는 Taboola의 이 사례 연구와 같이 현장에서 이 API가 사용된 방식을 기반으로 합니다. YouTube는 다른 여러 케이스 스터디를 진행 중이며 앞으로 이와 같은 사례를 더 많이 게시할 예정입니다.

또한 MDN에 API를 문서화했습니다.

결론

Long Animation Frames API는 웹 플랫폼에 추가된 흥미로운 기능으로, 이미 무료 체험 기간 동안에도 이 API를 사용하여 사이트를 개선하는 사이트가 여러 곳 있었습니다. 이 API를 통해 도구에서 API가 더 많이 채택되고 웹사이트의 응답성이 개선되기를 기대합니다.