最大の満足のいくペイント

2020年にGoogleは コアWebバイタルウェブサイトのユーザーエクスペリエンスを測定する3つの主要な指標のセットです。ウェブサイトの速度、安定性、そして応答性を保証することが目標です。これらの3つの指標は以下のとおりです。

• 最大のコンテンツフルペイント（LCP）： ページのメインコンテンツが読み込まれる速度。
• 最初の入力遅延（FID）： ページがインタラクティブになるまでにかかる時間。
• 累積レイアウトシフト（CLS）： ページの読み込み時の安定性。

これらの指標を改善することは、SEOとユーザー満足度の両方にとって重要です。高速で安定したウェブサイトは、ランキング上位に表示されるだけでなく、訪問者の満足度を高め、滞在時間を延ばす効果もあります。

Largest Contentful Paint とは何ですか?

最大のContentful Paint（LCP） LCPは読み込みパフォーマンスを測定する指標です。簡単に言うと、LCPはページ上で最も大きく最も重要な要素が表示されるまでの時間です。この要素には、大きな画像、動画、長いテキストブロックなどがあります。LCPはビューポート、つまりユーザーがスクロールせずに見ることができるウェブページの一部に表示されているもののみを測定します。このメインコンテンツの表示速度が速いほど、ユーザーはページの速度をより速く認識します。

LCP はどのように計算されますか?

Googleの推奨では、LCPは 2.5 seconds2.5秒から4秒の場合は改善が必要で、4秒を超える場合は改善が不十分とみなされます。LCPはモバイルデバイスとデスクトップデバイスで異なるため、両方のスコアを確認することが重要です。

LCP を見つけるにはどうすればいいですか?

LCPを修正する前に、スコアを確認する必要があります。スコアを確認するにはいくつかの方法があります。

• Google ページスピード インサイト: Googleのこの無料ツールは、LCPスコアを含む詳細なレポートを提供します。 ラボデータ セクションを参照してください。また、ページ上のどの要素が LCP の原因となっているかがわかります。
• Google検索コンソール： コアWebバイタル 検索コンソールのレポートを見ると、サイト上のどのページの LCP スコアが良いか悪いかがわかります。
• Google ライトハウス: このツールはブラウザの開発者ツールに組み込まれています。LCPスコアを含む完全なパフォーマンスレポートを、まだ公開されていないページでも実行できます。

LCP スコアを向上させるにはどうすればよいでしょうか?

LCPスコアの低下は、さまざまな問題によって引き起こされる可能性があります。ここでは、最も一般的な原因とその解決方法をご紹介します。

サーバー応答を高速化する

サーバーが遅い場合、ユーザーが画面に何かを表示するまでに長い時間がかかります。サーバーがデータの最初のバイトを送信するのにかかる時間は、 最初のバイトまでの時間 (TTFB)これを改善するには、次の操作を実行できます。

• ホスティングをアップグレードする: ホスティング プラットフォームが高速化すると、サーバーの応答時間も速くなります。
• CDN を使用する: コンテンツ配信ネットワークは、Web サイトのコンテンツを訪問者に物理的に近いサーバーに配置するため、ページの読み込みにかかる時間が短縮されます。
• キャッシュの改善: キャッシュによりページのコピーが保存されるため、訪問者がリクエストするたびに最初から再作成する必要がなくなります。

レンダリングをブロックするCSSとJavaScriptリソースを削除する

レンダリングをブロックするリソース 完全に読み込まれるまでページが表示されないようにするファイルです。通常はCSSファイルとJavaScriptファイルです。これを修正するには、以下の手順を実行してください。

• コードを縮小します。 これにより、CSS ファイルと JavaScript ファイルのサイズが小さくなり、読み込みが速くなります。
• 重要な CSS をインラインで配置します。 ページの上部部分を表示するために必要な重要な CSS コードを HTML に直接配置できます。

画像を最適化

画像はLCPに大きな影響を与えることが多く、特にページ上で最も大きな要素が画像である場合は顕著です。画像のパフォーマンスを向上させる方法をいくつかご紹介します。

• 最新の形式を使用します: 圧縮率と品質を向上させるには、WebP や AVIF などの最新の画像形式を使用します。
• 適切なサイズを使用してください: モバイルデバイスでは大きな画像を読み込まないでください。レスポンシブ画像を使用して、あらゆる画面に適切なサイズで表示されるようにしましょう。
• 画像を圧縮します。 ツールを使用して画像を圧縮し、品質を犠牲にすることなくファイル サイズを縮小できます。

Clickrank.aiのような自動SEOプラットフォームは、これらのタスクに役立ちます。このプラットフォームの AI 画像の代替テキスト ジェネレーター 画像に適切な説明を作成するのに役立ち、自動化された機能により画像やその他のアセットを高速に最適化できます。

圧縮を有効にする

サーバーで圧縮を有効にすると、送信前にファイルを圧縮するのと同じ効果が得られます。HTML、CSS、JavaScriptファイルのサイズが最大80%削減され、ページ速度に大きな影響を与える可能性があります。

サーバーサイドレンダリングを活用する

現代のウェブフレームワークは、多くの場合クライアントサイドレンダリングに依存しており、ブラウザがページ表示のほとんどの処理を行います。これはLCPにとって悪影響となる可能性があります。なぜなら、クライアントサイドの実行が完了するまでページは表示されないからです。幸いなことに、これらのフレームワークのほとんどは現在、 サーバー側のレンダリングこれにより、ブラウザが実行する必要がある作業量が削減されます。

結論

ウェブサイトの読み込み速度が遅いと訪問者に不快感を与え、ランキングに悪影響を与える可能性があります。 最大の満足のいくペイント スコアを評価し、必要な改善を行うことで、訪問者の満足度を維持し、SEO を向上させる、読み込みの速いページを提供できます。