First Contentful Paint（FCP）は、Lighthouseレポートのパフォーマンスセクションで追跡される6つのメトリックの1つです。各メトリックは、ページの読み込み速度のいくつかの側面をキャプチャします。 FCPが測定するもの FCPは、ユーザーがページに移動した後、...
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]セクションを使用して、ページに最も価値のある改善点を決定します。機会が重要であるほど、パフォーマンススコアへの影響は大きくなります。
最新ニュース
はてなブックマーク - 新着エントリー - 総合 新着エントリー
- Houtou.pm #1 を開催しました - Houtou.pmon 2025年6月2日 at AM 9:56
こんにちは。id:anatofuzです。 今回は事前に登録していただいた方の出席率が100%で初回としては最高の盛り上がりという回でした。 houtoupm.connpass.com トーク資料一覧 speakerdeck.com speakerdeck.com docs.google.com speakerdeck.com docs.google.com speakerdeck.com speakerdeck.com speakerdeck.com 当日の雰...
- MCPにおけるセキュリティ考慮事項と実装における観点（後編） - GMO Flatt Security Blogon 2025年6月2日 at AM 9:16
MCP logo ©︎ 2024–2025 Anthropic, PBC and contributors | MIT license はじめに こんにちは、GMO Flatt Security株式会社 セキュリティエンジニアのAzaraです。普段は、クラウドセキュリティや Web アプリケーションのセキュリティを専門領域にしています。 本稿は MCP のセキュリティを前後編で解説するものの後編です...
- 東京にいて一番思う事あるある→外国人ってビデオ通話好き過ぎるだろ「まじで日本にいる外国人一生電話してる」「なんで日本人にはその文化がないんだろうね」on 2025年6月2日 at AM 8:46
成瀬 @choconaruse 叔母がカナダ住みで叔母と叔母の彼氏が日本に遊びに来た時に、まじで頻繁にビデオ通話するし 「僕の家族or友達を紹介したい！」って言ってビデオ通話させられるからまじで本当に大好きなんだと思う。 x.com/konomaehajimeh… 2025-06-02 14:50:09
- 北海道 震度4相次ぐ 日頃から備え進めるよう呼びかけ 気象庁 | NHKon 2025年6月2日 at AM 8:35
2日朝早くに起きた北海道十勝沖を震源とする地震など北海道では5月から震度4の揺れを観測する地震が相次いでいます。 気象庁は、ほかの地震を誘発する規模ではないとする一方で、千島海溝沿いでは過去にも巨大地震が起きているとして、日頃から備えを進めるよう呼びかけています。 気象庁によりますと、2日午前4時前、十...
- ワンバイナリWebサービスのススメon 2025年6月2日 at AM 7:36
Houtou.pm #1 https://houtoupm.connpass.com/event/348282/
- 日本の「プラごみ」で揚げる豆腐が、重大な健康被害と環境汚染を引き起こしているon 2025年6月2日 at AM 7:29
＜インドネシアの工場で揚げる豆腐が大気と食品に汚染の連鎖に...日本も関わっている＞ 写真は5月22日、インドネシアの東ジャワ州シドアルジョの伝統的な豆腐工場で、プラごみに木片とココナツの殻を交ぜて燃やす準備をする作業員。 ■【動画】プラごみで揚げた豆腐の厚揚げ を見る こうした工場で作られた厚揚げからは...
- 本の街 神保町3書店の2025年上半期ベストセラー発表。徒歩10分圏内でも全く違う本が売れていました。on 2025年6月2日 at AM 7:27
本の街 神保町3書店の2025年上半期ベストセラー発表。徒歩10分圏内でも全く違う本が売れていました。 2025年上半期のベストセラーランキングが各社より発信されました。 「本の街 神保町」には3つの大型書店があります。それぞれの書店ごとに、いったいどのようなランキングになっているのか？比べてみたことがありませ...
- スクロールの状態変化でスタイル切替が可能に！ CSSコンテナークエリーのscroll-state()入門 - ICS MEDIAon 2025年6月2日 at AM 7:15
スクロールの状態変化でスタイル切替が可能に！ CSSコンテナークエリーのscroll-state()入門 @container scroll-state()は、CSSコンテナークエリーの一種です。従来はJavaScriptを使って実装していた、「スクロールされたらヘッダーのスタイルを切り替える」等のインタラクションをCSSだけで実装できるようになります。 ...
