ログイン 始める

CSSの読み込みをJetpack Boostで高速化

Jetpack Boostは、CSSの配信方法を最適化してサイトの読み込みを高速化します。Critical CSS機能は、ページの最上部に最も重要なスタイル情報を移動し、特にモバイルでコンテンツをより早く表示できるようにします。これにより、訪問者の利便性とサイトの速度スコアが向上します。

ご利用のプランに応じて、この機能は手動生成（無料プラン）と自動生成（有料プラン）の2種類で利用できます。

Critical CSSとは何ですか？

Critical CSSとは、ページの表示部分を描画するために必要な重要なスタイルを指します。Jetpack BoostはこのCSSを抽出し、ページの<head>に直接インライン化して、主要な視覚要素の読み込み遅延を短縮します。

デスクトップとモバイルの両方のレイアウトに対応するため、Boostは複数の画面幅でサイトをサンプリングし、さまざまなデバイスで機能する1つのCritical CSSセットを生成します。

Critical CSSを手動で生成する

Jetpack Boostの無料版では、Critical CSSを手動で生成します。サイトのHTMLまたはCSS構造に影響する変更を行った後は、再生成してください。

Critical CSSを有効化して生成する方法

  1. 次の場所に移動します：Jetpack → Boost（WordPress管理画面）。
  2. 「ページの読み込み」セクションを展開します。
  3. 「Critical CSSの読み込みを最適化（手動）」というトグルをオンにします。
  4. 生成ボタンをクリックします。

Critical CSSが生成されている間は、Boostダッシュボードを表示したままにしてください。別のページに移動すると、処理が一時停止します。

Critical CSSを再生成するタイミング

次の場合はCritical CSSを再生成してください：

  • テーマを変更または更新したとき
  • 新しいレイアウトやブロックを使って投稿やページを追加または編集したとき
  • デザイン関連のプラグインをインストールまたは更新したとき
  • WordPressのコアを更新したとき

Jetpack Boostの有料プランでは、Critical CSSの生成を自動化できます。

Critical CSSを自動で生成する

自動Critical CSS生成はJetpack Boostの有料プラン、またはJetpack Completeで利用できます。

Critical CSSを自動で生成するには：

  1. 次の場所に移動します：Jetpack → Boost（WordPress管理画面）。
  2. 「ページの読み込み」セクションを展開します。
  3. 「Critical CSSの読み込みを最適化（自動）」というトグルをオンにします。

有効にすると、サイトに変更を加えた際に、BoostがCritical CSSを自動的に生成します。

Critical CSSを自動生成するメリット

  • サイトの変更後もCritical CSSを自動的に最新の状態に保ちます。
  • Critical CSSを手動で再生成する必要を減らします。
  • サーバー側で生成するため、より一貫した結果が得られます。
  • デザインやレイアウトの変更後に古いCritical CSSが残るのを防ぎます。
  • 問題が発生した場合に、直接サポートを利用できます。

ステータスメッセージ

Jetpack BoostはCritical CSSの下にステータスメッセージを表示し、生成が正常に完了したか、対応が必要かを知らせます。

  • 自動生成が有効になっています。有料プランでは、変更を加えるたびにBoostがCritical CSSを自動生成することが表示されます。
  • Critical CSSが正常に生成されました。 Boostは、生成されたファイル数と最終更新日時を表示します。
  • 一部のファイルを生成できませんでした。 Boostは、該当するページに関する推奨事項へのリンクを表示します。
  • ページはログイン中の訪問者のみ利用できます。 Boostはログアウト状態の訪問者としてページを読み取れません。ページを意図的に非公開にしている場合は、このメッセージを無視できます。公開する必要がある場合は、訪問者にログインを要求しているプラグインまたは設定を確認してから、もう一度お試しください。
  • 別の生成エラーが発生しました。 Boostに表示される推奨事項に従うか、Critical CSSのトラブルシューティングガイドをご覧ください。

開発者向けにCritical CSSの自動生成を無効にする

有料プランをご利用で、手動版を使用したい場合は、必須プラグインにこのフィルターを追加して自動機能を無効にできます（mu-plugin）：

add_filter( "jetpack_boost_has_feature_cloud-critical-css", '__return_false' );

無効にすると、手動の「Critical CSSの読み込みを最適化（手動）」トグルがダッシュボードに戻ります。

トラブルシューティング

Jetpack BoostでCritical CSSを生成できない場合や、問題を示すメッセージが表示された場合は、詳細なガイドの手順に従ってください：

Jetpack BoostでのCritical CSSのトラブルシューティング

Still need help?

Please contact support. We’re happy to advise.