Long Animation Frame API（LoAF と発音される Lo-Af）は Chrome 123 からリリースされました。また、この新しい API を最大限に活用するためのツールとガイダンスも更新しました。
LoAF は web-vitals JavaScript ライブラリで使用できます。
web-vitals JavaScript ライブラリのバージョン 4 には、INP インタラクションに関連する長いアニメーション フレーム（複数のフレーム）が含まれています。LoAF の活用方法に関する情報は、フィールドで遅いインタラクションを見つけるのガイドに記載されています。
Google I/O 2024 では、この情報を New field insights for debug INP の講演で発表しました。これには、INP のやり取りを遅らせる他のスクリプトを特定するための LoAF の利用も含まれています。
API をライブラリに直接統合すると、この API を使用する RUM パートナーは、RUMVision や DebugBear などのデータを公開できます。また、他の RUM プロバイダが独自のプロダクトでの利用を検討している場合に、オープンソース リファレンス実装も提供します。
LoAF は Web Vitals 拡張機能で利用可能
Web Vitals 拡張機能が更新され、長いアニメーション フレームデータが含まれるようになり、INP インタラクションをデバッグできるようになりました。
<ph type="x-smartling-placeholder">
これは、やり取りの際に他のどのスクリプトが実行されているかを確認するのに役立ちます。それらのスクリプトは遅延の原因となることがよくありますが（特に入力の遅延）、これまで拡張機能を使用する際の診断は困難でした。
LoAF の使用に関するガイダンスを更新
また、この API を最大限に活用できるように、Long Animation Frames API のメインのドキュメントのガイダンスを更新しました。
<ph type="x-smartling-placeholder">
このガイダンスは、Taboola のこのケーススタディなど、この API が現場でどのように使用されているかに基づいています。Google は他にも多くのケーススタディに取り組んでおり、今後も同様の事例をさらに公開していく予定です。
また、MDN に API のドキュメントを記載しています。
まとめ
Long Animation Frames API は、ウェブ プラットフォームに加わった魅力的な機能であり、すでに数多くのサイトがこの API を使用してサイトを改善しているのを確認しています（試験運用フェーズ中）。私たちは、ツールにこの API を幅広く導入し、この API によってウェブサイトの応答性を向上させたいと考えています。