Largest contentful paint (LCP)
LargestContentfulPaint インターフェイスは、ウェブページ上でユーザー入力が行われる前に描画される最大の画像またはテキストに関するタイミング情報を提供します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 77 | 79 | 122 | 26.2 | 77 | 26.2 | |
| LargestContentfulPaint インターフェースの read-only プロパティは、最大のコンテンツフルペイントとなる Element を表すオブジェクトを返します。 | 77 | 79 | 122 | 26.2 | 77 | 26.2 |
| LargestContentfulPaint インターフェースの read-only プロパティ `id` は、最大のコンテンツペイントとなる要素の ID を返します。 | 77 | 79 | 122 | 26.2 | 77 | 26.2 |
| LargestContentfulPaint インターフェースの read-only プロパティである loadTime は、要素が読み込まれた時刻を返します。 | 77 | 79 | 122 | 26.2 | 77 | 26.2 |
| LargestContentfulPaint インターフェースの `renderTime` 読み取り専用プロパティは、要素が画面にレンダリングされた時刻を表します。 | 77 | 79 | 122 | 26.2 | 77 | 26.2 |
| LargestContentfulPaint インターフェースの size 読み取り専用プロパティは、最大のコンテンツ描画(Largest Contentful Paint)となる要素の本質的なサイズを返します。 | 77 | 79 | 122 | 26.2 | 77 | 26.2 |
| LargestContentfulPaint インターフェースの toJSON() メソッドはシリアライゼーションであり、LargestContentfulPaint オブジェクトの JSON 表現を返します。 | 77 | 79 | 122 | 26.2 | 77 | 26.2 |
| LargestContentfulPaint インターフェースの read-only プロパティ `url` は、要素が画像である場合、その要素のリクエスト URL を返します。 | 77 | 79 | 122 | 26.2 | 77 | 26.2 |
実務での使いどころ
-
Largest contentful paint (LCP) の活用
LargestContentfulPaint インターフェイスは、ウェブページ上でユーザー入力が行われる前に描画される最大の画像またはテキストに関するタイミング情報を提供します。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。