FCP First Contentful Paintガイド — 初回レンダリングの測定
First Contentful Paint (FCP) について学びます。測定対象、LCPとの違い、1.8秒以下の高速な認知読み込みを実現する戦略を解説します。
Supplementary Metrics
詳細な説明
First Contentful Paint (FCP) の解説
FCPは、ナビゲーションからブラウザがDOMの最初のコンテンツをレンダリングするまでの時間を測定します。テキスト、画像、SVG、または白でないcanvas要素が対象です。ユーザーが画面上で何かが起きていると初めて見える瞬間です。
FCPとLCPの違い
| 指標 | 測定対象 | 良好な閾値 |
|---|---|---|
| FCP | 最初のあらゆるコンテンツのレンダリング | ≤ 1.8秒 |
| LCP | 最大のコンテンツ要素のレンダリング | ≤ 2.5秒 |
FCPをブロックするもの
- サーバー応答時間（TTFB） — 最初のバイトが到着するまでFCPは開始できない
- レンダリングブロッキングCSS — ブラウザは
<link>タグのすべてのCSSをダウンロード、解析、適用してからレンダリングする - レンダリングブロッキングJavaScript —
asyncやdeferなしの<head>内の<script>タグ - 大きなHTMLペイロード — 非常に大きなHTMLドキュメントは解析に時間がかかる
最適化戦略
<!-- クリティカルな上部CSSをインライン化 -->
<style>
body { margin: 0; font-family: system-ui; }
.hero { min-height: 100vh; }
</style>
<!-- 非クリティカルCSSを遅延 -->
<link rel="preload" href="/styles/full.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
サーバーサイドレンダリング（SSR）または静的サイト生成（SSG）を使用して、サーバーから意味のあるHTMLを送信します。
ユースケース
FCP最適化は、ユーザーが即座の視覚的フィードバックを期待するすべてのサイトで重要です。検索エンジンのランディングページ、モバイルWebアプリ、プログレッシブWebアプリ（PWA）がすべて高速なFCPの恩恵を受けます。