ログイン 始める

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

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

Jetpack Boostが期待どおりにLargest Contentful Paint（LCP）画像を最適化していない場合、このガイドでは、LCPの分析エラー（HttpError、LcpTimeout、page-navigatedなど）を含む一般的な問題を特定して解決する方法を説明します。

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

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

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

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

ページ構造を確認する

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

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

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

キャッシュを消去する

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

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

実装を確認する

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

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

特定のエラータイプ

BoostがページのLCPを測定できない場合、次のいずれかのエラータイプが報告されます。各セクションでは、原因と解決するための手順を説明します。

HttpError

原因

サーバーの応答が遅い、またはページが大きく複雑であることが原因で、ページを60秒以内に完全に読み込めませんでした。

解決策

ページを確実に読み込めるように、次の手順を実行してください。

  • ホスティングのパフォーマンスとサーバーログを確認します。
  • ページがすばやく確実に読み込まれることを確認します。
  • ページのより軽量なバージョンでテストします。

LcpTimeout

原因

ネットワークまたはHTTPエラーにより、Jetpack Boostがページにアクセスできませんでした。通常、タイムアウト、ファイアウォール、または不安定な接続が原因です。

解決策

Jetpackがページにアクセスして読み込めることを確認します。

  • ページが常に読み込まれ、有効な応答（2XX HTTPコード）を返すことを確認します。
  • ホスティングプロバイダーが、Jetpackなどの外部サービスによるサイトへのアクセスを許可していることを確認します。
  • Jetpackをブロックする可能性のあるセキュリティルールまたはファイアウォールルールを一時的に無効にします。

LcpMetricTimeoutError

原因

Jetpack Boostはページを正常に読み込みましたが、60秒以内にLargest Contentful Paint要素を検出できませんでした。コンテンツの読み込みが遅いページや、安定しない動的コンテンツが原因となる場合があります。

解決策

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

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

ElementNotUnique

原因

Jetpack Boostが大きなビジュアル要素を複数検出したため、どれをLCPとして最適化すべきか判断できませんでした。

解決策

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

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

ElementNotStable

原因

Jetpack BoostはLargest Contentful Paintの候補要素を特定しましたが、分析中に数秒間にわたって一貫して表示され続けませんでした。これは、カルーセルや自動回転するスライダー、アニメーション付きのヒーローセクション、または読み込み後すぐにコンテンツを切り替えたり、フェードやスライドで表示を変更したりするコンポーネントでよく発生します。

解決策

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

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

page-navigated

原因

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

解決策

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

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

不明

原因

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

解決策

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

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

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