最新の値上げをチェックして賢くお買い物！値上げニュース

First Contentful Paint

 このエントリーをはてなブックマークに追加
Web, Webクリップ, データベース

First Contentful Paint（FCP）は、Lighthouseレポートのパフォーマンスセクションで追跡される6つのメトリックの1つです。各メトリックは、ページの読み込み速度のいくつかの側面をキャプチャします。

FCPが測定するもの

FCPは、ユーザーがページに移動した後、ブラウザーがDOMコンテンツの最初の部分をレンダリングするのにかかる時間を測定します。<canvas>ページ上の画像、白以外の要素、およびSVGはDOMコンテンツと見なされます。iframe内には何も含まれていません。

LighthouseがFCPスコアを決定する方法

FCPスコアは、HTTPアーカイブのデータに基づいた、実際のWebサイトのページのFCP時間とFCP時間の比較です 。たとえば、99パーセンタイルで実行されているサイトは、約1.5秒でFCPをレンダリングします。WebサイトのFCPが1.5秒の場合、FCPスコアは99です。

FCPスコアを改善する方法

FCPで特に重要な問題の1つは、フォントの読み込み時間です。フォントの読み込みを高速化する方法については、ウェブフォントの読み込みの投稿中にテキストが表示されたままであることを確認してください。

実際のユーザーのデバイスでFCPを追跡する

ユーザーのデバイスでFCPが実際に発生するタイミングを測定する方法については、Googleのユーザー中心のパフォーマンス指標のページをご覧ください。トラッキングFP / FCPのセクションでは、どのようにプログラムでアクセスFCPデータに記述し、Googleアナリティクスに送信します。

実際のユーザーの指標の収集について詳しくは、Googleのナビゲーションとリソースタイミングを使用した実際の読み込みパフォーマンスの評価をご覧ください。

全体的なパフォーマンススコアを向上させる方法

特定の指標に焦点を当てる特別な理由がない限り、通常は全体的なパフォーマンススコアの向上に焦点を当てたほうがよいでしょう。

Lighthouseレポートの[ Opportunities]セクションを使用して、ページに最も価値のある改善点を決定します。機会が重要であるほど、パフォーマンススコアへの影響は大きくなります。

最新ニュース

全てのニュース >>

はてなブックマーク - 新着エントリー - 総合 新着エントリー



出典：公式総合情報データベースサイト｢coron｣ 執筆者 : .

管理人のアンテナlive!

coronでは、サイトの利用状態の記録解析やパーソナライズ機能を利用するために、Cookieなどを使用してアクセスデータを取得・利用しています。
利用を続ける場合、これらの情報の取得・利用及びウェブサイト利用規約に同意したものとみなします。以下から詳細及びオプトアウトについてご確認ください。

ウェブサイト利用規約    
掲載されている広告について    
推奨環境