最大のコンテンツフル ペイント (LCP): Web パフォーマンスのガイド

公開: 2024-04-24

目次
最大のコンテンツフル ペイント (LCP) とは何ですか?
最大のコンテンツフル ペイントと最初のコンテンツフル ペイントの違いは何ですか?
最大コンテンツフル ペイントが WordPress サイトにとってなぜ重要なのでしょうか?
Largest Contentful Paint スコアはどれくらい良いですか?
「最大コンテンツフル ペイントのスコアが悪い」の原因は何ですか?
Web サイトの最大コンテンツフル ペイント スコアを確認するにはどうすればよいですか?
ウェブサイトの最大のコンテンツを含むペイントをどのように改善しますか? (10の効果的な方法)
まとめ

Google アルゴリズムの更新が繰り返された後、多くの要素が追加および削除されましたが、常にリストに残る要素が 1 つあります。それは、Core Web Vitals です。

Core Web Vitals は、検索エンジンの巨人である Google が Web サイトのエクスペリエンスを判断する要素の 1 つとみなしているさまざまな重要な要素で構成されています。 したがって、単純に無視することはできません。

Core Web Vitals には Web サイト全体のエクスペリエンスを向上させるのに役立つさまざまな指標がありますが、最も重要なものの 1 つは最大コンテンツフル ペイントです。

さて、現時点では、「この LCP とは何ですか。WordPress サイトの検索エンジンのランキング要素にとって、LCP はどのように重要なのでしょうか?」と考えているかもしれません。 どうすれば改善できるでしょうか?』

この投稿では、これらすべての質問に十分に答えます。 さらに、LCP に関する知識レベルに応じて、目次にリストされている目的のセクションに切り替えることも、最初から始めることもできます。 それでは、早速始めましょう!


最大のコンテンツフル ペイント (LCP) とは何ですか?

Largest Contentful Paint (LCP) は、Web ページのメイン コンテンツの読み込み速度を測定するために使用される Web コアの重要な指標です。 これは通常、画像、テキストのブロック、ビデオなど、Web ページの最大の要素がユーザーの視点に入る時期を示します。

つまり、Web ページの最も重要な部分がどれだけ早く画面に表示されるかを示します。

ここで言う「メインコンテンツ」とは一体何なのか知りたいかもしれません。 「メイン コンテンツ」は、Web ページで利用できるコンテンツに応じて何でも構いません。

一般的にはそうかもしれませんが、

  • テキストのブロック: HTML 内の、「テキスト ノード」 (実際のテキスト コンテンツ) または「インライン レベルのテキスト要素」 (スパンや強調テキストなど) を含む「ブロック レベルの要素」 (段落や div など)。
  • 画像またはグラフィック: <img> タグ内または <svg> 要素内に配置されるコンテンツ。
  • ビデオ: <video> 要素内のすべてのコンテンツ
  • CSS を使用して背景画像でスタイル設定された要素でも、特にurl()関数を通じて読み込まれます。 ただし、CSS グラデーションには適用されません。

最大のコンテンツフル ペイントと最初のコンテンツフル ペイントの違いは何ですか?

また、コア Web バイタルを検討しているときに、ある時点で、最大コンテンツフル ペイントと最初のコンテンツフル ペイントという 2 つの指標を混同する可能性があります。 最初は、誰でもこれらの用語を同様に扱うことができますが、大きな違いがあります。

LCP または最大コンテンツフル ペイントは、Web ページのメイン コンテンツを完全に読み込むのにかかる時間を示します。 一方、FCPまたはFirst Contentful Paint。 は、メイン コンテンツであるかどうかに関係なく、最初にロードされるオブジェクトを示しています。

よりよく理解するために、例を挙げて説明しましょう。 Web ページが本のようなものであると想像してください。 本を開いたとき、最初にチェックすることは何ですか? 最初の章ですよね? メインコンテンツに直接進みます。 それが FCP (First Contentful Paint) のすべてです。

ただし、本を開いてメインコンテンツの代わりに謝辞ページまたは目次ページが表示された場合でも、それは FCP または First Contentful Paint とみなされます。


最大コンテンツフル ペイントが WordPress サイトにとってなぜ重要なのでしょうか?

冒頭ですでに述べたように、LCP は Core Web Vitals の一部であり、Web サイトのユーザー エクスペリエンスを決定する上で重要な役割を果たします。 これは最終的に、検索エンジンが SERP で Web サイトをランク付けするのに役立ちます。

つまり、目的は 2 つあり、

  • ユーザーエクスペリエンスの向上
  • SEO
  • よりよい性能

ユーザーエクスペリエンスの向上

  • LCP (Largest Contentful Paint) は、Web サイトのパフォーマンスに関するユーザー エクスペリエンスを理解するための最良の指標です。
  • これは、ユーザーが Web サイトから価値を受け取り始める時期を測定するためのプロキシのようなものです。
  • 通常、LCP スコアが高いほどユーザー エクスペリエンスが向上し、検索エンジンのランキング要素の 1 つと見なされます。
  • ほとんどのユーザーにとって、Web サイトがページを完全に読み込むのにどれくらいの時間がかかるかは重要ではありませんが、Web サイトから貴重なコンテンツにどれだけ速く簡単にアクセスできるかが重要です。
  • ユーザーは、すべてのスクリプトや要素が読み込まれるのを待つのではなく、すぐに価値を得ることができる Web サイトのみを優先します。
  • LCP メトリクスは通常、Web サイトのメイン コンテンツの読み込みにかかる時間を測定し、ユーザーが Web サイトから価値を受け取り始める瞬間を示します。
  • 高速な LCP 時間を達成することは、Web サイトがユーザーに安定したパフォーマンス エクスペリエンスを提供できることを示しています。
  • ただし、LCP だけでユーザー エクスペリエンスを決定するには十分なので、ユーザー フレンドリーなデザインや Web サイトの使いやすさなど、他の要素も考慮する必要があります。

SEOの向上

SEO の観点から見ると、LCP (Largest Contentful Paint) は、Google のランキング要素の 1 つである Web Core Vitals の一部です。 これは、LCP スコアが低いと、検索エンジンでのランキングに大きな影響を与える可能性があることを意味します。

また、Google は主にコンテンツの品質、関連性、インバウンドリンクの信頼性を優先しており、これらはすべて Web サイトのランキングを決定する上で重要な役割を果たしているということも注目に値します。

よりよい性能

前のセクションで、ユーザーが Web サイトから貴重なコンテンツをできるだけ早く取得したいと考えていることを説明したため、Web サイトは高速に読み込まれる必要があります。 これを可能にするには、LCP スコアを改善して、サイトがより速く読み込まれ、ユーザーがより早く利用できるようにする必要があります。

それは、LCP スコアが高くなると次のような効果が得られるためです。

  • 検索エンジンのランキングの向上: LCP は Core Web Vitals の一部であるため、Google による Web サイトのランク付けに影響します。 LCP を最適化することで、より良いランキングを獲得できる可能性が高まり、より多くの訪問者を獲得し、ROI を高めることができます。
  • 低い直帰率:読み込み時間が短縮されると、訪問者がページの読み込みにイライラしてすぐに Web サイトから離れる可能性が低くなります。
  • コンバージョンの増加: LCP が改善されると Web サイトが高速になり、Web サイトが高速になると一般的にコンバージョンが増加します。

Largest Contentful Paint スコアはどれくらい良いですか?

Google が言及した推奨事項によれば、適切な Largest Contentful ペイントは 2.5 秒未満である必要があります。 (LCP は時間で測定されます)

以下は、Google による LCP スコアとその意味を表す図です。

Google's LCP Score Value
GoogleのLCPスコア値

Google は、2.5 秒未満の LCP タイミングを良好であるとみなします。

2.5 秒から 4.0 秒の間の LCP タイミングには改善が必要です。

4.0 秒以上の LCP タイミングは不良とみなされます。

LCP Score Value Chart
LCP スコア値チャート

「最大コンテンツフル ペイントのスコアが悪い」の原因は何ですか?

さて、Web サイトの最大コンテンツフル ペイント スコアが低い理由は何だろうと疑問に思われるかもしれません。 Web マスターまたは Web デザイナーが Web サイトを設計する際に、優れた LCP スコアを確保するために考慮する必要がある 4 つの要素があります。

  • Web ホスティングが遅い: LCP スコアが低い主な理由の 1 つは、Web ホスティングが遅いことです。 これらの Web ホストの TTFB は一般に遅いです。 ( WPOven には高速な TTFB があり、専用リソースを備えた最速のサーバーがあります)。

注:最初のバイトまでの時間 (TTFB) は、Web サイトからの情報のリクエスト後、ブラウザーが情報の受信を開始するまでにかかる時間です。 それは、手紙を送ってから最初の郵便物が届くまでにかかる時間のようなものです。 TTFB が低いほど、Web サイトからの情報の取得が早く開始されることを意味します。


  • 最適化されていないメディア ファイル: Web サイトに、読み込みに時間がかかる画像、ビデオ、その他のファイルなどの大きなメディア ファイルがある場合、LCP の速度が低下する可能性があります。
  • レンダリング ブロック リソース: メイン コンテンツのレンダリングをブロックするスクリプトまたはスタイルシートは、LCP を遅延させる可能性があります。
  • サーバーの応答時間が遅い: Web サイトをホストしているサーバーがユーザーのリクエストに応答するのが遅い場合、メイン コンテンツの読み込みにかかる時間が長くなる可能性があります。
  • CDN がインストールされていない: CDN またはコンテンツ配信ネットワークは、オリジン サーバーから Web コンテンツをダウンロードするのではなく、グローバル サーバーからコンテンツを配信することで TTFB を強化できます。
  • 最適化されていないコード: 最適化が不十分な HTML、CSS、または JavaScript コードにより、Web ページのメイン コンテンツのレンダリングに遅延が発生する可能性があります。
  • 最適化されていないフォント: FCP 要素がテキストで、最適化されていないカスタム フォントを使用している場合、読み込みに時間がかかる可能性があります。
  • 圧縮ファイルを使用しない: Gzip や Brotli などの圧縮技術を使用していない場合、ブラウザが Web サイトのファイルを読み込むのに時間がかかります。
  • サードパーティのスクリプト: 分析やソーシャル メディア ウィジェットなどのサードパーティのスクリプトを統合すると、メイン コンテンツの読み込みにさらなる遅延が発生する可能性があります。
  • ネットワークの問題: インターネット接続が遅いか、ネットワーク トラフィックが多いと、メイン コンテンツが表示されるまでの時間が影響を受ける可能性があります。

Web サイトの最大コンテンツフル ペイント スコアを確認するにはどうすればよいですか?

Web サイトの LCP スコアを簡単にチェックできる無料のオンライン ツールが多数あります。 以下にその一部をご紹介しますので、ご参考までに。

1. ページスピードの洞察

Google の PagepSeed Insight は、利用できる最高のツールの 1 つです。 PageSpeed Insight Web サイトにアクセスしてドメインを入力するだけです。

Google's PageSpeed Insight tool
GoogleのPageSpeed Insightツール

その後、「分析」ボタンをクリックします。 Google はモバイルとデスクトップの両方の結果をすべて表示します。

PageSpeed Insight Performance Results
PageSpeed Insight のパフォーマンス結果

モバイルとデスクトップの両方の結果を確認し、以下に示すように、診断セクションで Google が推奨する改善領域を確認します。

PageSpeed Insights Diagnostics Report
PageSpeed Insights 診断レポート

2. Googleの灯台

Google が提供するもう 1 つの優れたツールは Lighthouse です。これは、Web サイトのパフォーマンスの向上に役立つオープンソースの無料ツールです。 Chrome ブラウザに Lighthouse 拡張機能をインストールするだけです。

Chrome ブラウザに正常にインストールされたら、Web サイトにアクセスし、Google Chrome の拡張機能アイコンをクリックし、[レポートの生成] をクリックします。

Google's Light House
Googleのライトハウス

3. SEMrush サイト監査ツール

あなたが初心者ではなく、かなり長い間オンライン ビジネスに取り組んでいるのであれば、最も興味深い SEO ツールである SEMrush についてよく知っているはずです。

SEMrush には、Web サイトの技術的側面を簡単に完全に診断できるサイト監査ツールがあります。 このためには、以下の指示に従う必要があります。

  • サイト監査ツールに移動し、Web サイトのアドレスをツールに入力します。
Semrush Site Audit tool
SEMrush サイト監査ツール
  • 「監査を開始」ボタンをクリックします。
  • 次のページでは、必要に応じて設定をカスタマイズするオプションがあります。 必要に応じて、いくつかの設定を調整できます。 たとえば、ツールがチェックするページ数を選択できます。 さらに、ウェブサイトのモバイル版またはデスクトップ版を確認するオプションもあります。
Semrush Site Audit Settings
SEMrush サイト監査ツール
  • ただし、ほとんどの場合、設定はそのままにしておいてかまいません。 「サイト監査の開始」をクリックするだけで、ツールが Web サイトを徹底的にクロールし、すべてをチェックします。
  • すべてが完了すると、レポートが表示されます。 「Core Web Vitals」セクションの「詳細を表示」をクリックします。
Semrush Core Web Vitals tool
SEMrush Core Web Vitals ツール
  • 次のページには、「メトリクス」というセクションが表示されます。 ここで LCP スコアを確認できます。 改善するための提案も表示されます。
Semrush LCP metrics Results
SEMrush LCP メトリクスの結果

WPOven Dedicated Hosting

Web サイトの最大のコンテンツ ペイントをどのように改善しますか? (10の効果的な方法)

ここまでで、Largest Contentful Paint という用語とその重要性についてよく理解したはずです。 ウェブサイトの LCP を改善してパフォーマンスを向上させる方法について、追加のヒントを学びましょう。 以下は、WordPress かどうかに関係なく、あらゆるタイプの Web サイトに適用できる効果的な方法をいくつか紹介します。

1. LCP 要素を理解する

最初に行う必要があるのは、Web コア バイタル テストを実行し、どの LCP 要素を最適化する必要があるかを判断することです。 上記の無料ツールを使用して LCP 要素をチェックアウトできます。 たとえば、PageSpeed Insight ツールを選択した場合、診断セクションに結果が次のように表示されます。

LCP 要素はページごとに異なる場合があり、一部のページではテキストの段落である場合もあれば、他のページでは画像またはビデオである場合もあります。

ページの LCP 要素を理解すると、LCP スコアを向上させるための適切なアプローチに従うことが容易になります。

2. 最速の Web ホストにアップグレードする

まず最初に、最速で最も信頼性の高い Web ホストを選択することを常に強くお勧めします。 最速の Web ホスティングは、Web ホスティングの問題の 90% を解決します。

これらのタイプの Web ホストは専用サーバーを提供し、高速サーバー応答時間を提供できる最速のテクノロジー サーバー スタックを備えているため、LCP スコアを向上させることができます。

LCP 時間を短縮する簡単な方法を選択したい場合は、WordPress サイトを WPOven に移行するだけです。

WPOven は、パフォーマンスが最適化されたホスティング インフラストラクチャを提供するだけでなく、Web サイトを強化する統合機能や組み込み機能も備えています。

これは、ホスティング エクスペリエンスに完全な安心感を与え、最大コンテンツフル ペイント時間の改善に手を煩わせることなく、ビジネスの成長に完全に集中できることを意味します。

ただし、以下に挙げる他の効果的な方法を使用することもできます。 どの方法もうまくいかない場合でも、より適切に管理された Web ホスティング サービスに移行することが最善です。

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

CDN (コンテンツ配信ネットワーク) は、従来の方法と比べて Web サイトのコンテンツをより迅速に配信するのに役立つ最良のツールの 1 つです。 従来の方法では、ユーザーがブラウザからリクエストを送信すると、HTML ファイルや静的アセットを含むサイト コンテンツ全体がオリジン サーバーから取得されます。


読む: WordPress サイトで無料 CDN をアクティブ化する方法?


このため、CDN は、訪問者のリクエストを同じサーバー上でキューに入れる必要がなく、読み込みが高速になるため、ネットワーク負荷のバランスをとることで LCP を改善することにも役立ちます。

WPOven では、Web サイトのパフォーマンスを向上させる組み込みのエッジ キャッシュ機能とともに、Cloudflare を利用した無料の CDN が提供されます。

ただし、ホスティング プロバイダーが無料 CDN を提供していない場合は、手動でインストールすることもできます。 「WordPress サイトに Cloudflare をインストールする方法?」に関する 2 つの専用投稿を参照してください。 および「WordPress で Cloudflare 設定をセットアップする方法?」 完全なステップバイステップガイドについては、「」を参照してください。

4. 画像を最適化する

大きなメディア ファイル、特に高解像度の画像は読み込み時間が遅くなり、LCP スコアに影響を与える可能性があります。 この問題を解決するには、Kraken や ImageOptim などのさまざまな無料オンライン ツールを使用して、画像をより小さなサイズに最適化して圧縮する必要があります。 WordPress サイトに Cloudflare をインストールしている場合は、Cloudflare の組み込み機能「 Cloudflare Polish 」を利用することもできます。

さらに、WebP ファイル形式を選択することもできます。WebP ファイル形式は、パフォーマンスを重視した画像形式であるため、Google が強く推奨しています。WebP ファイル形式は、画像の品質を維持しながら、従来の PNG および JPG に比べて 34% 小さくなります。

5. サーバーの応答時間を最適化する

キャッシュは、完成した HTML ドキュメントを訪問者のブラウザーに送信する前にサーバーの作業を軽減し、Web サイトの速度を向上させます。

WPOven で WordPress サイトをホストしている場合、キャッシュは自動的に最適化されます。 他の場所でホストしている場合は、WP Super Cache などの無料プラグインや WP Rocket などの有料プラグインを使用してキャッシュを有効にすることができます。


注: WPOvenには、サーバー レベルのエッジ キャッシュ機能、独自の minify プラグイン、統合されたプレミアム WProcket が組み込まれており、すべてのプランですべて無料であり、超高速の読み込み時間と最速のサーバー エクスペリエンスを実現します。


その他のオプションについては、最高の WordPress キャッシュ プラグインに関する投稿をご覧ください。 ページの読み込み時間は、Web サーバーがリクエストに応答する速度と密接に関係しています。

それとは別に、より良い結果を得るために以下のヒントに従うことができます。

  • サーバー側キャッシュの実装。ホスティング構成で利用できます。
  • CPUやストレージ容量などのサーバー仕様をアップグレードします。
  • データベース クエリなど、すべてのスクリプトやコードの最適化は技術的な作業になる可能性があり、Web 開発者の支援が必要になる場合があります。

データベースを最適化するには、WordPress サイトの WP-DB Manager プラグインを利用できます。 このプラグインは、肥大化を軽減し、時々自動的にクリーンアップすることでデータベースを最適化できます。

6. レンダリングをブロックする JavaScript と CSS を無効にする (遅延の削除)

レンダリング ブロック JavaScript は、Web ページのメイン コンテンツの読み込みが開始される前でも読み込みを開始する JavaScript ファイルです (ただし、すぐに必要になるわけではありません)。 このプロセスにより、LCP または最大コンテンツフル ペイントとして知られるメイン コンテンツが画面に表示される速度が遅くなる可能性があります。

したがって、この問題を解決するには、次のような戦略を適用できます。

  • Web ページに必要のない JavaScript は常に削除するようにしてください。
  • JavaScript の読み込みを遅らせるか禁止して、メイン コンテンツの読み込みをブロックしないようにします。
  • ユーザーが Web ページの操作を開始しなくなるまで、JavaScript の読み込みプロセスを遅らせます。

ただし、Web サイトが WordPress 上にある場合、これを行う最も簡単な方法は、WP Rocket などの WordPress プラグインを使用することです。

同様に、最適化されていない CSS も Web サイトの読み込み時間を妨げ、LCP に影響を与える可能性があります。 したがって、ロードする CSS をできる限り少なくし、重要な CSS のみを最初にロードし、重要性の低い CSS は後まで遅らせる必要があります。

この点に関しては、特に開発者でない場合は、WP Rocket などの WordPress プラグインで十分です。

また、どの CSS または JavaScript ファイルを安全に削除できるかについては、Web サイト最適化ツールからのヒントや提案に必ず従うようにしてください。

7. 重要なリソースのプリロード機能を有効にする

プリロードは、Web ページの高速化に役立つ特別なプロセスです。 ページの読み込み中に、Web ページの重要なリソースをバックグラウンドで読み込むだけで機能します。 これらのリソースはブラウザのキャッシュに保存されるため、必要なときにすぐに使用できます。

ページの上部に表示される CSS、フォント、画像などの重要なリソースをプリロードすると、遅延を防ぎ、Web ページの読み込みを高速化できます。

8. ページキャッシュを有効にする

キャッシュは、Web ページの特定の部分をキャッシュの形式で一時的に保存し、要求されたときにデータを迅速に取得できるようにするプロセスです。

  • データを保存するには主に、ブラウザ キャッシュとサーバー側キャッシュの 2 つの方法があります。 ブラウザ キャッシュを使用すると、ユーザーは Web ページの一部をローカル デバイス、つまりコンピュータに保存できるため、同じ Web ページに再度アクセスしたときに再度ダウンロードする必要がなくなります。

ブラウザの設定を確認するか、ヘルプ用のプラグインを利用するだけで、ブラウザ キャッシュを自分で有効にすることができます。

  • 一方、サーバー側キャッシュでは Web ページの完全なバージョンがサーバーに保存されるため、誰かが Web ページにアクセスするたびに Web ページをレンダリングする必要はありません。

現在、ページ キャッシュはブラウザ キャッシュの一部であり、ユーザーが初めて Web サイトにアクセスしたときに Web ページが静的 HTML ファイルの形式で保存されます。 このプロセスにより、誰かが訪問するたびに Web サイトのデータベースが同じ情報を複数回クエリする必要がなくなります。


注:ページ キャッシュは、すべての Web サイトでうまく機能しない可能性があります。特に、Web サイトが動的コンテンツや場所、言語などの情報に完全に依存している場合には機能しません。この場合、ページ キャッシュが役立つ可能性があります。


9. CSS、JavaScript、HTML ファイルの縮小を有効にする

スクリプトとコードの最適化についてはすでに述べたので、サイトの HTML、CSS、JavaScript を縮小してコードを小さくするこのアプローチを追加することもできます。

ここでの縮小プロセスとは、単に Web サイトのコードやスクリプトから不要な文字、余分なスペース、コメントを削除してサイズを小さくし、読み込み時間を短縮することを意味します。

WPOven でサイトをホストしている場合、無料の Cloudflare と WP Rocket の統合、および独自の縮小プラグインを通じてこれを自動的に実行できます。

ただし、Web サイトを別の場所でホストしている場合は、無料の WordPress パフォーマンス プラグインまたはプレミアム プラグイン (より良い結果を得るために) を利用してコードを縮小できます。

10. フォントの読み込みを最適化する

メイン コンテンツまたは LCP 要素がテキストの場合、Web サイトのフォント読み込みプロセスが遅くなり、フォントが画面に表示されるのが遅くなる可能性があります。 これはフォントの読み込み方法が原因である可能性があり、通常はカスタム フォントの場合に見られます。

この問題を解決するには、Font-Display: Optional CSS Descriptor と呼ばれる CSS トリックを使用できます。 これにより、カスタム フォントがすぐに読み込まれない場合は、バックアップ フォントを使用するようにブラウザに指示されます。

簡単に言うと、カスタム フォントにロードの機会を与えるものとして理解できます。 ただし、速度が遅いことが判明した場合、ブラウザはコンテンツの遅延を避けるために代わりにバックアップ フォントを使用します。

もう 1 つのオプションは Font-Display: Swap です。これは、最初にバックアップ フォントをロードし、準備ができたらカスタム フォントに切り替えます。 ただし、フォントのサイズが異なるとレイアウトの問題が発生する可能性があるので注意してください。

さらに、次のヒントに従って、フォントによって引き起こされる LCP の問題を回避することもできます。

  • 可能であればシステムフォントを使用してください。
  • 外部ソースに依存しないように、フォントを自分でホストします。
  • 必要な文字のみを含むサブセット フォントを作成して文字を小さくします。
  • CSS で「font-display:Optional」を使用して、必要に応じてバックアップ フォントを使用してもよいことをブラウザに知らせます。

これらのヒントは LCP に役立つだけでなく、Web サイト全体のパフォーマンスの向上にも役立つことを覚えておいてください。

11. 遅延読み込みを使用しないでください

遅延読み込みは、ユーザーが Web サイトを操作するまで画像などの特定の要素の読み込みを遅らせることで Web サイトを高速化するために使用される特別なテクニックです。 便利そうに見えますが、特に Web ページのメイン コンテンツや画像を遅延読み込みしようとしている場合、Web サイトの最大コンテンツフル ペイント (LCP) 時間が遅くなる可能性もあります。

WordPress 5.5 で導入された組み込みの遅延読み込み機能を使用している場合。 WordPress 5.9 以降、WordPress はコンテンツ内の最初の画像を遅延読み込みから自動的に除外するため、この問題が発生しない可能性があります。

ただし、外部の遅延読み込みプラグイン、特に JavaScript を利用したプラグインを使用している場合は、ページ上のメイン画像の遅延読み込みを避けるためにプラグインを再構成する必要がある場合があります。

あるいは、メイン画像に「loading='eager'」という特別な属性をタグ付けして、すぐに読み込まれるようにすることもできます。

12. サーバーレベルの Gzip または Brotli 圧縮を有効にする

サーバー レベルでの圧縮には利点があります。 この方法は、CSS、HTML、JavaScript などのテキスト リソースなど、Web サイトのファイルのサイズを削減するのに役立ちます。 これにより、転送が高速化され、サイトの読み込み時間が短縮され、最終的に最大コンテンツフル ペイント (LCP) スコアが向上します。

この目的のために、通常、Gzip または Brotli という 2 つの圧縮方法を使用します。 これらの方法では、圧縮中にファイル内のすべての情報が失われることなく保持されます。

WPOven は Cloudflare の誇りあるパートナーであるため、Brotli 圧縮は自動的に有効になります。 ただし、別の場所でホストされている場合は、サイトで Gzip または Brotli が有効になっているかどうかを確認する必要があります。 そうでない場合は、 WP Rocketなどの WordPress プラグインから有効にするか、ホスティングプロバイダーに問い合わせることもできます。


まとめ

LCP スコアを最適化する方法を学ぶことは、ユーザー エクスペリエンスを向上させるだけでなく、SEO の観点からも非常に重要な指標です。 したがって、この記事では、Web コア Web Vitals テストで最高の LCP スコアを引き出すのに役立つ、試行されテストされた最高の LCP 最適化テクニックを紹介しようとします。

LCP スコアを最適化するために適用できる 12 の最良の方法を以下に示します。

  • LCP 要素を理解する
  • 最速の Web ホストにアップグレードする
  • コンテンツ配信ネットワーク (CDN) を使用する
  • 画像の最適化
  • サーバーの応答時間を最適化する
  • レンダリングをブロックする JavaScript と CSS を無効にする (遅延の削除)
  • 重要なリソースのプリロード機能を有効にする
  • ページキャッシュを有効にする
  • CSS、JavaScript、HTML ファイルの縮小を有効にする
  • フォントの読み込みを最適化する
  • 遅延読み込みを使用しないでください
  • サーバーレベルの Gzip または Brotli 圧縮を有効にする

この投稿が LCP スコアの向上に役立つことを願っています。 ただし、追加のヒントや提案がある場合は、下のコメントセクションでお知らせください。