FCP（最初の描画）とは？真っ白な画面が消えるまでの時間

FCPとは何か

FCPはFirst Contentful Paintの略で、ページの読み込みが始まってから、最初のテキストや画像など「中身のある何か」が画面に描画されるまでの時間を測る指標です。日本語では「最初の描画」「コンテンツの初回描画」などと呼ばれます。

ここで言う「中身のあるもの」には、文字、画像、SVG、背景画像などが含まれます。ただの背景色だけが変わった状態はFCPには数えません。

FCPは、ユーザーが「真っ白な画面ではなくなった」「読み込みが進んでいる」と最初に感じる瞬間です。ここが速いと、待たされている不安が和らぎます。

FCPとLCPの違い

FCPとLCPは似ていますが、測る対象が違います。FCPは「最初に何かが見え始めた時刻」、LCPは「最も大きな主要コンテンツが見えた時刻」です。

たとえば、最初に小さな見出しが出てFCPが記録され、その後に大きなヒーロー画像が出てLCPが確定する、という流れになります。FCPはあくまで初動、LCPは主役の登場と覚えると分かりやすいでしょう。

両方を見ることで、初動が遅いのか（FCPが大きい）、初動は速いが主要コンテンツが遅いのか（FCPは小さいがLCPが大きい）を切り分けられます。

実務ではどこで関係する？

FCPは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

FCP（最初の描画）について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

FCPの基準値

FCPは1.8秒以内なら「良好」、3.0秒を超えると「不良」とされます。その間は改善が必要な領域です。

FCPはレンダリングを妨げるリソースの影響を強く受けます。最初の描画の前に重いCSSやJavaScriptを読み込んでいると、その分だけ白い画面が長引きます。

FCPを速くする手順

FCPの改善は、最初の描画を妨げるものを取り除くことが中心です。次の手順を目安にしてください。

1. サーバー応答（TTFB）を確認し、初動が遅れていないか見る
2. 最初の描画に必要な分だけCSSを先に届け、残りは後回しにする
3. レンダリングを妨げるJavaScriptは遅延読み込みや非同期にする
4. 重要なリソースは先読み（preload）で早めに取得させる
5. CDNのエッジ配信で初動のリソースを近い拠点から届ける
6. 改善後に1.8秒以内に収まっているか再計測する

確認用ページでの初動の速さ

デザインや原稿を相手に見てもらうとき、開いた直後に真っ白な時間が続くと、それだけで体感が悪くなります。FCPが速いと「すぐ表示された」という第一印象につながります。

とくに短時間だけ確認してもらう一時共有では、最初の数百ミリ秒の差が印象を分けます。初動が遅いと中身を見る前に不安を感じさせてしまいます。

ギガサイト便はCDNのエッジ配信で配信が速く、HTTPSも自動で付くため、HTMLやZIPをドロップして発行した確認用URLでも、最初の描画を待たせにくくなります。