WordPressで最大のコンテンツペイント（LCP）を改善する方法

公開: 2022-06-24

Webサイトのユーザーエクスペリエンス（UX）を測定することは、難しい課題になる可能性があります。しかし、それはグーグルがコアウェブバイタルメトリクスでやろうとしていることです。また、Googleは検索エンジンのランキングを決定する際にユーザーエクスペリエンスを重視するため、これらを適切にスコアリングすることが重要です。

Core Web Vitalsの一部であるいくつかのメトリックがあり、それらは少し威圧的に聞こえるかもしれません。良いニュースは、スコアと改善方法を理解しやすくするツールがいくつかあることです。

この記事では、1つの特定のメトリックであるLargest Contentful Paint（LCP）について説明します。これは、画面に表示される最大の要素をWebサイトがロードするのにかかる時間を測定します。

それがユーザーエクスペリエンスにどのように影響するか、およびLCPスコアが低くなる原因について説明します。次に、それを改善する方法を示します。

最大のコンテンツフルペイント（LCP）とは何ですか？

LCPは、ページ上の最大の要素が読み込まれるまでにかかる時間を測定する指標です。ほとんどのページでは、最大の要素は画面上部の大きな画像またはヒーローセクションです。

LCPスコア自体は、サイトが視覚要素をロードする速度を理解するのに役立ちます。ページは、このメトリックに影響を与えることなく、バックグラウンドでスクリプトをロードし続けることができます。一言で言えば、LCPスコアは特定のページのメディアとテキストにのみ関連しています。

LCPは、GoogleがページのUXを測定するために使用する3つのコアWebバイタルの1つです。他の2つは次のとおりです。

First Input Delay（FID）： FIDは、訪問者が最初のアクション（リンクのクリックなど）を実行してからサイトが応答するまでにかかる時間を測定します。
累積レイアウトシフト（CLS）：このメトリックは、読み込み時にサイトがシフトする度合いを効果的に測定します。テキストが最初に表示される場合がありますが、画像が読み込まれると画面を下にジャンプして、訪問者が場所を失う原因になります。

経験則として、3つのCoreWebVitalsスコアすべてをできるだけ低くする必要があります。スコアが低いということは、ページがすばやくスムーズに読み込まれることを意味します。

数字の観点から、GoogleがCore Web Vitalのスコアが良い、許容できる、悪いと見なしているものは次のとおりです。

ページの読み込み時間を測定することは、WebサイトのコアWebバイタルをチェックすることと同じではないことに注意してください。サイトの読み込みは比較的速いかもしれませんが、CLSまたはFIDスコアが低い可能性があります。理想的には、全体的な読み込み時間とCore Web Vitalsの両方を測定して、サイトのパフォーマンスを正確に評価します。

LCPはWordPressサイトのユーザーエクスペリエンスにどのように影響しますか？

満足のいくペイントスコアの最大値が低いということは、ページの読み込みに時間がかかりすぎる可能性があることを意味します。コアWebバイタルをページごとに測定する必要があることに注意してください。 1つのページのLCPスコアが低い場合もあれば、他のページは問題ない場合もあります。

ただし、結果はサイト全体に実装される最適化手法に関連付けられることが多いため、通常、サイトではLCPスコアに傾向が見られます。ベストプラクティスに関係なくサイトが作成された場合、すべてのページのスコアが低くなる可能性があります。サイトが注意深く最適化されている場合、ほとんどのページは通常かなり良いスコアになります。思いやりのある開発者は、平均を下回るスコアのページを特定し、そのページのパフォーマンスを向上させるために特定の調整を行います。

全体として、LCPスコアが低いということは、訪問者がページが視覚的に完全に読み込まれるまで長時間待たなければならない可能性があり、訪問者は待つことを好まないことを意味します。ページの読み込みに2、3秒以上かかる場合は、多くの訪問者を振り返り始めることができます。

CoreWebVitalsがGoogleのランキング要素であることも注目に値します。 LCPスコアが低いと、検索エンジンの結果ページ（SERP）のランキングが下がる可能性があります。つまり、オーガニックトラフィックが少なくなります。

LCPスコアの測定方法

LCPスコアの測定に使用できるツールがいくつかあります。最も単純なものはPageSpeedInsightsです。このサービスを使用すると、任意のページのURLを入力して、全体的なパフォーマンスに関する完全なレポートを数秒で取得できます。

URLを入力して[分析]をクリックすると、PageSpeed Insightsはそのページの2つのレポートを生成します。1つはモバイル用、もう1つはデスクトップパフォーマンス用です。レポートの上部に、LCPを含むCoreWebVitalsのスコアが表示されます。

下にスクロールすると、レポートにはWebサイトのパフォーマンスが向上する可能性も表示されます。提案された改善ごとに、PageSpeed Insightsは、節約できる読み込み時間の見積もりを提供します。

Google Search Consoleを使用すると、プラットフォームを離れることなくPageSpeedInsightsレポートにアクセスできます。また、Site Kitなどの一部のWordPressプラグインを使用すると、ダッシュボード内にCoreWebVitalsスコアを表示できます。

LCPスコアが低くなる原因は何ですか？

LCPスコアが低く、読み込み時間が長い場合、多くの潜在的な原因があります。通常、それはあなたのサーバーの問題またはあなたのウェブサイトの最適化の欠如に帰着します。それぞれの考えられる原因を調べてみましょう。

サーバーの応答時間が遅い。 ウェブホストがサーバーレベルで優れたパフォーマンスを提供しない場合、LCPスコアを下げるためにできることはほとんどありません。サーバーの応答時間が遅いということは、サイトが適切に最適化されていても、訪問者を長時間待つことを意味します。この場合、別のWordPressホスティングプロバイダーへの切り替えを検討することをお勧めします。
レンダリングをブロックするJavaScriptとCSS。 場合によっては、JavaScriptおよびCSSスクリプトにより、ページ上の他のアセットがロードが完了するまでレンダリングされないことがあります。これは「レンダリングブロッキング」と呼ばれ、全体的な読み込み時間が長くなる可能性があります。
重いファイルと画像。 ファイルサイズの大きい画像を使用する場合、読み込みに時間がかかる場合があります。理想的には、サイトにアップロードする画像を圧縮して最適化する必要があります。
ブラウザのキャッシュを活用していません。 ブラウザのキャッシュにより、サイトの静的コンテンツのコピーが訪問者のブラウザに保存され、将来の訪問のための読み込み時間が短縮されます。ブラウザのキャッシュを利用していない場合、ユーザーは立ち寄るたびにページを完全にリロードする必要があります。
GZIP圧縮を使用していません。 これは、サーバーレベルでHTTPリクエストとファイルを圧縮するソフトウェアアプリケーションです。ほとんどの評判の良いウェブホストは、箱から出してすぐにGZIP圧縮を提供する必要があります。

WordPressで最大のコンテンツペイントを改善する方法

WordPress WebサイトのLCPスコアを下げ、全体的なパフォーマンスを向上させる方法はいくつかあります。最も効果的な方法を見てみましょう。

1.WordPressのコアWebバイタルを改善するために設計されたプラグインを使用する

CoreWebVitalsスコアの向上に役立つように設計されたプラグインがいくつかあります。最も強力なソリューションの1つは、JetpackBoostです。

Jetpack Boostは、対応する設定を切り替えるだけで、複数のパフォーマンスの最適化を実装するのに役立ちます。レンダリングをブロックするJavaScriptを延期し、遅延読み込みを有効にして、Webサイト内のCSSコードを最適化できます。

Jetpack Boostを使用すると、LCPスコアが向上しますが、他のパフォーマンスの最適化を回避する必要があるという意味ではありません。プラグインを有効にした後、コアWebバイタルをさらに改善するために他の戦略も実装することをお勧めします。

2.WebサイトのCSSを縮小します

コードを操作するときは、他の人が理解しやすい方法でコードをフォーマットすることをお勧めします。これは、スペースを使用し、コードを複数行に広げ、読みやすいように構造化することを意味します。

このアプローチの問題は、すべてのスペースと文字が追加のディスクスペースを占有することです。数行のコードについて話しているだけであれば、それほど大きな影響はありません。ただし、それぞれが数百行のコードを含む数十または数百のCSSファイルを処理している場合、これらのスクリプトはWebサイトの読み込み時間とLCPスコアに影響を与える可能性があります。

CSSの影響を最小限に抑える1つの方法は、コードを「縮小」することです。これには、ファイルサイズを小さくするために、不要な文字と空白を削除することが含まれます。それがどのように機能するかを確認するために、いくつかのdiv要素をスタイリングするためのCSSコードの例を次に示します。

 div{ border: 3px solid currentColor; } #div1{ color: green; } #div2{ color: blue; }

さて、あなたがそれを縮小した後、そのコードがどのように見えるかは次のとおりです。

 div{border:3px solid currentColor}#div1{color:green}#div2{color:#00f}

使用する縮小ツールによっては、値が最適化された代替ツールに置き換えられる場合もあります。コードを手動でフォーマットするには時間がかかりすぎてエラーが発生する可能性があるため、ミニファイツールについて説明します。

ToptalのCSSミニファイアなどのオプションを含め、Web上で使用できる無料のミニファイツールがたくさんあります。

Webサイトのコードを最適化するために使用できるWordPressミニファイプラグインもあります。これらのプラグインのほとんどは、CSSを縮小するだけでなく、レンダリングをブロックするJavaScriptやCSSを延期するなどの他の機能も含んでいます。それが何を意味するかについては、次のセクションで説明します。

3.レンダリングを延期する-JavaScriptとCSSをブロックする

Webサイトにアクセスすると、ロード時間を可能な限り短縮する方法でリソースがロードされない場合があります。場合によっては、JavaScriptファイルにより、ブラウザが他の要素のレンダリングを続行する前に、それらのスクリプトの読み込みが完了するまで待機することがあります。

そのレンダリングブロックコードは、ページのLCPスコアを増加させます。この問題に対処するには、次の2つの方法があります。

レンダリングブロックスクリプトを削除します。
他の要素の読み込みが完了するまで、レンダリングブロックスクリプトを延期します。

2番目のオプションは、Webサイトが重要な機能に必要なコードを処理する場合に理想的です。必要なスクリプトを延期することで、ページの視覚的なレンダリングが終了し、コードがバックグラウンドで読み込まれます。ユーザーに関する限り、すべてがより高速にロードされます。

どのスクリプトがレンダリングをブロックするかを理解する最も簡単な方法は、PageSpeedInsightsを使用することです。すべてのPageSpeedInsightsレポートには、推奨されるパフォーマンスの調整をカバーするセクションが含まれています。

テストを実行した後、[レンダリングをブロックするリソースを削除する]というタブの下を確認します。内部には、レンダリングをブロックするJavaScriptおよびCSSスクリプトのリストが表示されます。このセクションでは、それぞれを延期することで短縮できるロード時間の見積もりも示します。

コードの編集を気にしない場合は、web.devツールを使用できます。または、もう一度Jetpack Boostを使用して、レンダリングブロックスクリプトを延期することもできます。コアWebバイタルを一度に改善する複数の要素を処理します。

レンダリングブロックスクリプトを延期し、それらを縮小するスタンドアロンプラグインもいくつかあります。これらには以下が含まれます：

Autoptimize ：レンダリングをブロックするJavaScriptとCSSを延期し、Webサイトの画像の遅延読み込みを有効にすることができます。
Fast Velocity Minify ：このプラグインは、Webサイト上のJavaScriptファイルとCSSファイルを延期、縮小、および組み合わせることができます。
Hummingbird ：このWPMU DEVプラグインを使用すると、ブラウザーのキャッシュを活用し、レンダリングブロックスクリプトを延期し、JavaScriptとCSSを縮小できます。

Webサイトのコードを縮小できるプラグインを扱う場合は、アクティブ化する前にWordPressサイトを完全にバックアップすることをお勧めします。そうすれば、縮小プロセスによってWebサイト内のコア機能が壊れた場合でも、データを失うことなく以前のバージョンに戻すことができます。

4.サイトの画像を最適化します

WordPressのLCPスコアが低い主な原因の1つは、大きな画像ファイルです。高解像度の画像は見た目は素晴らしいですが、多くのストレージスペースを占有します。非圧縮ファイルを処理していて、1つのページに複数の画像がある場合、読み込み時間がすぐに制御不能になる可能性があります。

この問題を解決する最善の方法は、画像を最適化することです。これは、WordPressにアップロードする前または後に行うことができます。

画像の最適化とは、画像を圧縮することを意味します。使用する圧縮ツールによっては、このプロセスによる画質への影響は最小限に抑えられますが、ファイルサイズと全体的な読み込み時間を大幅に短縮できます。

WordPressにアップロードする前に画像を最適化したい場合は、TinyPNGなどの無料のオンラインツールを使用できます。

TinyPNGを使用すると、JPGおよびPNGファイルを手動でアップロードして最適化できます。このサービスは、画像を圧縮してから、コンピューターにダウンロードできるようにします。その後、圧縮された画像をWordPressにアップロードすることができます。

Jetpack CDNは、WordPressで直接画像を最適化するための優れたオプションです。また、モバイルデバイス用に画像のサイズを自動的に変更し、サイト全体を高速化します。 CDNのメリットと言えば…

5.コンテンツ配信ネットワーク（CDN）を使用する

CDNは、戦略的地域に分散したデータセンターへのアクセスを提供するサービスです。これらのデータセンターは、Webサイトのキャッシュされたコピーを保存し、Webサイトにアクセスしたい人の接続を傍受します。

CDNは、これらの接続を各訪問者に最も近いデータセンターに自動的にルーティングします。サイトコンテンツの移動距離が短いため、ページの読み込みが速くなります。

さらに、CDNは、リクエストを可能な限り迅速に処理するように設計されています。これは、通常、ホスティングプロバイダーが実行するサーバーよりもはるかに高速にコンテンツをロードすることを意味します。

Cloudflareのようなサービスは、サイトのページのいくつかをキャッシュできる限定された無料のCDNプランを提供します。一部のマネージドWordPressWebホストは、組み込みのCDN統合を提供するため、個別のサービスに料金を支払う必要はありません。ただし、Jetpackを使用している場合は、無料のWordPress固有のCDNにもアクセスできます。これを使用して、画像やWebサイトファイルを高速化できます。

WordPressの最大のコンテンツフルペイントに関するよくある質問

LCPスコアを測定および最適化する方法についてまだ質問がある場合は、このセクションで回答します。

WordPressサイトのLCPスコアを測定するにはどうすればよいですか？

LCPスコアはCoreWebVitalsメトリックの一部であるため、Googleツールを使用して測定する必要があります。 Googleは、LCPスコアを測定する3つの方法を提供しています。

PageSpeed Insights ：このオンラインサービスを使用して、任意のページのコアWebバイタルをオンデマンドで測定できます。ページを分析すると、PageSpeedInsightsはパフォーマンスと全体的なUXを改善するための提案も返します。
Google検索コンソール：このサービスを使用すると、ウェブサイトの検索エンジン最適化（SEO）と全体的な状態を監視できます。 Google Search Consoleには、PageSpeedInsightsの推奨事項とスコアも組み込まれています。
灯台：このChrome拡張機能を使用すると、ブラウザの開発ツールを使用するときに高度な機能にアクセスできます。

Googleは、WordPress内からいくつかのサービスにアクセスするために使用できるSiteKitと呼ばれる公式プラグインも提供しています。 Site Kitを使用すると、ダッシュボードを離れることなく、LCPスコアを含むPageSpeedInsightsレポートにアクセスできます。

良いLCPスコアとは何ですか？

グーグルによると、2.5秒未満のものは良いLCPスコアです。あなたのウェブサイトがその基準を満たしているとしても、それはあなたがそれをさらに最適化するべきではないという意味ではありません。

理想的には、Webサイトの読み込み時間を可能な限り短縮する必要があります。全体的な読み込み時間を1秒または2秒未満にすることができれば、はるかに優れたユーザーエクスペリエンスを提供できます。

WordPressでLCPスコアを簡単に最適化するにはどうすればよいですか？

WordPressでLCPスコアを最適化する最も簡単で迅速な方法は、JetpackBoostをインストールすることです。このプラグインは、FirstInputDelayやCumulativeLayoutShiftなどの他のCoreWebVitalsスコアの向上にも役立ちます。

まず、サイトにJetpackBoostをインストールしてアクティブ化します。

次に、ダッシュボードでJetpack→Boostに移動します。ここでは、CSSの読み込みを最適化し、必須ではないJavaScriptを延期し、遅延画像の読み込みをアクティブにするためのオプションが表示されます。 3つのオプションすべてを有効にすることをお勧めします。

遅延読み込みを有効にすることは、WebサイトのLCPスコアを向上させるための優れた方法です。 WordPressには、バージョン5.5の時点で組み込み機能として遅延読み込みが含まれていますが、最適化する画像の設定を手動で有効にする必要があります。

Jetpack Boostを使用すると、Webサイト上のすべての画像の遅延読み込みを一度に有効にできます。すべてのページで最大の要素を延期することで、LCPスコアがすぐに向上するはずです。

あなたのウェブサイトのコアウェブバイタルを改善する

WebサイトのCoreWebVitalsを改善すると、ユーザーエクスペリエンスを向上させることができます。特にLCPスコアは、訪問者がサイトのパフォーマンスにどれだけ満足しているかに大きく影響します。スコアが低いということは、Webサイトの読み込みが速いことを意味し、Webサイトの読み込みが速いということは、イライラする訪問者が少ないことを意味します。

WordPressでLCPスコアを改善するために使用できる最も効果的な方法を要約してみましょう。

CoreWebVitalsの改善に役立つように設計されたプラグインを使用してください。
CSSを縮小します。
レンダリングブロックJavaScriptとCSSを延期します。
ウェブサイトの画像を最適化します。
コンテンツ配信ネットワークを使用します。

Jetpack Boostを使用すると、LCPスコアを含め、WebサイトのコアWebバイタルをすばやく最適化できます。 Jetpack Boostを使用すると、対応する設定を切り替えるだけで、複数のパフォーマンスの最適化を実装できます。さらに、無料で、他のJetpackファミリーのツールとシームレスに連携します。