ログイン 始める

最大コンテンツの描画（LCP）画像をJetpack Boostで最適化

LCP画像の最適化は、ウェブサイトの主要ページを自動的に特定して最も重要な画像を最適化します。この機能は主要ページを分析し、該当する場合は主要画像を特定して、画像が訪問者向けにより速く読み込まれるよう技術的な最適化を適用します。

LCP画像の最適化は、無料プランと有料プランのJetpack Boostプランの両方で利用できます。無料プランでは主要ページを1ページ最適化でき、プレミアムプランでは最大10ページまで対応します。

最大コンテンツの描画（LCP）とは何ですか？

最大コンテンツの描画（LCP）は、Core Web Vitalsの指標で、訪問者のブラウザーで大きな画像や見出しなど、最も大きく表示されるコンテンツ要素が完全に読み込まれるまでの時間を測定します。

LCPが高速だと、サイトが速く反応も良いという印象を与えます。他の要素がすぐに読み込まれても、LCPが遅いと、ユーザーにはサイト全体が遅く感じられることがあります。

ウェブサイトにとってLCPが重要な理由

最大コンテンツの描画（LCP）はCore Web Vitalsの指標で、ウェブページで最も大きく表示されるコンテンツ要素の読み込みにかかる時間を測定します。

  • 訪問者はページ全体の読み込みが完了した時点ではなく、主要コンテンツがどれだけ早く表示されるかでサイトの速度を判断します。
  • LCPが遅いと、他の要素が速く読み込まれても、サイトは重く感じられます。
  • LCPが高速だと、サイトはプロフェッショナルで反応が良い印象になります。

検索エンジン最適化

LCPが遅くなる原因は何ですか？

LCPのパフォーマンスが低下する一般的な原因は次のとおりです。

  • サイズが大きく、最適化されていない画像。
  • 適切な読み込み優先順位が設定されていない画像。
  • レスポンシブ画像技術が適用されていない。
  • サーバーの応答時間が遅い。
  • レンダリングを妨げるリソース。

LCP画像の最適化とは何ですか？

LCP画像の最適化は、Jetpack Boostの機能で、主要ページ上の最も重要な視覚要素を特定し、より速く読み込めるようパフォーマンスの改善を適用します。

ページの読み込み時にブラウザーのウィンドウ内に表示される最大の画像または背景画像に焦点を当てます。これはLCP要素と呼ばれます。この要素を最適化すると、Core Web Vitalsのスコアを大幅に改善できます。

LCP画像の最適化を有効にする

LCP画像の最適化を有効にするには：

  1. WP管理画面で、Jetpack → Boostに移動します。
  2. 「速度を最適化」の下にある「画像」セクションを展開します。
  3. 「LCP画像を最適化」の切り替えをオンにします。

Jetpack Boostはコーナーストーンページを分析し、該当するLCP画像を最適化します。

LCP画像の最適化の仕組み

ページの自動分析

この機能はコーナーストーンページを調べ、次を特定します：

  • ビューポートに表示される最大の視覚要素。
  • 標準画像か背景画像か。
  • デバイスの種類（モバイル／デスクトップ）ごとの最適な読み込み方法。

適用される技術的な最適化

画像要素の場合：

  • LCP画像をJetpackのサイトアクセラレーターで最適化します。
  • 読み込みを優先するためにfetchpriority="high"を設定します。
  • 遅延読み込みによる遅延を防ぐためにloading="eager"を適用します。
  • srcset属性とsizes属性を使用してレスポンシブ画像を生成します。
  • 高DPIディスプレイにも対応します。

背景画像要素の場合：

  • LCP背景画像をJetpackのサイトアクセラレーターで最適化します。
  • ドキュメントヘッドにプリロードリンクを追加します。
  • CSSを使用してレスポンシブ背景画像を実装し、image-set()を適用します。
  • デバイスごとのメディアクエリを適用します。
  • CSSのオーバーライドを使用して、最適な読み込みを実現します。

LCPの最適化ステータスを確認する

次を有効にするとLCP画像を最適化、Jetpack Boostはコーナーストーンページを分析します。この処理中、BoostではJetpack BoostがコーナーストーンページのLCPを最適化しています……

最適化が完了すると、Boostにはページが最後に最適化された日時と最適化リンクが表示され、再度最適化を実行できます。

Boostで1ページ以上を最適化できない場合、LCPの最適化に関する問題という通知が表示されます。「詳細を表示」リンクを選択すると、影響を受けるページと、各ページを最適化できなかった理由を確認できます。

LCP画像の最適化に関するトラブルシューティング

既知の問題と解決策の一覧については、LCP画像の最適化に関するJetpack Boostのトラブルシューティングをご覧ください。

まだサポートが必要ですか？

サポートにお問い合わせください。喜んでご案内します。