ページのLCP要素を特定する方法
Chrome DevTools、Web Vitals拡張機能、PageSpeed Insights、Performance Observer APIを使用して、Largest Contentful Paint要素を見つける方法を学びます。
Diagnostics
詳細な説明
LCP要素の特定
LCPを最適化する最初のステップは、LCP候補の要素が何かを知ることです。
方法1：Chrome DevToolsのPerformanceパネル
- Chrome DevToolsを開く（F12）
- Performanceパネルに移動
- 記録ボタンをクリックしてページをリロード
- ページが読み込まれたら記録を停止
- TimingsセクションでLCPマーカーを探す
- ホバーしてページ上で要素がハイライトされるのを確認
方法2：Performance Observer API
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1];
console.log('LCP要素:', lastEntry.element);
console.log('LCP時間:', lastEntry.startTime);
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });
ページタイプ別の一般的なLCP要素
| ページタイプ | 典型的なLCP要素 |
|---|---|
| EC商品詳細ページ | ヒーロー商品画像 |
| ブログ/記事 | アイキャッチ画像またはH1テキスト |
| ランディングページ | ヒーローバナー画像 |
| ダッシュボード | 大きなデータテーブルまたはチャート |
LCP候補
すべての要素がLCP候補になれるわけではありません。有効なLCP要素：
<img>要素- SVG内の
<image> <video>ポスター画像url()で読み込まれたbackground-imageを持つ要素- テキストノードを含むブロックレベル要素
ユースケース
LCP要素の特定は、あらゆるパフォーマンス最適化プロジェクトの必須の最初のステップです。画像圧縮、プリロード、サーバー最適化に時間を投資する前に、ブラウザが何をlargest contentful paintと見なしているかを知る必要があります。