Long Animation Frame API をリリース

Barry Pollard

Browser Support

• 123
• 123
• x
• x

Source

Long Animation Frame API（LoAF）が Chrome 123 からリリースされました。また、この新しい API を最大限に活用できるように、ツールとガイダンスも更新されました。

LoAF は web-vitals JavaScript ライブラリで利用可能

web-vitals JavaScript ライブラリのバージョン 4 には、フィールドで遅いインタラクションを見つけるガイドに記載されているように、INP インタラクションに関連する長いアニメーション フレーム（またはフレーム）が含まれています。LoAF を活用する方法に関する情報も含まれています。

Google I/O 2024 では、INP のデバッグに関する新しいフィールド分析情報のセッションで、LoAF を活用して INP インタラクションの速度を低下させる他のスクリプトを見つける方法など、この情報を発表しました。

API をライブラリに直接統合すると、この API を使用する RUM パートナーは、RUMVision や DebugBear などのデータを公開できます。また、独自のプロダクトに追加することを検討している他の RUM プロバイダ向けのオープンソース リファレンス実装も提供されます。

LoAF は Web Vitals 拡張機能で利用できます

非推奨: この投稿の公開以降、ウェブ バイタル拡張機能は非推奨となり、ここで説明する LoAF 機能はDevTools で利用可能になりました。

Core Web Vitals 拡張機能が更新され、INP インタラクションのデバッグに役立つ長いアニメーション フレームのデータが追加されました。

ウェブに関する指標拡張機能のコンソール ロギングに LoAF データが表示される。

これは、操作時に実行されている他のスクリプトを確認するのに役立ちます。これらのスクリプトは、遅延（特に入力遅延）の原因となることがよくありますが、これまでは拡張機能を使用して診断するのが困難でした。

LoAF の使用に関するガイダンスを更新しました

また、この API を最大限に活用できるよう、Long Animation Frames API のメイン ドキュメントのガイダンスを更新しました。

1 つのページに複数の LoAF が存在し、そのうちの 1 つが INP インタラクションに関連している場合があります。

このガイダンスは、Taboola のこのケーススタディなど、この API が現場でどのように使用されているかに基づいています。Google は現在、他の多くのケース スタディに取り組んでおり、今後もこのような例を公開していく予定です。

また、MDN にも API のドキュメントが掲載されています。

まとめ

Long Animation Frames API はウェブ プラットフォームに追加された新しい API です。すでに、この API を使用してサイトを改善しているサイトが、トライアル フェーズ中に数多く見られました。この API により、ツールでの API の幅広い導入と、ウェブサイトの応答性の向上が期待されます。