ウェブサイトでのLargest Contentful Paintの改善方法についてお悩みではありませんか?あるいは、Largest Contentful Paintが何を意味するのか、そもそもなぜそれを気にする必要があるのかがわからないでしょうか。
この記事を読めば、Largest Contentful Paintについて知っておくべき基本がすべてわかります。
Largest Contentful Paintの意味、重要性、測定方法、改善方法などを扱います。
以下の目次から、知識レベルに応じて特定のセクションにジャンプしていただいてかまいません。また、最初から全て読み進めることもできます。
LCP/Largest Contentful Paintとは
Largest Contentful Paintは、ウェブページのメインコンテンツが読み込まれるまでの時間を測定するパフォーマンス指標です。
Largest Contentful Paintは、Cumulative Layout Shift (CLS)やFirst Input Delay (FID)と共に、GoogleのCore Web Vitalsメトリクスを構成します。
より技術的に言えば、Largest Contentful Paintは、ページの読み込みを開始してから、最大のテキストブロック、画像、または動画がビューポート内にレンダリングされるまでの時間が測定されます。
続いては、LCPにおける「メインコンテンツ」の正体についてです。
メインコンテンツは実際のページによって異なりますが、以下のいずれかになります。
- テキスト─より具体的には、テキストノードや他のインラインレベルのテキスト要素を含むブロックレベル要素
- 画像─<img>要素内の要素、または<svg>要素内の<image>要素
- 動画─すべての<video>要素(ポスター画像が使用される)
- 背景画像を持つ要素─CSSのurl()関数で読み込まれた場合のみ(CSSのグラデーションには適用されない)
この記事の後半では、サイト上の任意のページについて、Largest Contentful Paint要素を正確に見つける方法をご紹介します。
Largest Contentful PaintとFirst Contentful Paintの違い
よくある質問として、Largest Contentful PaintとFirst Contentful Paintの違いが挙げられます。
この2つの用語は似ていますが、大きな違いがあります。Largest Contentful Paintはページの「メインコンテンツ」が読み込まれるまでの時間を測定するのに対し、First Contentful Paintは「最初のオブジェクト」が読み込まれるまでの時間(それがメインコンテンツであるかどうかにかかわらず)を測定します。
基本的には以下の通りです。
- LCP = メインコンテンツのみ
- FCP = コンテンツの内容にかかわらず、最初のコンテンツ
「メインコンテンツ」要素が最初に読み込まれることは通常ないため、LCPの時間はFCPの時間よりも若干長くなることがほとんどです。
サイトのLargest Contentful Paintが重要である理由
サイトのLargest Contentful Paintが重要な理由は主に2つあります。
- ユーザー体験
- 検索エンジンの最適化
ユーザー体験
サイトのLargest Contentful Paintを気にすべき最大の理由は、これが、サイトのパフォーマンスに関してユーザーの体験を理解する良い指標となるからです。
ほとんどのユーザーは、ウェブサイトがすべてのスクリプトや要素を完全に読み込むまでにかかる時間を気にしません。それよりも、サイトから「価値を手にできる」までの時間を気にします。
Largest Contentful Paintは、メインコンテンツの読み込み時間を見ることで、その「価値創出」の瞬間を測定しようとするものです。
Largest Contentful Paintの読み込み時間が速くなるようにサイトを最適化すれば、少なくともパフォーマンスに関しては、ユーザーに確かな体験を提供できていると思っていいでしょう(使いやすいデザインとユーザビリティも重要です)。
もちろん、だからといって他のパフォーマンス指標を無視するべきではありません。Kinstaは常にサイトのパフォーマンスとボトルネックを総合的に見ることをお勧めしています。そのため、独自のアプリケーションパフォーマンス監視(APM)ツールを開発しました。
Advanced Configurationエンジン最適化(SEO)
検索エンジン最適化の面で言えば、Largest Contentful PaintはGoogleのCore Web Vitalsの一部であり、Googleは2022年のページエクスペリエンスアルゴリズムの更新でSEOランキング要素としてこれを使用し始めました。
つまり、Largest Contentful Paintの数値が高い(時間が長い)と、Googleの検索結果におけるサイトパフォーマンスの足を引っ張ることになります。
コンテンツの質や関連性、被リンクなど、他の要因の方がウェブサイトの順位に大きく影響することに変わりはありませんが、SEOの効果を最大化するためには、Largest Contentful Paintの表示時間を最適化することが重要です。
何がLargest Contentful Paintのスコアに影響を与えるのか
ページのLargest Contentful Paintには、「主に」2種類の問題が影響します。
- サーバーが最初のHTMLドキュメントで応答するのにかかる時間
- 実際のLCPリソースの読み込みにかかる時間
一つ目の問題は、サーバーの応答時間、別名TTFB(time to first byte)です。ユーザーのブラウザがメインコンテンツの読み込みを考える前に、まずサーバーから応答をもらう必要があります。
これに影響を与える一般的な問題をいくつかご紹介します。
- ページキャッシュを使用していない─ページキャッシュを使用していないと、サーバーはHTMLドキュメントで応答する前に、より多くの「作業」を行うことになります。
- サーバーでの遅延─性能の低いサーバーを使用すると、あなたの側でどれだけの努力をしようと、TTFBの遅延は改善できません。
- CDNを使用していない─コンテンツデリバリネットワーク(CDN)では、サイトのオリジンサーバーからのダウンロードを指示する代わりに、グローバルネットワークからページを配信することで、TTFBを短縮(高速化)することができます。
そして、サイトのサーバーが最初のHTMLドキュメントを配信した後は、実際のメインコンテンツ要素を読み込む際に、さらなるボトルネックが発生する可能性があります。
これに影響する一般的な問題をいくつかご紹介します。
- レンダリングをブロックするJavaScriptやCSS(または最適化されていない/不要なコード全般)─ブラウザがメイン要素を読み込む前に、不要なJavaScriptやCSSをダウンロードまたは処理する必要がある場合、LCPの時間が蓄積していきます。
- 最適化されていない画像─LCP要素が画像である場合、最適化されていない画像を使用すると、大きな画像のダウンロードに時間がかかるため、その分読み込みが遅くなります。
- 最適化されていないフォント─LCP要素がテキストの場合、最適化されていない方法でカスタムフォントを読み込むと、テキストが表示されるまでに時間がかかります。
- 圧縮されていないファイル─GzipやBrotliなどの圧縮技術を使用していない場合、ユーザーのブラウザがサイトのファイルをダウンロードするのに時間がかかります。
あなたのサイトによっては、両方の分野でボトルネックが発生しているかもしれませんし、どちらか片方だけかもしれません。これらの問題をすべて解決する方法は、記事の後半でご説明します。
理想的なLargest Contentful Paintの状態
Googleは「良好」なLargest Contentful Paintの時間を2.5秒未満と定義しています。
もしあなたのページのLargest Contentful Paint Timeが2.5秒から4.0秒の間であれば、Googleはそれを「改善が必要」と分類します。また、4.0秒を超える場合、Googleはそれを「悪い」と判断します。
これを視覚的に表した図が以下の通りです。
Largest Contentful Paintを測定する方法(テストツール)
Largest Contentful Paintのパフォーマンスをテストできるツールは数多くあります。
PageSpeed Insights
PageSpeed Insightsは、Largest Contentful Paintを評価するのに有用です。
- ChromeのUXレポート(サイトで十分なトラフィックがある場合)から、実際のユーザーを参照することでサイトのLargest Contentful Paintの時間を見ることができます。
- シミュレーションテストを実行して、サイトのパフォーマンスを確認できます。
- テストに使用した実際のLCP要素が明らかになるため、どの要素を最適化すればよいかを知ることができます。
- Googleによる、LCP時間改善の方法が提案されます。
使い方は以下の通りです。
- PageSpeed Insightsにアクセスする
- テストしたいページのURLを入力
- 「分析」をクリックする
すると「携帯電話」と「デスクトップ」の両方の結果が表示されます。
GoogleがLCPを計算するために使用した主な要素を確認するには、「診断」セクションまでスクロールし「“最大コンテンツの描画”要素」を展開します。
繰り返しますが、LCP要素はそれぞれ異なる可能性があるため、モバイルとデスクトップの両方を確認するようにしてください。
Chromeデベロッパーツール
ChromeデベロッパーツールのパフォーマンスタブまたはLighthouseの監査機能を使って、Largest Contentful Paintを直接テストすることもできます。「パフォーマンス」タブを使用すると、より多くの情報が得られるため、これの使用をお勧めします。
手順は次のとおりです。
- テストしたいページを開く
- Chromeデベロッパーツールを開く
- 「パフォーマンス」タブを開く
- 「Web Vitals」ボックスがチェックされていることを確認
- 再読み込み(下の画像参照)ボタンをクリック
サイトの分析結果が表示されます。
「ネットワーク」タブの「LCP」にカーソルを合わせると、時間が表示されます。
「タイミング」タブでLCPにカーソルを合わせると、実際のLCP要素が表示されます。
Google Search Console
Google Search Consoleでは、個々のページのLargest Contentful Paintをテストすることはできませんが、サイト全体のパフォーマンスを評価するのにとても便利です。
サイト内の各ページでLCPの時間は異なるため、ホームページだけをテストして終わりというわけにはいきません。
Google Search Consoleを使えば、サイト上の各ページがGoogleの「良好」「改善が必要」「悪い」のどのカテゴリに分類されるかを確認することができます。パフォーマンスデータは Chrome UX レポートから得られるため、実際のユーザーデータに基づいています。
まだの場合は、まずGoogle Search Consoleでサイトの所有権を確認する必要があります。
それが済んだら、LCPレポートにアクセスする方法は以下の通りです。
- あなたのサイトのGoogle Search Consoleを開きます。
- 「エクスペリエンス」タブの下にある「ウェブに関する主な指標」に移動します。
- 「モバイル」または「PC」チャートの横にある「レポートを開く」をクリックします。
- 「URLが良質と見なされない理由」のセクションで問題を探します。問題をクリックすると、問題を引き起こしているURLの詳細情報を見ることができます。
*データがそれぞれ異なる可能性があるため、PCとモバイルの両方の結果を確認してください。
ウェブページテスト
WebPageTestを使って、パフォーマンステストのシミュレーションを実行することもできます。
PageSpeed Insightsとは異なり、WebPageTestでは、テストの場所、接続速度、デバイスなど、さまざまな指標を指定することができます。この点で、このツールには独自の強みがあります。これを使うことで、細かな設定でテストを調整可能です。
テストの実行方法は以下の通りです。
- WebPageTestにアクセスする
- テストしたいページのURLを追加する
- 「Advanced Configuration」を展開して設定を行う
結果ページでは、LCPデータとその他のパフォーマンス指標(ウォーターフォール分析を含む)が表示されます。
Largest Contentful Paint要素を見つける方法
Largest Contentful Paintの改善の際には、GoogleがLCPの計算に使用している要素を正確に知ることが重要です。
例えば、GoogleがホームページのLCP要素としてヒーロー画像(画面上部に配置される大きな画像)を使用していることが分かっている場合、ホームページのLCP時間を改善したいのであれば、そのヒーロー画像をできるだけ早く提供する方法を見つける必要があります。
先に述べたように、PageSpeed InsightsまたはChromeデベロッパーツールを使用してLargest Contentful Paint要素を見つけることができます。
デバイスによってLCP要素が異なる場合がありますので、必ずモバイルとPCの両方の結果を確認してください。
WordPress(または他のプラットフォーム)でLargest Contentful Paintを改善する方法
さて、Largest Contentful Paintについてご理解いただけたところで、WordPressでLargest Contentful Paintを改善する実用的なヒントをいくつかご紹介しましょう。
このヒントはWordPressに焦点を当てますが、すべてのヒントは普遍的なものであり、他のタイプのウェブサイトにも適用できます。
サーバー応答時間を改善するためにキャッシュを設定する
キャッシュは、完成したHTMLドキュメントを訪問者のブラウザに配信する前にサーバーが行う必要のある処理作業を削減するものです。これにより、サーバーの応答時間を改善することができます。
KinstaでWordPressサイトをホスティングしている場合、Kinstaが自動で最適化の施されたキャッシュを実装するので、キャッシュの設定について心配する必要はありません。
他の場所でホストしている場合には、WP Super Cacheのような無料のプラグインまたはWP Rocketのような有料のプラグインを使用して、サイトのキャッシュを有効にすることができます。
その他の選択肢については、おすすめのWordPressキャッシュプラグインをご覧ください。
高速WordPressホスティングに切り替える
ここでご紹介している戦略はすべてLCPの改善に役立つものですが、もっと根本的な解決策もあります。
低速で最適化されていないWordPressホスティングを使用すると、LCPの時間は常にホストの質によって制限されます。
少しは改善できるかもしれませんが、ホスト(つまりサーバー)が遅いとLCPの時間が2.5秒を切るのは難しいでしょう。
Largest Contentful Paintの時間を改善する最も簡単な方法をお望みなら、サイトをKinstaに移行することができます。Kinstaはパフォーマンスの面で最適化されたホスティングインフラストラクチャを提供するだけでなく、他の多くの最適化を処理する機能も組み込まれています。
つまり、Largest Contentful Paintの時間を最適化することに煩わされることなく、サイトの成長に集中することができます。
ご興味があれば、是非ともご確認ください。Kinstaはどのホストからでも数に制限無くウェブサイトを無料で移行可能です。
以下では、さらにヒントをご紹介します。しかし、ここにあるすべてを実行してもまだ問題が解決しない場合には、サーバーの乗り換えが必要になるかもしれません。
コンテンツデリバリネットワーク(CDN)を利用する
CDNがないと、サイトの訪問者はすべて、ページのHTMLと静的アセットをホスティングサーバーからダウンロードすることになります。
訪問者があなたのサーバーの近くにいる場合、通常問題にはなりません。しかし、訪問者が世界中に散らばっている場合、訪問者とあなたのサイトのサーバーの間に物理的な距離があるため、サイトの速度が遅くなる可能性があります。
CDNを使えば、サイトの静的アセット(またはサイトの完成したHTMLページ)をCDNのグローバルネットワークから配信することができます。これにより、訪問者はCDNの最も近い場所からファイルをダウンロードすることができ、読み込みがより速くなります。
Kinstaのホスティングをご利用であれば、Kinsta標準搭載のエッジキャッシュ機能のご使用を強くお勧めします。
Kinstaのエッジキャッシュは、サイトの完全なHTMLページと静的アセットをCloudflareのグローバルネットワークにキャッシュするものです。(ほとんどのCDNソリューションとは違い、静的アセットをキャッシュするだけではありません)。
これにより、サイト訪問者は最も近いエッジロケーションから完全なページをダウンロードでき、サーバーの応答時間とLCPリソースの読み込みにかかる時間の両方を削減できます。
Kinstaのエッジキャッシュを有効にするには、MyKinstaのサイトのダッシュボードの「エッジキャッシュ」タブに移動します。
他の場所でホスティングしている場合には、KeyCDN、Bunny、などの一般的なCDNサービスを使用して、サイトの静的アセット用にCDNを設定できます。
レンダリングをブロックするJavaScriptを避ける(遅延または削除)
レンダリングをブロックするJavaScriptとは、メインのLCP要素の前に読み込まれるJavaScriptのことです。
LCP要素の読み込みを遅らせる原因になります。
これを解決するには、いくつかの方法があります。
- 可能であれば、不要なJavaScriptを削除する
- JavaScriptを遅延させ、サイトのメイン要素の読み込みを妨げないようにする
- ユーザーがサイトと対話するまでJavaScriptを遅延させる
ほとんどの人にとって、この機能を実装する最も簡単な方法は、AutoptimizeやWP Rocketのようなプラグインを使用することです。
この方法の詳細は、以下の2つの記事をご覧ください。
レンダリングをブロックするCSSの回避とCSS配信の最適化
最適化されていないJavaScriptがサイトの速度を低下させるのと同様に、最適化されていないCSSも同じことを引き起こします。
基本的に、CSSの読み込みはできるだけ少なくしたいものです。そして、読み込む必要のあるCSSは、最適な方法で読み込みたいものです。一般的には、重要なCSSは早い段階で読み込み、重要でないCSSは読み込みの後半まで遅らせることができます。
技術面での不安があれば、簡単な方法として、Perfmatters、WP Rocket、FlyingPressなどのパフォーマンス最適化プラグインを使用可能です。
例えば、WP Rocketには、ページごとに未使用のCSSを削除し、最適な方法でCSSを配信する機能が組み込まれています。
もっと詳しく知りたい方は、CSSの最適化方法をご覧ください。
HTML、CSS、JavaScriptを圧縮する
上記のコード最適化のヒントに加えて、サイトのHTML、CSS、JavaScriptを圧縮することもおすすめします。圧縮することで、サイトのコードから不要な文字や空白を取り除き、サイズを縮小することができます。
Autoptimizeのような無料のプラグインを使用してコードを圧縮するか、Perfmatters、WP Rocket、FlyingPressのような包括的な有料プラグインを使用して実行可能です。
または、こちらのコード圧縮についての記事をご覧ください。この説明ではJavaScriptに焦点を当てていますが、同じ方法やプラグインを使って他のコードも圧縮することができます。
サーバーレベルでの圧縮(GzipまたはBrotli)を使用する
サーバーレベルの圧縮では、GzipやBrotliなどの技術を使ってサイトのファイルサイズを抑えることができます。
例えば、Kinstaの例を挙げると、Kinstaのホームページのファイルサイズ「85.82%縮小」に成功しています。
KinstaのWordPressサイトホスティングでは、すべてのサイトで自動的にBrotli圧縮が有効になります。
他のホストやサーバーをご使用中であれば、GiftOfSpeedの無料ツールを使用して、あなたのサイトでGzipまたはBrotliが有効になっているかどうかを確認することをおすすめします。
あなたのサイトが圧縮を使用していない場合は、Gzip圧縮を有効にする方法をご覧ください。
サイトのコンテンツ配信にCloudflareを使用している場合、CloudflareにもBrotli圧縮を有効にする設定が組み込まれています。
- Cloudflareのダッシュボードでサイトを開く
- サイドバーメニューの「Speed」>「Optimization」に進む
- 「Brotli」のトグルを有効にする
画像の圧縮とサイズ変更
LCP要素が画像である場合、その画像ファイルのサイズを小さくすることで、サイト訪問者のブラウザが画像をダウンロードする時間を短縮できます(したがって、LCPの時間を短縮できます)。
画像のサイズを小さくするには、画像を実際に使用するサイズにリサイズし、非可逆圧縮または可逆圧縮を使用して圧縮し、WebPなどの最適化された形式で提供する必要があります。
ちなみにこれは、一般的なパフォーマンス最適化のベストプラクティスであり、Largest Contentful Paintに限ったことではありません。
より包括的な内容については、ウェブサイトの画像最適化に関するこちらの記事をご覧ください。
また、Kinstaにはサードパーティツールを使用せずにサイトの画像を自動で最適化する機能が組み込まれているため、心配ご無用です。
この機能を有効にする方法は以下の通りです。
- MyKinstaでサイトのダッシュボードを開く
- 「CDN」タブに移動
- 「画像最適化」の隣にある「設定」をクリック
- お好みの画像最適化レベルを選択し、設定を保存(「非可逆」を使用すると、画質に若干の影響があるかもしれませんが、速度が最も向上します)
Largest Contentful Paint画像をプリロードする
LCP要素が画像である場合、LCP改善のもう1つの戦略として、Largest Contentful Paint画像をプリロードすることができます。PageSpeed Insightsで 「Preload Largest Contentful Paint image」のような推奨が表示されるのはこのためです。
プリロードを使用すると、サイトのLCP要素である特定の画像など、特定のリソースを優先的にダウンロードするように、サイト訪問者のブラウザに指示することができます。
LCP画像をプリロードする方法はいくつかあります。技術的な知識を必要としないものとして、専用のPreload Critical Images機能があるPerfmattersのようなプラグインを使用することができます。プリロードする画像の数を指定するだけでOKです。あまり多くのアセットをプリロードすると悪影響が出る可能性があるため、まずは1つから始めることをお勧めします。
WordPress.orgには、WPZOOMのPreload Featured Imagesや、FlyingPress等、これを実現する無料プラグインが他にもあります。
遅延読み込みの問題をチェック
PageSpeed Insightsの「Preload Largest Contentful Paint image」メッセージを引き起こすもう一つの可能性として、WordPressサイトでの画像の遅延読み込みの問題が考えられます。
これはまた、PageSpeed Insightsの「Largest Contentful Paint画像が遅延読み込みされました」という旨の警告の原因になることもあります。
遅延読み込みは、特定のリソース(画像など)の読み込みを待機する仕様を指します。ことにより、サイトの最初の読み込み時間を短縮することができます。
通常は優れた機能ですが、サイトでLCP要素である画像を遅延読み込みすると、LCP時間が長引いてしまいます。このため、初期ビューポートに表示されている画像については遅延読み込みしないように注意が必要です。
WordPress 5.5で導入されたネイティブブラウザ遅延読み込み機能を使用している場合、WordPress5.9の時点ですでに、自動的に最初のコンテンツ内画像が除外されるため、この問題は発生しないはずです。
最初の画像以外も除外したい場合には、wp_omit_loading_attr_threshold関数を使うこともできます(通常は必要ありません)。
一方で、JavaScriptを使った遅延読み込みプラグインを使っている場合には、プラグインの設定でこの除外を手動で設定する必要があるかもしれません。たとえばPerfmattersプラグインには、最初の特定の数の画像を遅延読み込みから除外するオプションがあります。
遅延読み込みプラグインでこのような除外設定ができない場合は、別のプラグインに切り替えるのも手でしょう。
例えば、WP Rocketを使用すると、LCPを含むAbove the foldの画像がレイジーローディング(遅延読み込み)から自動的に除外されるため、自分で設定する手間を省くことができます。有効化するとデフォルトですぐに最適化が行われます。
Font-Displayでフォント読み込みを最適化する(任意)
LCP要素がテキストの場合、サイトのフォント読み込み処理によってテキストの表示が遅れる可能性があります。
通常、これはカスタムフォントを使用している場合に発生します。カスタムフォントが読み込まれるまでテキストのレンダリングを待機するようにサイトが設定されている場合、カスタムフォントファイルの読み込みに時間がかかり、動作が遅くなる可能性があります。
これを解決するには、Font-Display: optionalというCSS記述子を使用することができます。
これは、カスタムフォントが小さなウィンドウ(通常は約100ミリ秒以下)内で読み込まれなかった場合に、フォールバックフォントを使用するようにブラウザに指示するものです。
平たく言えば、こうなります。基本的にはブラウザがカスタムフォントを読み込むチャンスが与えられます。しかし、カスタムフォントが十分に速く読み込まれない場合には、フォールバックシステムフォントを使用することで、それ以上コンテンツの遅れがないようにします。
あるいは、font-display: swapを使うこともできます。フォールバックフォントをすぐに読み込み、カスタムフォントが読み込まれたら、カスタムフォントを「スワップ」するという手法です。ただし、この方法では、フォントのサイズが異なる場合、累積レイアウトシフトの問題が発生する可能性があるため、注意が必要です。
カスタムフォントがウェブサイトのデザインに絶対に必要でない限り、Core Web Vitalsの観点からは、通常、font-display: optionalを使用するのが推奨されます。
CSSを調整することに抵抗がなければ、子テーマのスタイルシートでfont-displayプロパティを編集することができます。
CSSを使いたくない場合には、プラグインも利用可能です。
- Asset CleanUp─Google Fontsを無料でサポートし、Proバージョンではカスタムローカルフォントをサポート
- Perfmatters─Google Fonts用の機能あり
Elementorを使用してサイトをデザインしている場合、Elementorには、Elementorで作成したページにこれを使用できるようにする組み込みオプションも含まれています。
- 「Elementor」>「Settings」に進む
- 「Advanced」タブを開く
- 「Google Fonts Load」ドロップダウンを「Optional」に設定する
まとめ
Largest Contentful Paintを改善する方法を学ぶことは、サイトのユーザーエクスペリエンスを向上させ、検索エンジンのランキングを最大化するために重要です。
Largest Contentful Paintの改善には、サーバーのレスポンスタイムを高速化する方法と、LCP要素をできるだけ早くレンダリングするためにサイトのコードを最適化する方法の2つがあります。
サーバーのレスポンスタイムの遅さを解消するには、WordPressサイトをKinstaに移行するのがおすすめです。Kinstaのパフォーマンス面で最適化の施されたアーキテクチャが、サイトの配信高速化を支援します。
さらに、Kinstaのエッジキャッシュ機能により、サイトのページをCloudflareのグローバルネットワークにキャッシュし、世界中の訪問者に素早く応答(その結果、LCP時間を改善)することができます。
さらに詳しい情報については、KinstaのWordPress専用マネージドホスティングまたはWooCommerceホスティングをご覧ください。
LCPパフォーマンスの最適化についてプロのサポートをお求めであれば、代行業者ディレクトリをご確認ください。
コメントを残す