WordPress の First Contentful Paint (FCP) を改善する方法

First Contentful Paint の紹介

First Contentful Paint は、ページの読み込み速度を監視する便利な指標です。 サイトのパフォーマンスを測定するさまざまな同様の指標があります。 FCP は特に、コンテンツの最初の部分がページに表示されるまでの時間に重点を置いています。 FCP が生成されると、ユーザーは残りの作業が進行中であることを認識します。

これは、Google の Core Web Vitals の Largest Contentful Paint (LCP) メトリックに似ています。 しかし、LCP はサイトの「メイン」コンテンツの読み込みにかかる時間を測定しますが、FCP はコンテンツの最初の部分 (メイン コンテンツである場合もそうでない場合もある) にのみ焦点を合わせます。

FCP スコアに影響する要因は多数あります。 JavaScript ファイルと不十分に最適化された HTML は、処理に多くのリソースが必要になるため、パフォーマンスが低下する一般的な原因です。 さらに、レンダリング ブロック スクリプトは、他の操作を実行する前に処理する必要があるため、FCP スコアに影響を与える可能性があります。

FCP スコアは、ウェブサイト全体の速度を示す指標であるため、重要です。 パフォーマンスは UX にとって重要であるだけでなく、Google などの検索エンジンがページのランク付け方法を決定する際に考慮する要素でもあります。 パフォーマンスが低いと、検索ランキングが低くなる可能性があります。 これは、First Contentful Paint を改善する方法がわからない場合、Web サイトの可視性に影響を与える可能性があることを意味します.

First Contentful Paint の測定方法

FCP はユーザーの認識を把握する手段を提供しますが、ラボのテストやフィールド データを通じて客観的に測定できる指標でもあります。 たとえば、PageSpeed Insights は、実際のユーザーが何を経験しているかを確認できるツールです (サイトに Chrome ユーザー エクスペリエンス レポートに含まれるのに十分なトラフィックがある場合)。

実際のユーザー エクスペリエンスを確認するのに十分なデータがサイトにない場合でも、PageSpeed Insights はシミュレートされたラボ テストで FCP データを収集するのに役立ちます。

使用するには、URL を入力するだけですぐに結果が得られます。

モバイル ビューとデスクトップ ビューを切り替えて、さまざまなデバイスでの Web サイトの応答性を確認することもできます。

FCP を測定するためのもう 1 つの便利なツールは WebPageTest です。これは少し時間がかかりますが、より詳細な分析を提供できます。

適切な FCP 時間とは?

Chrome によると、1.8 秒未満であれば、サイトの FCP スコアは良好です。 FCP スコアが 3 秒を超えると、心配になります。

ただし、現在のサイトの FCP スコアが高い場合でも、常に改善の余地があります。

WordPress の First Contentful Paint を改善する方法 (6 つのテクニック)

FCP について少し理解できたので、6 つの効果的な方法でサイトの First Contentful Paint を改善する方法を見てみましょう。

1. コンテンツ配信ネットワーク (CDN) を使用する
2. 画像の最適化と圧縮
3. レンダリングをブロックするリソースを排除する
4. DOM サイズを小さくする
5. サーバーの応答時間を改善する
6. 過度のページ リダイレクトを避ける

1. コンテンツ配信ネットワーク (CDN) を使用する

コンテンツ配信ネットワーク (CDN) は、全体的な読み込み時間を短縮する簡単な方法です。 これがないと、ユーザーが Web サイトにアクセスしたときに、必要なデータがサイトのプライマリ サーバーとユーザーの場所の間で転送されるまで待つ必要があります。 これにより、ホスティング プロバイダーのサーバーから地理的に離れた場所にいるユーザーの待ち時間が長くなる可能性があります。

一方、CDN は、世界中に分散されたサーバーのネットワークを提供します。 したがって、各訪問者に物理的に最も近いサーバーからコンテンツを配信できます。

CDN の一般的な例の 1 つは、世界中に 275 を超えるデータセンターを持つ Cloudflare です。

Cloudflare を使用すると、ロスレス画像最適化などの他の最適化手法を利用できます。

通常、CDN はキャッシングやその他の戦略を使用して FCP を改善します。 たとえば、CDN プロバイダーは、Web サイトを軽量化するために縮小とファイル圧縮を提供する場合があります。 これにより、待ち時間を短縮し、UX を改善し、プライマリ サーバーの負荷を軽減できます。

2.画像​​の最適化と圧縮

画像が Web サイトに読み込まれる最初の要素になることはめったにありません。 ただし、ポートフォリオや写真のショーケースなど、メディアを多用するサイトを運営している場合は、画像を最適化して圧縮し、FCP スコア (および全体的なパフォーマンス) を向上させることが重要です。

画像を最適化する 1 つの方法は、別のファイル形式に切り替えることです。 たとえば、現在 JPG/JPEG または PNG に依存している場合は、SVG や WebP などの圧縮率の高い形式に移行できます。

また、画像のサイズをニーズに合った最小のサイズに変更し、圧縮してさらにサイズを小さくする必要があります。

オンライン ツールを使用してこれらすべてを手動で行うこともできますが、WordPress ユーザーにとってはるかに簡単な方法は、画像最適化プラグインを使用することです。

たとえば、無料の Optimole プラグインを使用すると、画像のサイズ変更、圧縮、変換を自動的に行うことができます。 さらに、組み込みの CDN からサービスを提供することもでき、一石二鳥です。

このツールを使用すると、訪問者がサイトにアクセスするために使用するデバイスに関係なく、高品質の画像を高速で配信できます. 遅延読み込みや画像のサイズ変更などの機能を使用して、画像をさらに完成させることができます。

3. レンダリングをブロックするリソースを排除する

レンダリングをブロックするリソースは、サイトの最初のコンテンツを読み込むのに重要でなくても、ブラウザーが最初に処理する必要があるため、コンテンツがすばやく読み込まれない可能性があります。 その結果、FCP スコアが遅くなる可能性があります。 これには、HTML コード、CSS スタイル シート、および JavaScript ファイルを含めることができます。

First Contentful Paint を改善する方法を知りたい場合は、レンダリングをブロックするリソースを排除する方法がいくつかあります。 開発に慣れていて、ページで使用されていないコードを見つけた場合は、先に進んで削除できます。 <script> タグと <style> タグを使用して、重要なリソースを特定し、それらをページ内に「インライン」で配置することもできます。

さらに、JavaScript を遅延させることができるため、ブラウザーがこれらのファイルを処理するのを待っている間、コンテンツが遅延することはありません。 さらに、重要な CSS を生成して、コンテンツを「スクロールせずに見える範囲」 (ユーザーがすぐに目にする部分) に表示することができます。 開発者でない場合は、Jetpack のようなツールを使用すると、これらの変更を行うことができます。

4. DOM サイズを小さくする

Web ページが読み込まれると、ブラウザーはドキュメント オブジェクト モデル (DOM) を作成します。 これは、ページを構成するすべてのオブジェクトを表しています。

ページに DOM ノード (HTML タグ) が多すぎる場合、または入れ子が深すぎる場合、ブラウザーがページを処理するのに時間がかかります。 これにより、読み込み速度が遅くなり、FCP スコアが低下する可能性があります。

したがって、DOM サイズを小さくすることで FCP を改善できます。 不要な <div> タグを削除し、長いページを小さなページに分割し、アーカイブまたはホームページの投稿数を制限することで、これを手動で行うことができます。

さらに、Optimole などの最適化プラグインを使用して、HTML 要素を遅延ロードすることもできます。 遅延読み込みは、必要になるまでコンテンツの読み込みを遅らせる手法です。 ブラウザーは、すべてを一度に処理するのではなく、すぐに表示される要素を配信することに集中できます。

多くのテーマ (およびページ ビルダー) では <div> タグが多すぎるため、最適化されたテーマを選択すると DOM サイズの削減にも役立ちます。 新しいテーマを探している場合は、高速で軽量で、高品質のコードのみを使用する Neve をチェックすることをお勧めします。

5. サーバーの応答時間を改善する

サーバーの応答時間は、最初のバイトまでの時間 (TTFB) とも呼ばれます。 このメトリックは、ユーザーがリクエストを行ってからサーバーが最初のバイトの情報を送信するまでの時間を測定します。

サーバーの応答時間 (およびその結果としての FCP スコア) を向上させる方法は多数あります。

まず、高品質のホスティング プロバイダーを選択することが重要です。 WordPress Web サイトに特化したホストを探し、そのサーバーの場所に注意を払うのが最善です。 理想的には、ホストには主要な視聴者に近いサーバーが必要です。

ホストのパフォーマンスを向上させたい場合は、最速の WordPress ホスティングのデータに裏打ちされたコレクションからプロバイダーを選択できます。

ただし、ホスティングプロバイダーが便利なサーバーを提供していない場合は、いつでも CDN を選択できます。これについては、First Contentful Paint を改善する方法について説明したときに説明しました.

キャッシュは、応答時間を短縮する優れた方法です。 一部のホストは組み込みのキャッシュを提供します。 または、WP Rocket や WP Fastest Cache などのキャッシュ プラグインをインストールすることもできます。

6. ページのリダイレクトが多すぎるのを避ける

すぐに別のサイトにリダイレクトされるページにアクセスすると、ブラウザーは新しい場所に対して別の HTTP 要求を作成する必要があります。 これにより、Web ページの読み込みが遅くなるため、FCP スコアが低くなる可能性があります。

ページにリダイレクトが多いほど、FCP スコアが低くなる可能性があります。 さらに、ページのリダイレクトが多すぎると、UX が著しく損なわれる可能性があります。

問題がサイト全体で発生している場合は、www から非 www へのリダイレクト (またはその逆) および/または HTTP から HTTPS へのリダイレクトをどのように管理しているかを調べてください。

たとえば、 http://www.yoursite.comからhttp://yoursite.comにリダイレクトしてから、再びhttps://yoursite.comにリダイレクトする場合、1 つのステップでそれを行う方が効率的です。

リダイレクトが 1 つのページの FCP にのみ影響を与えている場合は、そのページ用に作成したリダイレクトを調べてください。

リダイレクトは手動で管理できますが、時間がかかる場合があります。 通常、リダイレクトなどの WordPress プラグインを選択することをお勧めします。

インストールが完了すると、このツールを使用してリダイレクトを簡単かつ迅速に管理できます。

あなたのサイトの FCP 時間を今すぐ改善しましょう

複雑な、またはコンテンツの多い Web サイトでは、高速な読み込み時間を維持するのが難しい場合があります。 幸いなことに、First Contentful Paint (FCP) などの主要な指標をターゲットにすることで、訪問者がコンテンツを表示するまでの時間を評価して改善することができます。

要約すると、WordPress の First Contentful Paint を改善する方法は次のとおりです。

サイトを高速化するその他の方法については、WordPress を高速化するさまざまな方法のコレクションをご覧ください。

WordPress の FCP の改善について質問がありますか? 以下のコメントセクションでお知らせください！