Lighthouse の導入以来、ページ速度に関連する新しいパラメータが登場しています。これらのパラメータの中で最も重要なものの 1 つが First Contentful Paint (FCP) です。 Lighthouseバージョン10では、2024年10月からFCPが全体のスコアに与える影響はXNUMX%になります。.
FCPを指標として採用し理解するには、まずその背後にある心理学を調べることが不可欠です。その概念は、 エレベーターに設置された鏡:
簡単にまとめると、1900年代前半には高層ビルでのエレベーターの利用が大幅に増加しましたが、エレベーターのシステムは今日と比較すると原始的でした。そのため、エレベーターに鏡を設置して、エレベーター内で過ごす時間を短く感じさせるというアイデアが生まれました。
話題に戻りますが、ページにアクセスしようとしたときに読み込み時間中に知覚的に待たされるポイントは FCP です。 ファーストコンテンツペイントの定義は、最初のテキスト、画像、白以外のキャンバスなどがユーザーに表示されるまでの時間です。FCP の単位は秒です。
Lighthouse では、FCP のカラー スケールは次のように決定されます。
- 0～2秒: 緑 => 速い
- 2～4秒: オレンジ => 改善が必要
- 4秒以上: 赤 => 遅い
HTTPアーカイブのデータによると、 速いのは25％、既存のサイトの 50% が低速と分類されています。
FCP を改善するために何ができるでしょうか?
サーバーの応答時間を短縮
一般的に、これはサーバー側とソフトウェアの改善が必要であると解釈できます。サーバーの応答時間に悪影響を与える問題をリストすると、次のようになります。
- サーバーの共有、構成（サーバー設定）、サーバーリソースが問題である可能性がありますサーバーの容量はトラフィックに応じて増やす必要があります。場合によっては、データベース クエリの記述が不十分であったり、ソフトウェア コンポーネントが非常に複雑であったりすると、サーバーの応答時間に重大な影響を与えることがあります。
- CDN（コンテンツ配信ネットワーク）を使用しないと、コンテンツへのアクセスに遅延が発生し、FCPに影響する可能性があります。コンテンツのサイズが大きくなると、たとえば、大きなアニメーション GIF やビデオを CDN なしで呼び出そうとし、メイン サーバーが別の大陸にある場合、FCP を解決するために CDN ソリューションを検討する必要がある場合があります。
- 適切かつ一貫したキャッシュポリシーで静的コンテンツを提供しないと、過負荷になる可能性があります。 訪問者数が増えるとサーバーに不必要な負荷がかかるたとえば、各ページでロゴを読み込むときにロゴを長期キャッシュに保存しておかないと、サーバーの応答時間が不必要に遅くなります。
- 不要なページリダイレクト ページにアクセスしている間は、FCP に不必要な影響を与える可能性があります。
たとえば、以前は次のような設定がありました。ユーザーがサイトにアクセスしようとすると、HTTP から HTTPS へのリダイレクトがあり、モバイルの場合は HTTPS からモバイルへのリダイレクト (例: https://www から https://m) があり、ページが削除されて 301 で別の場所にリダイレクトされると、まるでユーザーが税務署の机から机へと渡されているように感じられました。これはわかりやすいように極端な例ですが、ページを 301 リダイレクトで別の URL にリダイレクトし、そのページを 301 で別のページにリダイレクトすると、同じ非論理的な設定になっている可能性があります。
- もしあなた 事前接続やDNSプリフェッチを使用しない サードパーティのサービスに接続するときにプレフィックスを使用し、多くのサードパーティのサービスに接続すると、FCP にとって有益なことは何もありません。
レンダリングを妨げるリソースを削減する
項目として記述されたこの単一のポイントに対処するには、数か月かかる可能性があることを認めなければなりません。
これを達成するために、すべての ページのレンダリングをブロックするJS、CSS、および同様のリソースは、ページの作成後に読み込まれますが、サイトの最初の表示部分は、サイトの読み込み中に最初に読み込まれます。ただし、これを行うには、すべての JS、CSS、および同様のリソースを調べ、最も時間のかかるプロセスを分離する必要があります。また、サードパーティのサービスをできるだけ少なく使用することで、FCP を最適化できます。
