最大のコンテンツ ペイントを最適化して Google で上位にランクする方法

ウェブサイトの最大のコンテンツ ペイントを測定する方法

無料のウェブサイト速度テストを実行して確認してください。 LCP 速度がすぐに表示されます。

速度テストの結果から、次のことがわかります。

• LCP しきい値が満たされています。
• 他の Core Web Vital を最適化する必要があります。

最大のコンテンツ ペイントはどのように計算されますか?

Google はエクスペリエンスの 75 パーセンタイルに注目しています。これは、実際の Web サイト訪問者の 25% が 3.09 秒以上の LCP 読み込み時間を経験しているのに対し、75% のユーザーの LCP は 3.09 秒未満であることを意味します。

この例では、実ユーザーの LCP は 3.09 秒と表示されています。

Core Web Vitals データのラボ テスト結果は?

この特定の Web 速度テストでは、制御されたテスト環境で収集されたラボ メトリックも表示されます。 これらの指標は Google のランキングに直接影響しませんが、このデータには次の 2 つの利点があります。

1. ウェブサイトを改善するとすぐに指標が更新されますが、Google のリアルタイム データが完全に更新されるまでには 28 日かかります。
2. 指標に加えて詳細なレポートが得られるため、Web サイトの最適化に役立ちます。

さらに、PageSpeed Insights はラボ データも提供しますが、低速のネットワーク接続をエミュレートするためにシミュレートされたスロットリングが使用されるため、レポートされるデータが誤解を招く可能性があることに注意してください。

最大のコンテンツ ペイント要素をどのように見つけますか?

DebugBear でページ速度テストを実行すると、テスト結果で LCP 要素が強調表示されます。

LCP 要素が大きな画像である場合もあれば、テキストの大部分である場合もあります。

LCP 要素が画像であるかテキストであるかに関係なく、ページのレンダリングが開始されるまで、LCP コンテンツは表示されません。

たとえば、下のページでは、背景画像が最大のペイントを担当しています。

対照的に、このページの LCP はテキストの段落です。

Web サイトの Largest Contentful Paint (LCP) を改善するには、LCP を担当する HTML 要素がすばやく表示されるようにする必要があります。

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

LCP を改善するには、次のことを行う必要があります。

1. LCP 要素を表示するために必要なリソースを見つけます。
2. これらのリソースをより高速にロードする方法 (またはまったくロードしない方法) をご覧ください。

たとえば、LCP 要素が写真の場合、画像のファイル サイズを小さくすることができます。

DebugBear 速度テストを実行した後、各パフォーマンス メトリックをクリックして、最適化方法に関する詳細情報を表示できます。

LCP に影響を与える一般的なリソースは次のとおりです。

• レンダリング ブロック リソース。
• 最適化されていない画像。
• 古い画像形式。
• 最適化されていないフォント。

レンダリングをブロックするリソースを減らす方法

レンダリング ブロック リソースは、ブラウザが画面上でページ コンテンツの描画を開始する前にダウンロードする必要があるファイルです。 CSS スタイルシートは通常、多くのスクリプト タグと同様に、レンダリングをブロックします。

レンダリングをブロックするリソースのパフォーマンスへの影響を軽減するには、次のことができます。

1. レンダリングをブロックしているリソースを特定します。
2. リソースが必要かどうかを確認します。
3. リソースがレンダリングをブロックする必要があるかどうかを確認します。
4. たとえば、圧縮を使用して、リソースをより迅速にロードできるかどうかを確認します。

簡単な方法: DebugBear リクエスト ウォーターフォールでは、レンダリングをブロックするリソースのリクエストは「Blocking」タグでマークされます。

LCP 画像リクエストに優先順位を付けて高速化する方法

このセクションでは、画像の新しい「fetchpriority」属性を活用して、訪問者のブラウザーがどの画像を最初にロードする必要があるかをすばやく識別できるようにします。

LCP 要素でこの属性を使用します。

なんで？

HTML を見ただけでは、ブラウザーは多くの場合、どの画像が重要であるかをすぐには判断できません。 1 つの画像が大きな背景画像になり、別の画像が Web サイトのフッターの小さな部分になる場合があります。

したがって、ページがレンダリングされ、ブラウザが画像の表示場所を認識するまで、すべての画像は最初は優先度が低いと見なされます。

ただし、これは、ブラウザが LCP イメージのダウンロードを開始するのがかなり遅いことを意味する可能性があります。

新しい Priority Hints Web 標準を使用すると、Web サイトの所有者は、ブラウザーが画像やその他のリソースに優先順位を付けるのに役立つ詳細情報を提供できます。

以下の例では、灰色のバーで示されているように、ブラウザーが待機に多くの時間を費やしていることがわかります。

この LCP イメージを選択して、「fetchpriority」属性を追加します。

画像に「FetchPriority」属性を追加する方法

fetchpriority=”high” 属性を HTML img タグに追加するだけで、ブラウザはその画像をできるだけ早くダウンロードすることを優先します。

<img src="photo.jpg" fetchpriority="high" />

最新の画像形式とサイズの画像を適切に使用する方法

多くの場合、高解像度の画像はファイル サイズが大きくなり、ダウンロードに時間がかかります。

以下の速度テストの結果では、濃い青色の網掛け部分を見るとわかります。 各行は、ブラウザーに到着する画像のチャンクを示します。

画像サイズを縮小するには、次の 2 つの方法があります。

1. 画像の解像度はできるだけ低くしてください。 ユーザーのデバイスのサイズに応じて、さまざまな解像度で画像を提供することを検討してください。
2. WebP などの最新の画像形式を使用すると、同じ品質の画像をより小さなファイル サイズで保存できます。

フォントの読み込み時間を最適化する方法

LCP 要素が HTML の見出しまたは段落である場合、このテキストのチャンクのフォントをすばやく読み込むことが重要です。

これを実現する 1 つの方法は、ブラウザーにフォントを早期にロードするように指示できる preload タグを使用することです。

CSS ルール font-display: swap を使用すると、レンダリングを高速化することもできます。ブラウザーは、後で Web フォントに切り替える前に、デフォルトのフォントでテキストを即座にレンダリングするからです。

Web サイトを監視して LCP を高速に保つ

ウェブサイトを継続的に監視することで、LCP の最適化が機能していることを確認できるだけでなく、LCP が悪化した場合にアラートを確実に受け取ることができます。

DebugBear は、Core Web Vitals やその他のサイト速度指標を経時的に監視できます。 この製品は、詳細なラボベースのテストを実行するだけでなく、Google からの実際のユーザーの指標も追跡します。

14 日間の無料トライアルで DebugBear をお試しください。