Optimize LCP Images(Jetpack Boost内)の一般的な問題のトラブルシューティング

最終更新日:

Jetpack Boostが期待どおりに最大コンテンツの描画(LCP)に使用される画像を最適化していない場合、このガイドで一般的な問題を特定し、LCPの分析中に報告された問題を解決できます。

LCPの最適化に関する問題を表示

Jetpack Boostで1つ以上の重要ページを最適化できない場合、LCPの最適化に関する問題という通知が画像セクションに表示されます。

問題を確認するには:

  1. WP AdminでJetpack → Boostに移動します。
  2. 「速度を最適化」の下で、画像セクションを展開します。
  3. 「LCPの最適化に関する問題」の下にある「LCP画像を最適化」を確認します。
  4. 「詳細を表示」リンクを選択すると、影響を受けるページと、各ページを最適化できなかった理由を確認できます。

最適化されていないページ

ページの可用性を確認する

Jetpack Boostが最適化対象のページにアクセスできることを確認します。

  • 重要なページが一般公開されており、パスワードで保護されていないことを確認します。
  • ページが2XX HTTP応答を返し、(404ではなく、サーバーエラーではないことを確認します)。

ページ構造を確認する

ページのレイアウトは、BoostがLCP要素をどれだけ確実に検出できるかに影響します。

  • 明確で目立つビジュアル要素が1つあるページが最適です。
  • 大きな画像が複数競合すると、LCPの検出が複雑になることがあります。
  • 非常に複雑なレイアウトでは、手動での最適化が必要になる場合があります。

最適化の結果が表示されない

キャッシュを消去する

ページのキャッシュされたバージョンによって、Boostが適用した最適化が隠れている可能性があります。各キャッシュを順番に消去してください。

  • サイトのページキャッシュを消去します。
  • 該当する場合は、CDNキャッシュを消去します。
  • プライベートブラウジングまたはシークレットブラウジングのウィンドウでテストします。

実装を確認する

コーナーストーンページでページのソースを表示し、次の属性を探します。

  • fetchpriority="high"最適化された画像。
  • loading="eager"遅延読み込みの代わりに。
  • data-jp-lcp-optimized="true"

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

Boostでページを最適化できない場合、LCPの最適化に関する問題の下に説明が表示されます。影響を受けたページの「詳細」リンクを選択すると、下にある該当するトラブルシューティングセクションが開きます。

HTTPエラー

原因

Jetpack Boostがページを分析しようとした際にHTTPエラーが発生しました。

解決策

影響を受けたページをプライベートブラウザーウィンドウまたはシークレットブラウザーウィンドウで開き、正しく読み込まれることを確認してください。その後、もう一度最適化を試してください。

ページの読み込みに時間がかかりすぎました

原因

分析中にページの読み込みに時間がかかりすぎました。

解決策

影響を受けたページをプライベートブラウザーウィンドウまたはシークレットブラウザーウィンドウで開き、正しく読み込まれることを確認してください。その後、もう一度最適化を試してください。

メインのLCP要素を時間内に特定できませんでした

原因

Jetpack Boostはページを正常に読み込みましたが、制限時間内にメインのLCP要素を特定できませんでした。読み込みに時間がかかるページや複雑なページで発生する可能性があります。

解決策

Boostが測定できる、安定したビジュアルコンテンツがページに表示されることを確認します。

  • ページに、妥当な時間内に読み込まれるビジュアルコンテンツがあることを確認します。
  • コンテンツが安定しない原因となるJavaScriptのエラーや、読み込みが無限に続く状態がないか確認します。
  • ページの大部分が空白になっていないこと、リダイレクトが多用されていないこと、コンテンツ全体が動的に読み込まれる構成になっていないことを確認します。

類似する大きな要素が複数見つかりました

原因

Jetpack Boostは同じセレクターを持つ類似する大きな要素を複数見つけたため、メインのLCP要素として扱うべきものを特定できませんでした。

解決策

Boostが主要な要素を1つ特定できるようにします。

  • レイアウトを簡素化するか、ページ上部付近に明確に目立つビジュアル要素を1つ配置します。
  • スクロールせずに見える範囲の上部に、競合するヒーロー画像や背景セクションを複数配置しないでください。

メインのLCP要素が表示され続けませんでした

原因

Jetpack BoostはLCPの候補となる要素を特定しましたが、分析に必要な時間だけ表示され続けませんでした。ページの読み込み後すぐに変化するスライドショー、アニメーションセクション、その他のコンテンツで発生する可能性があります。

解決策

Boostが測定できるよう、LCP要素を十分な時間表示したままにします。

  • 初回読み込み中、ヒーロー/LCP要素を少なくとも3秒間表示したままにします(たとえば、自動再生や回転を一時停止または遅延させます)。
  • スライダーがヒーロースライドから開始するように設定し、最初の切り替えを遅延させます(3秒以上)。
  • ヒーローコンテンツをすぐに置き換える負荷の大きい入場アニメーションを最小限にします。
  • これらの変更を自分で行えない場合(設定のないテーマやスライダープラグインを使用している場合など)は、次のようにします。
    • テーマまたはスライダープラグインの作成者に連絡し、カルーセルがprefers-reduced-motion: reduceを尊重し、ユーザーが動きを減らす設定を選んだ場合は、自動再生とトランジションを一時停止または無効にするよう依頼します。
    • 分析できるようメインスライドが十分な時間表示されるよう、初回読み込み時の自動再生を無効にするか遅延させる設定を依頼します。

分析中にページが別のURLへリダイレクトされたため、Jetpack BoostはそのLCPを測定できませんでした。クラウドがリダイレクト先を報告すると、Boostはエラーメッセージに最終的なURLとして表示します。一般的な原因には、正規URLへのリダイレクト、末尾のスラッシュへのリダイレクト、ロケールによるリダイレクト、地域によるリダイレクト、ログイン画面などがあります。

リダイレクトを解消し、Boostが直接読み込まれるページを分析できるようにします。次のいずれかを選択してください。

  • コーナーストーンページからURLを削除します。
  • コーナーストーンページの項目を最終的なURLに指定します。
  • リダイレクトを削除し、ページがリダイレクトなしで読み込まれるようにします。

最適化中に問題が発生しました

原因

Jetpack Boostは最適化中に問題の原因を特定できませんでした。

解決策

数分待ってから、もう一度最適化を試してください。

問題が解決しない場合は、サポートにお問い合わせください。

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

それでもサポートが必要な場合は、お問い合わせください。喜んでご案内します。