公開日: 2026 年 5 月 1 日
Chrome 148 から、Container Timing パフォーマンス API のオリジン トライアルが開始されます。
Largest Contentful Paint（LCP）などの指標は、最大のコンテンツの描画時間を調べることで、ユーザーがページを「読み込み済み」と認識する可能性が高いタイミングの概要を把握できます。ただし、サイトによっては「最大」の部分だけでなく、ページの特定の部分が読み込まれるタイミングにも関心がある場合があります。
Element Timing を使用すると、サイトは elementtiming 属性で要素をマークアップして、要素が読み込まれるタイミングや、LCP 要素であるかどうかを把握できます。ただし、LCP と同様に、個々の要素のレンダリング時間の測定に限定されます。
コンテナ タイミングは、要素タイミングのコンセプトを拡張して、「コンテンツのブロック」（または「コンテナ」）を測定します。これにより、ウィジェット、カード、コンテンツのセクション、サイドバーなど、コンポーネント全体がユーザーに利用可能になったタイミングを把握できます。この API は、追加の分析情報を必要とするサイトに対して、パフォーマンスに関する追加情報を提供します。
Bloomberg が開発し、Igalia が Chrome に実装した Container Timing は、Chrome ユーザーや他の Chromium ベースのブラウザではフラグの背後で利用できます。また、オリジン トライアルを通じて、サイトがフィールドでテストすることもできます。
オリジン トライアルは、API のリリースにおける最終段階の 1 つです。デベロッパーは、デフォルトでリリースされる前にサイトで機能を有効にしてテストし、期待どおりに機能しているか、有用であるかをチームに報告できます。また、デベロッパーはリリース前に API 設計の変更を提案することもできます。
Container Timing API の仕組み
要素タイミングと同様に、コンテナ タイミングは、さまざまな HTML 要素に属性（containertiming）を追加して、これらの要素を測定する必要があることをブラウザに伝えることで機能します。
<div containertiming="my-component">
<h2>Title</h2>
<div>...</div>
</div>
PerformanceObserver を使用すると、他のパフォーマンス指標と同じ方法で、そのコンテナ内のペイントを観察できます。
<script>
const observer = new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log("Container painted:", entry.identifier);
console.log("First render:", entry.firstRenderTime);
console.log("Latest paint:", entry.startTime);
console.log("Painted area:", entry.size);
console.log("Last painted element:", entry.lastPaintedElement);
}
});
observer.observe({ type: "container", buffered: true });
</script>
コンテナに新しい要素が描画されると、更新された情報を含む新しいパフォーマンス エントリが生成されます。新しい要素はページの存続期間を通じて追加できるため、完了ポイントは 1 つではありません。これは LCP と似ています。LCP は通常、ページを離れるときにページの最後に測定されます。
これらのパフォーマンス指標は、モニタリングと分析のためにアナリティクスに送り返すことができます。
子コンテナは、containertiming-ignore 属性で無視することもできます。
<div containertiming="main-content">
<main>...</main>
<!-- This aside and its children will be ignored -->
<aside containertiming-ignore>...</aside>
</div>
デモ
次の CodePen は、Container Timing API の動作を示しています。
ブラウザが Container Timing API をサポートしていない場合は、次の動画でこの動作を確認することもできます。
コンテナ タイミングの対象となる更新とは
コンテナ タイミングの目的は、コンテナがすべての子要素とともに読み込まれたタイミングをキャプチャすることです。これは、将来のすべてのペイントを測定することを目的としたものではありません。将来のペイントの多くは、ユーザーがコンテナやページを操作したときに発生する可能性があります。このため、LCP や Element Timing と同様に、Container Timing は「コンテンツの描画」に依存しており、コンテンツの描画としてすでにカウントされている要素に対して新しい描画エントリを発行することもありません。
たとえば、コンテナが最初に背景色のみでレンダリングされた場合や、コンテンツのない要素（スケルトン画面など）のみが含まれている場合は、コンテナにコンテンツが追加されるまで container エントリは出力されません。
更新の例として、コンテナ内の既存の要素のテキストを更新しても、その更新の新しい container エントリは生成されません。要素のコンテンツの最初のペイントのみが考慮されるためです。ただし、空の要素にテキストが追加された場合、またはそのテキスト用に新しい要素が追加された場合は、その要素の First Paint になるため、新しい container エントリが発行されます。
機能検出コンテナ タイミングのサポート
containertiming 属性はサポートされていないブラウザで問題を引き起こさないため、機能検出を行う必要はありません。
PerformanceObserver は新しいエントリを無視しますが、DevTools で警告が発生する可能性があるため、次のようなコードでオブザーバーを追加する前に、機能検出を行うことをおすすめします。
if (typeof PerformanceContainerTiming !== "undefined") {
// Container Timing is supported
}
ベスト プラクティス
コンテナ タイミングを最適に使用するためのベスト プラクティスをいくつかご紹介します。
- 属性を早めに設定する: 完全なトラッキングを行うには、HTML ドキュメントに
containertiming属性を追加するか、要素がドキュメントに追加される前にcontainertiming属性を追加します。JavaScript で後から属性を追加すると、ペイントが欠落する可能性があります。 - 意味のある識別子を使用する: 分析を容易にするため、
containertiming属性にわかりやすい名前を選択します。 - 戦略的な配置: 指標にとって重要なセマンティック セクション（
hero-section、product-grid、checkout-formなど）にcontainertimingを適用します。すべてのコンテナを測定する必要はありません。 - 無関係なコンテンツを無視する: 広告や装飾要素など、コンポーネントの指標に影響を与えない子要素に
containertiming-ignoreを使用します。
コンテナ タイミングを有効にする方法
Container Timing API は、Chrome 147 以降で chrome://flags/#enable-experimental-web-platform-features フラグを使用して有効にできます。また、コマンドラインから --enable-blink-features=ContainerTiming フラグを使用して有効にすることもできます。
Chrome 148 以降では、サイトはオリジン トライアル トークンを登録し、ページに追加することで、機能を自動的に有効にできます。これにより、実際のユーザーを対象にフィールドで API をテストできます。コンテナ タイミング指標は分析に記録し、分析して、API が想定どおりに動作するかどうかを確認し、分析情報を収集できます。
フィードバックと詳細
Container Timing API に関するフィードバックは、GitHub の問題として報告してください。
標準化プロセスを経ている仕様もあります。この API の内部動作に関心をお持ちの方のために、Igalia が API の技術的な実装方法に関する投稿を公開しています。
まとめ
この API がリリース間近になったことを嬉しく思います。デベロッパーがこの API を利用して、パフォーマンスの問題に関する新たな分析情報を得られるようになるのが楽しみです。API に関するフィードバックを収集し、問題がなければ、まもなくリリースする予定です。