GSCのコアウェブバイタルにおけるLCP「More Than」エラーの修正

Googleは、コアウェブバイタルという名前の新しいレポートをサーチコンソールで発表しました。これらはスピードレポートに取って代わり、2021年にはランキング要因として考慮される予定です。コアウェブバイタルは、ページスピード、HTTPS、モバイルフレンドリー、その他のオンページ要因とともにランキング要因として考慮されます。

コアウェブバイタルは、ページ上のUXおよびUI要素を考慮して、3つのコアメトリックの平均を算出します。

1. LCP: Largest Contentful Paint
2. FID: First Input Delay
3. CLS: Cumulative Layout Shift

特定の単一のコード修正はありませんが、ウェブサイトを最適化してエラーを解決することができます。ここでは、ウェブページのLargest Contentful Paint (LCP)「 More Than」を解決するのに役立ついくつかの実践をリストします。

LCPとは？

Largest Contentful Paint (LCP)メトリックは、ビューポート内で表示される最大のコンテンツ要素のレンダリング時間を報告します。簡単に言えば、ページが読み込みを開始した後、表示可能な画面に主要な要素が読み込まれるまでの時間です。

良好なユーザーエクスペリエンスを提供するために、サイトはページの読み込みが開始されてから最初の 2.5秒以内にLargest Contentful Paintが発生するよう努めるべきです。

LCPに考慮される要素は？

Largest Contentful Paintに考慮される要素の種類は以下の通りです；

• 要素
• 要素内の要素
• 要素
• url()関数を介して読み込まれる背景画像を持つ要素
• テキストノードまたは他のインラインレベルのテキスト要素の子を含むブロックレベル要素。

高LCPの原因は？

• サーバーの応答時間が遅い
• レンダーブロッキングのJavaScriptおよびCSS
• リソースの読み込み時間が遅い
• クライアントサイドレンダリング

高LCPを修正するためのウェブサイトの最適化方法は？

良好な応答時間と低遅延率を持つ良いホスティングを使用してください。サーバーを最適化し、Cloudflare、jsDelivr、Staticallyなどの無料のサードパーティCDNを使用して静的アセットを迅速に配信することを確認してください。WordPressで作業している場合は、作業を手伝うための多くのプラグインがあります。

JPEG XR、JPEG 2000、またはWebPなどの次世代画像フォーマットを使用して圧縮された画像を使用してください。これらの最新のフォーマットは、画像の読み込み速度を50％向上させます。WordPress用のいくつかのプラグインは、自動的に画像を圧縮および変換するのに役立ちます。また、WP-Photonのような画像CDNを使用して、サーバーの帯域幅を削減し、サイトの速度を向上させてください。

キャッシュサービスを使用して、リクエストごとに変更されない静的HTMLページを読み込むことができます。キャッシュは不必要に再生成されるのを防ぐことができます。キャッシュプラグインは、生成されたHTMLのコピーをサーバーに保存し、ページがリクエストされると、サーバーはキャッシュをリリースし、Time to First Byte (TTFB)を減少させ、リソースの使用を最小限に抑えることができます。

Cloudflareのようなサービスを使用すると、ブラウザのバックグラウンドでサービスワーカーを実行し、サーバーからのリクエストをインターセプトできます。彼らはページの完全なHTMLキャッシュを取得し、HTMLページをキャッシュファーストで提供するため、読み込み時間を大幅に短縮できます。

LCPを良好にするためにウェブサイトを最適化する際に考慮すべき他の重要なことは、

• レンダーブロッキングのJavaScriptおよびCSSを排除する
• 非重要なCSSを遅延させる
• リソースをミニファイする
• 重要なリソースをプリロードする

LCPを減少させ、ページの読み込みを速くしてUXを向上させるためのウェブサイトの最適化方法についての詳細なガイドは、公式のWeb.Devサイトで見つけることができます。

結論: GSCにおけるコアウェブバイタルの導入とそれがランキング要因として考慮されることに伴い、LCPは非常に重要なメトリックであり、デバイスのビューポート内で最大の要素が読み込まれるまでの時間を考慮します。私は、低LCPのためにサイトを最適化するためのいくつかの暫定的な修正と解決策を提供しました。

Fix LCP ‘More Than’ Error in Core Web Vitals on GSCについてのご意見があれば、下のコメントボックスにお気軽にお寄せください。また、動画チュートリアルのために私たちのDigitBin YouTubeチャンネルを購読してください。よろしく！