優れたソフトウェアと実用的なチュートリアル
最初のコンテンツペイント（FCP）は測定値である知覚される読み込み速度FCPは、ページ読み込みタイムラインにおいてユーザーが画面上で初めて何かを目にする時点を示すため、ユーザー中心の重要な指標です。FCPが速いほど、ユーザーは何かが起こっていることを確信しやすくなります。行為。
FCPとは何ですか?
First Contentful Paint（FCP）指標は、ページの読み込み開始から、ページコンテンツの一部が画面上にレンダリングされるまでにかかる時間を測定します。この指標における「コンテンツ」とは、テキスト、画像（背景画像を含む）、
上記の読み込みタイムラインでは、最初のテキストとグラフィック要素が画面上でレンダリングを完了したとき、フレーム 2 で FCP が発生します。
一部のコンテンツのレンダリングは完了していますが、すべてのコンテンツのレンダリングが完了しているわけではないことに気付くでしょう。初めコンテンツペイント（FCP）と*最大コンテンツペイント（LCP）* (ページのメインコンテンツの読み込みが完了した時点を測定するように設計されています)。
良い FCP スコアとは何ですか?
優れたユーザーエクスペリエンスを提供するために、サイトは最初のコンテンツペイントを1.8秒ほとんどのユーザーに対して推奨目標を達成できるようにするには、適切な測定しきい値は次のとおりです。75パーセンタイルこのしきい値はモバイルデバイスとデスクトップデバイスの両方に適用されます
FCPの測定方法
FCPは研究室測定または実際の以下のツールで測定および使用できます。
測定ツール
- PageSpeed Insights ウェブページ速度測定ツール
- Chrome ユーザー エクスペリエンス レポート
- Search Console（速度レポート）
- web-vitals JavaScript ライブラリ
実験器具
JavaScriptでFCPを測定する
JavaScriptでFCPを測定するには、描画タイミングAPI次の例は、パフォーマンスオブザーバーfirst-contentful-paint という名前のペイント エントリをリッスンし、コンソールにログを記録します。
上記の例では、記録された最初のコンテンツペイントこのエントリは、最初のコンテンツ要素が描画されたタイミングを示します。ただし、場合によっては、このエントリを使用してFCPを測定できないことがあります。
次のセクションでは、API がレポートする内容とメトリックの計算方法の違いについて説明します。
指標とAPIの違い
- バックグラウンドタブに読み込まれたページのAPIディスパッチ最初のコンテンツペイントエントリですが、FCP を計算するときにはこれらのページは無視されます (最初のペイントのタイミングは、ページが常にフォアグラウンドにある場合にのみ考慮されます)。
- ページが通過するとラウンドトリップキャッシュ再開時にAPIは報告しない最初のコンテンツペイントエントリですが、これはユーザーによる複数の異なるページ訪問であるため、このような場合には FCP を測定する必要があります。
- API クロスオリジンの iframe のペイントタイミングが報告されない場合がありますただし、FCPを正しく測定するには、すべてのフレームを考慮する必要があります。子フレームはAPIを使用して、これらのフレームの描画タイミングを親フレームに報告し、集計することができます。
開発者は、これらのニュアンスをすべて覚える代わりに、web-vitals JavaScript ライブラリLCP を測定するために、ライブラリはこれらの違いを自ら処理します (可能な場合)。
輸入 {ゲットFCP} から 「ウェブバイタル」;
// FCP が利用可能になったらすぐに測定して記録します。
ゲットFCP(コンソール.ログ);
JavaScript で LCP を測定する方法の完全な例については、getLCP() のソース コードを参照してください。
FCPを改善する方法
特定のサイトの FID を改善する方法を確認するには、Lighthouse パフォーマンス監査を実行し、監査で推奨される特定のオプションを確認します。チャンスまたは診断。
FCP (あらゆるサイト) を改善するための一般的な方法については、次のパフォーマンス ガイドを参照してください。
