本文にスキップ
weballin

weballin DIGIWIKI

FCP(First Contentful Paint)

First Contentful Paint(FCP)は、ページの読み込み開始から、最初のテキストや画像などが描画されるまでの時間を測る指標です。何も表示されていない状態から、最初の内容が見えるまでの速さを示します。

weballin

FCPは、ページが表示され始めたと利用者が分かる時点を捉えます。すべての読み込みが終わる前でも、最初の内容をすぐに表示できれば、待ち時間の感じ方を改善できる場合があります。

サーバーの応答が遅い場合や、描画を妨げるリソースが多い場合は、FCPが遅れることがあります。何も表示されない時間が長いと、ページが動作していないように感じられます。

初期HTML、最初の表示に必要なCSS、フォント、JavaScript、サーバー応答を確認します。FCPとLCPを併せて調べ、最初の内容が現れるまでの遅れと、大きな主要コンテンツが現れるまでの遅れを区別します。

要点

  • 最初の内容が描画されるまでの時間を測ります。
  • 読み込み初期の体感速度に関係します。
  • サーバー応答や描画を妨げるリソースの影響を受けます。
  • LCPと併せて、遅延が生じる段階を確認します。

参考資料

よくある質問

FCPとLCPはどう使い分けますか?

FCPは最初の内容の表示、LCPは表示領域内の大きな主要コンテンツの表示を捉えます。FCPが速くてもLCPが遅ければ、最初の表示後も主要コンテンツを待つことになります。

FCPを改善するには何を確認しますか?

まずサーバー応答と、描画を妨げているCSSやJavaScriptを確認します。初期表示に必要なCSSの扱いやフォントの読み込みを、測定した原因に合わせて調整します。すべてのリソースを一律に事前読み込みするのではなく、実際の改善を確認します。