重要なCSSのトラブルシューティング(Jetpack Boost)

重要なCSSが期待どおりに生成されないことを示すエラーが発生した場合は、受け取ったエラーメッセージに基づいて具体的な問題を特定することが重要です。

重要なCSSが機能しているか確認するには、ページのソースを表示し、次の行を探します。

<style id="jetpack-boost-critical-css">

ページのソースを表示するには、サイト上の任意の場所を右クリックし、ページのソースを表示を選択します(またはキーボードでCtrl+U / Cmd+Uを押します)。

その行が表示される場合、Jetpack Boostによってサイトに重要なCSSが正常に追加されています。表示されない場合や何かおかしい場合は、トラブルシューティングページを確認してください。

リダイレクトエラー

このエラーは、重要なCSSの生成中にJetpack Boostが新しいURLへ転送された場合に発生します。原因としては、次のようなものが考えられます。

  • メンテナンスモードのプラグインが「近日公開」ページへリダイレクトしている。
  • 同意管理プラグインが同意ページへリダイレクトしている。
  • URL書き換えプラグインがGET引数を削除し、誤ったURLになっている。

考えられる解決策:

  1. URLが正しく設定され、意図しないリダイレクトが設定されていないことを確認してください。
  2. 問題が解決するか確認するため、一時的にメンテナンスモードのプラグインを無効化してください。
  3. 同意管理プラグインを設定し、Jetpack Boostが必要なページにアクセスできるようにしてください。
  4. URL書き換えプラグインの設定を調整し、転送先URLが変更されないようにしてください。
  5. リダイレクトが標準的なHTTP 301/302リダイレクトによるものである場合、それらのページでは重要なCSSを生成できないことを受け入れる必要があるかもしれません。

リダイレクトが標準的なHTTP 301/302リダイレクトによるものである場合、それらのページでは重要なCSSを生成できないことを受け入れる必要があるかもしれません。

HTTPエラー

重要なCSSの生成中に、Jetpack BoostでさまざまなHTTPエラーが発生することがあります。それぞれのエラーは、対処が必要な特定の問題を示しています。ここでは、よく発生するHTTPエラーとその原因、効果的に解決するための考えられる対処法を紹介します。

HTTPエラー401、403

このエラーは、WordPressサイトの権限に関する問題を示しています。

HTTP 401/403エラーの考えられる解決策:

  1. WordPressの設定を確認するか、URLを利用できない理由をホスティングプロバイダーに問い合わせてください。
  2. ページが非公開になっておらず、アクセス可能であることを確認してください。そのためには、ログインしていない状態で正常に読み込まれるか、「シークレットモード」または「プライベートブラウジング」でリンクを開いて確認します。

HTTPエラー404

このエラーは、要求されたURLが存在しないことを示しています。

HTTP 404エラーの考えられる解決策:

  1. ページが正常に読み込まれることを確認してください。
  2. ページにエラーが表示される場合は、そのページがWordPressサイトの一部であり、公開されていることを確認してください。
  3. ログインしていない状態でエラーが発生するか確認するため、「シークレットモード」または「プライベートブラウジング」でリンクにアクセスしてみてください。
  4. ログインしていない場合(つまり「シークレットモード」の場合)にのみエラーが表示されるなら、特定の領域を認証済みユーザーだけに表示するプラグインなど、ページへのアクセス権限を適用している可能性のあるプラグインを確認してください。

HTTPエラー418(私はティーポットです)

通常、これはセキュリティルールによってリクエストが拒否されたことを示します。

HTTP 418エラーの考えられる解決策:

  1. HTTP 418エラー、影響を受けたURL、発生時刻を記載して、問題の詳細をホスティングプロバイダーに問い合わせてください。
  2. ホスティングプロバイダーから、次に行うべき手順について案内を受けられるはずです。

HTTPエラー500(内部サーバーエラー)

これは、リクエストを処理できないサーバー側のエラーを示します。

HTTP 500エラーの考えられる解決策:

ホスティングプロバイダーに連絡し、詳細なエラーメッセージを確認するためにサーバーログを調べてもらってください。

クロスドメインエラー

ページが別のドメインでホスティングされており、サーバーのセキュリティ設定によって、そのドメインの外部からのアクセスや読み込みが妨げられている場合に発生します。

クロスドメインエラーの考えられる解決策:

ページを開き、プロトコルとホスト名を確認して、WordPressの管理画面に表示されているものと一致することを確認してください。例:http://jetpack.comでは、httpはプロトコルで、jetpack.comはホスト名

ページを確認できませんでした(UrlVerifyError)

重要なCSSが正常に機能するよう、Boostは重要なCSSの生成中に、ページを検証するためサイトにメタタグを追加しようとします。何らかの理由でメタタグの追加に失敗すると、このエラーが返されます。

ページを確認できないエラーの考えられる解決策:

  1. 最もよくある原因は、メンテナンスモードが有効になっているプラグインと、何らかの認証(ログインフォームなど)の背後にあるページです。
  2. ログインしていない状態でもページにアクセスできることを確認してください。
  3. アクセスできるにもかかわらずこのエラーが表示される場合は、Boostによるメタ生成タグの追加を妨げているキャッシュが存在する可能性があります。

重要なCSSの生成に失敗しました

これはさまざまな理由で発生する一般的なエラーです。Boostのダッシュボードまたはサイトのログに表示されている具体的なエラーメッセージを確認し、問題の原因を特定してください。

外部スタイルシートに関連するCSSが見つかりません

Boostは外部のCSSファイルを利用してCritical CSSを生成します。ページでそれらが読み込まれない場合、Boostは必要なスタイルを抽出できません。すべてのCSSを外部ファイルから読み込まずにインライン化する最適化プラグインを使用している可能性があります。

対処方法:サイトがパフォーマンス向上のためにすでにインラインCSSを使用している場合は、このメッセージを無視しても問題ありません。

接続またはアクセスの問題

Boostがサイトに接続できなかったり、ページを正常に読み込めないことがあります。

考えられる解決策:

  • ウェブサイトがHTTPとHTTPSの両方で読み込まれないようにしてください。修正するには、すべてのウェブサイトのトラフィックをHTTPSに転送します。ホストに依頼することも、たとえばReally Simple SSLを使用することもできます。
  • ホームページからのリダイレクトがないことを確認してください。たとえばhttps://yourjetpack.blogからhttps://yourjetpack.blog/enへのリダイレクトです。不要なリダイレクトについてはホストに対応を依頼できます。
  • サイトが稼働しており、一般公開されていることを確認してください。「近日公開」や「工事中」のページがあると、Jetpackによる重要なCSSの生成が妨げられます。
  • 上記のすべてを確認しても問題が解決せず、引き続きエラーが表示される場合は、プラグインの競合が原因の可能性があります。競合しているプラグインがJetpackへの接続を妨げたり、必要なスタイルを正しく読み込めないようにしたりすることがあります。これを確認するには、プラグインの競合を確認する手順をご覧ください。

他のパフォーマンス系プラグインとの競合の可能性

別のパフォーマンスまたはキャッシュプラグイン(例えばLiteSpeed Cache)がCSSの読み込み方法や最適化方法を変更すると、競合が発生することがあります。このような変更により、Jetpack BoostのCritical CSS生成が妨げられ、特にプラグインやテーマを更新した後にレイアウトの問題が発生する可能性があります。

解決策の候補:

  • 次のCSSの読み込みを最適化機能を一時的に無効にします。設定場所:Jetpack → Boost。レイアウトが正常に戻る場合は、別のプラグインのCSS最適化との競合が原因である可能性があります。
  • ご利用中のLiteSpeed Cacheを開き、LiteSpeed Cache → ページ最適化 → CSS設定で、CSSを非同期で読み込むオプションを無効にしてください。
  • 別の方法として、Jetpack BoostのCSS最適化を無効にしたまま、代わりにキャッシュプラグインの最適化機能を使用することも検討してください。その逆も可能です。
  • 他のプラグインが対応している場合は、そのプラグインで特定のスタイルシートやクラスを最適化の対象外にすることも試してください。

どのプラグインが問題の原因か分からない場合は、プラグインを1つずつ無効にし、その都度レイアウトを再テストしてください。

読み込みタイムアウトエラー

サーバーの設定ミスや、プラグイン(または不具合のあるカスタムコード)が原因でリダイレクトループが発生している可能性があります。また、広告の読み込みに時間がかかりすぎ、Boostが広告の読み込みを待っている間にタイムアウトするケースも確認されています。

読み込みタイムアウトエラーの解決策の候補:

  1. ブラウザーのキャッシュを消去し、Boostがページの最新バージョンを読み込めるようにしてください。
  2. WordPressにログインしていない状態でページにアクセスし、問題が続くか確認してください。
  3. このページの読み込みにかかる時間を、サイト内の他のページと比較してください。
  4. このページの読み込みが他のページより遅い場合は、そのページで有効になっているプラグインを特定してください。
  5. ページの読み込みを遅くしていると思われるプラグインを無効化してください。

XFrameDenyエラー

Jetpack BoostはCSSのクリティカル部分を生成するためにiframeを使用します。このエラーは、サイトにiframe内での読み込みを妨げる特殊な設定ヘッダーがある場合に発生します。このヘッダーはX-Frame-Options: DENYと呼ばれます。これは、プラグインまたはサーバー設定によってWordPressサイトに追加されることがあります。

XFrameDenyエラーの解決策の候補:

  1. WordPressサイトに追加のHTTPヘッダーを付与するプラグインを使用していないことを確認し、使用している場合は無効化してください。
  2. これらのヘッダーが何であるか、またはどこから追加されたものか分からない場合は、ホスティングプロバイダーに連絡し、サイトからX-Frame-Optionsヘッダーを削除するよう依頼してください。

無効なURLエラー

Jetpack Boostは、Critical CSSの生成中に1つ以上の無効なURLを検出しました。このようなURLは無視しても問題ない場合があることにご注意ください。これが発生する理由は多数あるため、常に有効な解決策を提供することは困難です。

無効なURLエラーの解決策の候補:

  1. サイトで設定しているカスタムリライトが正しく機能していることを確認してください。
  2. 有効になっているプラグインが原因で、1つ以上のURLが無効になっている可能性があります。プラグイン一覧を確認し、問題が解決するまで原因と思われるプラグインを無効化してください。

プロバイダーエラー

特定のページグループ向けに生成したCritical CSSをJetpack Boostが保存するのを何らかの原因で妨げられると、このエラーが発生します。多くの場合、Webアプリケーションファイアウォール(WAF)またはセキュリティプラグインがリクエストをブロックしていることが原因です。

プロバイダーエラーの解決策の候補:

  1. セキュリティプラグインがある場合は無効化してください。その後、もう一度実行して生成できるか確認します。正常に動作する場合は、セキュリティプラグインで、set-provider-cssを含むURLに対する除外ルールを追加できるか確認してください。
  2. セキュリティプラグインがインストールされていない場合は、ホスティングサービスのWAFがリクエストをブロックしている可能性があります。ターミナルまたはコマンドプロンプトで次のcurlコマンドを実行すると確認できます(https://yourjetpack.blog/を、あなたのサイトのURLに置き換えてください):
    curl --location 'https://yourjetpack.blog/' \ --data '<svg xmlns'
  3. 上記のコマンドにForbiddenが表示された場合は、ホスティングプロバイダーに連絡してリクエストのブロックを解除するよう依頼してください。

生成ライブラリの破損

この問題が発生する可能性は低いものの、発生するケースもあります。BoostのクリティカルCSS生成ライブラリが何らかの理由で破損した場合や、別のプラグインが干渉している場合に、このエラーが表示されます。

生成ライブラリの破損エラーの解決策の候補:

  1. モジュールを一度オフにしてからオンに戻し、エラーが解消されるか確認してください。
  2. 問題が続く場合は、すべてのファイルが正常であることを確認するため、Jetpack Boostを再インストールしてください。
  3. 再インストールしても解決しない場合は、別のプラグインが競合を引き起こしている可能性があります。その場合は、問題が解決するまでプラグインを1つずつ無効化してください。

連想配列が必要でしたが、「NULL」を受け取りました

サーバー側でリクエスト中に問題が発生し、BoostがCritical CSSの生成に失敗すると、このエラーが表示されることがあります。

「NULL」エラーの解決策の候補:

  • これは、ホスティングサービスのメモリノードに関する設定ミスや問題が原因の可能性があります。
  • ホスティングプロバイダーに連絡し、メモリノードが正しく機能しているか確認するよう依頼してください。
  • 最近プラグインをインストールまたは更新した場合、または以前はBoostが正常に動作していた場合は、一時的なサーバーの問題が原因の可能性があります。
  • Cloudflareを使用している場合は、一時的に無効化してエラーが解消されるか確認してください。

サーバーの問題が解決すると、Critical CSSを正常に再生成できるようになります。

PayloadTooLargeエラー

生成されたCritical CSSが1MBを超えると、このエラーが表示されます。多くの場合、ページビルダープラグインを使用して構築されたページで発生します。

Jetpack BoostにCritical CSSを含めると、ページが重くなり、実際には読み込みが遅くなってしまいます。そのため、意図的に含めないようにしています。サイトにも保存されません。

PayloadTooLargeエラーの解決策の候補:

  1. ページを更新し、同じブロックを共有できるか確認してください。

ページで同じレイアウトを共有すると、生成されるCritical CSSを小さくできます。

同じブロックを共有できず、ページのレイアウトの独自性が高い場合、そのグループ内のページではCritical CSS機能を利用できません。

不明なエラー

指定したページのCritical CSSを生成中に予期しないエラーが発生した場合に起こります。Jetpack Boostではこの問題を想定していませんでした。

不明なエラーの解決策:

  1. URLを開いて、ページが正しく読み込まれるか確認してください。
  2. ページがエラーや問題が発生せずに読み込まれることを確認してください。
  3. ページが正しく読み込まれるにもかかわらず、Critical CSSの生成に失敗する場合は、詳しく調査できるようお問い合わせください。

エラーメッセージに基づいて具体的な問題を特定し、これらの解決策に従うことで、Jetpack BoostのCritical CSS機能に関する一般的な問題に対処できます。これにより、サイトが効率的に読み込まれ、最適なユーザー体験を提供できるようになります。

Still need help?

Please contact support. We’re happy to advise.