Jetpack Boost
Jetpack Boostは、CSS、JavaScript、画像などの主要なアセットの配信方法を最適化し、サイトの読み込みを高速化します。このガイドでは、Boostのインストール方法、各機能の内容、使用方法を説明します。
無料で始めることも、アップグレードしてCSSの自動最適化、画像品質の調整、高度な画像分析などのプレミアム機能を利用することもできます。
WordPress.comのホスティングプラン(BusinessまたはCommerce)には、プレミアムJetpack Boost機能は含まれていません。利用するには、有料のBoostプランが必要です。有効化の手順については、以下のJetpack BoostをWordPress.comで使用する方法をご覧ください。
インストール要件
Jetpack Boostを使用するには、サイトが次の条件を満たしていることを確認してください。
- 最新バージョンのWordPressを実行している。
- 一般公開されている(パスワードやメンテナンスモードで保護されていない)。
- 次のWordPressホスティング要件を満たしている。
- 次の一般公開されている xmlrpc.phpファイルがある。
Boostの使用にJetpackプラグインは必要ありません。Jetpack Boostは独立したプラグインです。
Jetpack Boostをインストールする
- 次の手順に従い、WordPress管理画面 → プラグイン → 新規追加で、Jetpack Boostを検索してください。
- インストールしてから、有効化します。
- 無料プランまたは有料プランを選択します。
- 有効化するとBoostダッシュボードに移動し、Boostが総合、デスクトップ、モバイルのパフォーマンススコアを計算します。
Jetpack Boostがサイトに接続できない場合は、こちらのトラブルシューティング手順に従ってください。
Jetpack Boostダッシュボード
インストールすると、Boostダッシュボードのサイトの速度で、サイトの総合、デスクトップ、モバイルのパフォーマンススコアを確認できます。
デスクトップとモバイルのスコアの下に、最適化がパフォーマンスに与えた効果を示すスコア向上バッジが表示されることがあります。
Boost画面の右上にある速度テストを実行ボタンを使用すると、変更後にスコアを更新できます。
Boostは最適化設定を、折りたたみ可能な「速度を最適化」セクションに、重要ページ、ページの読み込み、コードの最適化、画像ごとにまとめています。パフォーマンス履歴は有料プランで利用できます。
アクティビティログ
Jetpack Boost 4.7.0以降では、WordPress管理画面にアクティビティログページが追加されます。アクティビティログ(サイトアクティビティとも呼ばれます)は、公開・更新された投稿や固定ページ、コメントのモデレーション、プラグインやテーマの変更、設定の変更、ログイン試行など、サイト上で発生したことを記録します。
これを表示するには、Jetpack → アクティビティログに移動します。WordPress管理画面内にあります。
アクティビティログページを利用するには、次のすべてが必要です。
- Jetpack Boost 4.7.0以降。
- WordPress.comに接続されたサイトで、ユーザーアカウントがその接続にリンクされていること。
- サイトで管理者権限を持っていること。
Jetpackプラグインは必要ありません。Boostが単独でアクティビティログページを提供します。
Boostの無料版では、アクティビティログに最新20件のイベントが表示され、フィルタリングは利用できません。有料のJetpack VaultPress Backup、Jetpack Security、またはJetpack Completeプランでは、イベント履歴が拡張され、日付範囲やアクティビティタイプによるフィルタリングが利用可能になります。アクティビティログをファイルにエクスポートすることはできません。
機能リファレンス
Jetpack Boostには、サイトのフロントエンドパフォーマンスの改善と監視に役立つツールが含まれています。最適化機能は、Boostダッシュボードの「速度を最適化」セクションから管理できます。
| 機能 | 無料 | 有料 |
|---|---|---|
| サイトのパフォーマンススコア サイトのパフォーマンススコアはGoogle PageSpeed Insightsに基づいて表示されます。詳しくはこちら。 | ✅ | ✅ |
| パフォーマンス履歴 時間の経過に伴うパフォーマンス履歴を追跡します。 | ❌ | ✅ |
| 重要ページ 最も重要なページを対象に、Critical CSSやLCPの画像最適化など、重点的な最適化を行います。 | 1ページ | 10ページ |
| CSSの読み込みを最適化 Critical CSSを生成し、ページの表示領域の描画に必要なスタイルを優先します。 | ✅ | ✅ |
| Critical CSSの自動生成 変更後にCSSの読み込みを自動的に最適化します。 | ❌ | ✅ |
| サイトページをキャッシュ 訪問者の読み込み時間を短縮するため、ページの静的バージョンを作成します。 | ✅ | ✅ |
| 重要でないJavaScriptを遅延 初回描画に必要のないスクリプトの読み込みを遅らせ、コンテンツをより速く表示できるようにします | ✅ | ✅ |
| JavaScriptとCSSを連結 複数のJavaScriptまたはCSSファイルを1つにまとめ、読み込みパフォーマンスを向上させます。 | ✅ | ✅ |
| 画像CDN Jetpackの高速グローバルCDNから画像を配信します。 | ✅ | ✅ |
| 形式ごとに画像品質を調整 CDNで配信される画像の品質を制御でき、遅延読み込みのリサイズ機能を利用できます。 | ❌ | ✅ |
| 画像ガイドを有効にする 閲覧中に画像サイズの情報を表示し、大きすぎる可能性のある画像を見つけやすくします。詳しくはこちら。 | ✅ | ✅ |
重要ページ
重要ページ Boostが重要なコンテンツのパフォーマンス改善を優先するのに役立ちます。Boostは、Critical CSSとページ速度スコアを生成する際に、これらのページを優先します。ホームページは常に重要ページとして扱われます。
- 無料プランでは、1つの追加の重要ページを設定できます。
- 有料プランでは、最大10ページを追加で設定できます。
デフォルトでは、Boostは次を追加します。
- WooCommerceのショップページ(有効な場合)。
- Yoast SEOプラグインで重要コンテンツとしてマークされたページ。
注記:無料プランをご利用の場合は、上記のページのうち(ホームページを除く)1ページのみが、Jetpack Boostを初めてインストールした際に追加されます。
このリストは、Boostダッシュボードの重要ページセクションにある速度を最適化から表示または変更できます。
Boostは重要ページを相対URLとして保存するため、ドメインを変更しても、更新せずにリストを引き続き使用できます。
重要ページに影響する項目:
- 速度スコア:Boostは、リストの先頭にあるページを使用してパフォーマンスを測定します。
- Critical CSS:各重要ページにそれぞれ最適化されたCSSが割り当てられ、読み込みの精度が向上します。
重要ページを事前レンダリング
この機能を有効にすると、対応ブラウザーでWordPress 6.8の投機的読み込みを使用して重要ページを事前レンダリングします。これにより、ユーザーがリンクにカーソルを合わせると、リンク先のページがバックグラウンドで読み込みを開始し、クリックしたときの体感速度が向上します。
Boostダッシュボードの重要ページセクションで、この機能をオンまたはオフに切り替えられます。デフォルトではオフになっています。
CSSの読み込みを最適化
CSSの読み込みを最適化すると、ページの表示領域を描画するために必要なスタイルであるCritical CSSを生成し、それらのスタイルを最初に読み込んでコンテンツをより速く表示します。
- 無料プランでは、生成ボタンを、この機能を初めて使用するときに選択します。後でCritical CSSを更新する必要がある場合は、「Critical CSSを再生成」ボタンを選択します。
- 有料プランでは、BoostがCritical CSSを自動的に生成および更新します。
サイトヘルスで「古いCritical CSS」と表示された場合は、Boostダッシュボードへのリンクをたどり、Critical CSSを再生成ボタンを選択します。
Critical CSSが生成されている間は、Boostダッシュボードを表示したままにしてください。別のページに移動すると、処理が一時停止します。
LCP画像を最適化(無料プランは1ページ、有料プランは最大10ページ)
重要ページの最大コンテンツの描画(LCP)画像を最適化して、体感的な読み込み時間とCore Web Vitalsスコアを改善します。
無料プラン: 1つの重要ページを最適化します。
有料プラン:最大10ページを最適化します。
表示される画像または背景画像の中で最も大きいものを自動的に特定し、次の処理を行います。
- 次の方法で読み込みを優先します
fetchpriority="high" - LCP画像の遅延読み込みを無効にします
- Jetpack CDNとレスポンシブ画像技術を使用します
- 次の方法で背景画像をプリロードします
image-set()
詳しくはこちらLCP画像の最適化
サイトページをキャッシュ
サイトページをキャッシュすると、ページの静的バージョンが作成され、訪問者の読み込み時間を短縮できます。
- コンテンツが変更されると、Boostがキャッシュを自動的に更新します。
- 頻繁に更新されるコンテンツの場合に便利なように、特定のページをキャッシュの対象外にできます。
ページキャッシュを有効にするには:
- 「ページの読み込み」セクションを展開します。
- 「サイトページをキャッシュ」切り替えをオンにします。
- キャッシュからページを除外するには、除外パネルを開き、除外するURLパターンを追加します。
WP Cloudのホスト(PressableやWordPress.comなど)では、Boostがホスティングプロバイダーのページキャッシュを検出できます。この場合、Boostは「ページキャッシュは実行中です」と表示し、「サイトページをキャッシュ」切り替えの代わりに表示します。追加のページキャッシュ設定は必要ありません。
Boostでサイトページをキャッシュする方法について詳しくはこちら。
必須ではないJavaScriptの遅延
必須ではないJavaScriptの遅延により初期表示に必要でないスクリプトの読み込みを遅らせ、コンテンツをより速く表示できるようにします。
有効にするには、「ページの読み込み」セクションを展開し、「重要でないJavaScriptを遅延」トグルをオンにします。
フォームやスライダーなどのサイト機能が動作しなくなった場合、それらは早く読み込む必要があるJavaScriptに依存している可能性があります。次の操作ができます。
- 「重要でないJavaScriptを遅延」トグルをオフにします。
- 「除外」パネルを開き、URLまたはURLパターンを、JavaScriptの遅延読み込みを除外する対象として追加します。
- 特定のスクリプトを除外するには、代わりに
data-jetpack-boost="ignore"をスクリプトタグに追加します。
JavaScriptを連結
JavaScriptを連結 JavaScriptファイルを結合して縮小し、サイトで読み込む必要があるスクリプトの数を減らします。
有効にするには、「コードの最適化」セクションを展開し、「JavaScriptを連結」トグルをオンにします。
特定のスクリプトを除外
一部のJavaScriptファイルは、結合すると正しく動作しない場合があります。除外するには、ページのソースコードまたはプラグインのドキュメントを確認して、スクリプトのハンドルを特定します。
スクリプトタグの例:https://yourjetpack.blog/wp-content/plugins/snow-effects/snow-effects.js
- ハンドルは次のとおりです:
snow-effects。 - 「除外」パネルを開き、
snow-effectsをハンドルのリストに追加し、保存ボタンを選択します。
成功すると、ページのソースに次のようなコメントが表示されます。
<!-- No Concat JS snow-effects => Excluded option -->
この機能は、WordPress Enqueue APIを介して追加されたスクリプトでのみ動作します。インラインスクリプトや埋め込みスクリプトには影響しません。
CSSを連結
CSSを連結スタイルシートファイルを結合して縮小し、サイトで読み込む必要があるスタイルの数を減らします。
有効にするには、「コードの最適化」セクションを展開し、「CSSを連結」トグルをオンにします。
特定のスタイルシートを除外
一部のスタイルシートは、結合すると表示が崩れる場合があります。除外するには、HTMLのid属性からスタイルシートのハンドルを確認します。
例:<link rel="stylesheet" href="https://yourjetpack.blog/wp-content/themes/twentytwenty/style.css" id="twentytwenty-style-css">
- ハンドルは次のとおりです:
twentytwenty-style。 - 例外パネルを開き、
twentytwenty-styleをハンドルのリストに追加して、保存ボタンを選択します。
JavaScriptの連結と同様に、これはWordPress Enqueue APIを使用して追加されたスタイルでのみ動作します。
画像CDN
画像をJetpackの高速グローバルCDNから配信します。また、画像をWebPなどのより効率的な形式に変換して、読み込みを高速化します。
有効にするには、「画像」セクションを展開し、「画像CDN」トグルをオンにします。
- 無料プラン:画像は自動的にCDN経由で最適化され、配信されます。
- 有料プラン:画像品質の調整機能と、Lazy Loadのサイズ変更機能を利用できます。
形式ごとに画質を調整 (有料機能)
有料のBoostプランでは、形式ごとに画質を調整の下にある画像CDNを展開して、JPEG、PNG、WebP画像の品質を調整できます。
スライダーで各形式の画質レベルを調整するか、ロスレスチェックボックスを選択して、非可逆圧縮を使わずに画質を維持します。
遅延読み込み画像の自動サイズ変更(有料機能)
遅延読み込みされた画像のサイズをコンテナに合わせて変更します。これによりレイアウトシフトを減らし、Cumulative Layout Shift(CLS)を改善できます。
- 遅延読み込み画像の自動サイズ変更は、画像CDNが有効になっている有料のBoostプランで利用できます。
- 「遅延読み込み画像の自動サイズ変更」トグルをオンにすると、遅延読み込みされた画像のサイズを表示寸法に合わせて変更します。
画像ガイドを有効にする
画像ガイドには、サイトを閲覧するときに画像サイズの情報が表示され、大きすぎる可能性のある画像を見つけるのに役立ちます。
使用するには、「画像」セクションを展開し、「画像ガイドを有効にする」トグルをオンにします。
画像の最適化をどこから始めればよいかわからない場合に、特に役立ちます。
マルチサイトとローカルでの使用
- マルチサイトのインストール:ログページはマルチサイトネットワークでは利用できず、ネットワーク内のどのサイトにも表示されません。
- ローカル環境:Boostを非公開サイトまたはローカルサイトでテストするにはオフラインモードを使用します。
Jetpack Boostトラブルシューティングハブ
Jetpack Boostが期待どおりに動作しない場合は、問題を解決するための役立つドキュメントをご用意しています。ほとんどの問題は、まず適切に診断することで、いくつかの簡単な手順で解決できます。
以下のガイドでは、機能別に整理された一般的な問題を確認できます。各リンクを開くと、詳しい手順を説明した専用のトラブルシューティング記事が表示されます。
| キャッシュ | ファイルへのアクセスの問題や他のプラグインとの競合など、Boostのページキャッシュに関する問題を解決します。 | Jetpack Boostのキャッシュに関するトラブルシューティング |
| 重要なCSS | 古い、または不足している重要なCSSに関連するエラーを解決します。 | Jetpack Boostの重要なCSSに関するトラブルシューティング |
| CSS/JSの連結 | CSSまたはJavaScriptの連結によって発生するレイアウトやスクリプトのエラーを解決します。 | 連結したCSSまたはJavaScriptの配信方法に関するトラブルシューティング |
| JavaScriptの遅延 | 遅延読み込み時に問題を引き起こすスクリプトを除外する方法をご確認ください。 | Jetpack Boostの遅延からJavaScriptファイルを除外 |
| 速度スコアの測定 | Boostが速度スコアを計算する方法と、各指標の意味をご確認ください。 | Jetpack Boostによる速度スコアの測定方法 |
| コンソールエラー | ブラウザーのコンソールに表示されるJavaScriptまたはCSSのエラーを解決します。 | Jetpack Boostのコンソールエラーを理解する |
| キャッシュフィルターのカスタマイズ | 開発者向け:任意のフィルターと設定ファイルを使用して、Boostによるキャッシュ処理をカスタマイズします。 | Jetpack Boostでフィルターを使用してキャッシュパラメーターをカスタマイズする |
| 速度スコアの変動 | 速度テストのたびにBoostの結果が変わる理由と、より信頼性の高いテスト方法をご確認ください。 | Jetpack Boostの速度スコアが変わる理由(対処方法) |
| LCP画像の最適化 | Boostが最大コンテンツ描画(LCP)画像を最適化するのを妨げている問題を解決します。 | Jetpack BoostにおけるLCP画像の最適化に関するよくある問題の解決方法 |
サポートが必要ですか?
Jetpack Boostの設定や使用で問題が発生している場合は Jetpackサポートにお問い合わせください。喜んでサポートいたします。
プライバシー情報
お客様とその個人データのプライバシーとセキュリティを全面的に保護することに尽力しています。Jetpack Boostによるデータの使用について詳しくは、Automatticのプライバシーに関するお知らせ(AutomatticがJetpack Boostプラグインを所有および運営しています)、Automatticのプライバシーポリシー、および以下のセクションをご覧ください。
Jetpack BoostはJetpackのライブラリを使用してWordPress.comに接続し、ページ速度スコアを計算します(tk_aiというCookieを使用します)。Jetpack内のCookieについて詳しくは、こちらをご覧ください。
| 使用されるデータ | |
|---|---|
| サイト所有者/ユーザー
ページ速度スコアの計算、重要なCSSブロックの生成などのために、次の情報が使用されます:WordPress.comに接続されたサイトID、ローカルサイトID、サイトのURL。さらに、アクティビティの追跡(詳細は以下を参照)のために、IPアドレス、WordPress.comユーザーID、WordPress.comユーザー名、WordPress.comに接続されたサイトIDとURL、Jetpackのバージョン、ユーザーエージェント、アクセスしたURL、参照元URL、イベントのタイムスタンプ、ブラウザーの言語、国コード、重要なCSS生成用URL、ブロック数、ブロックサイズ、エラーの詳細、生成時間、プロバイダーキー、Boostのバージョン、アクティブなBoost機能が使用されます。Boostキャッシュの設定処理中に発生したエラーの種類を監視し、ユーザーが直面する問題を特定して改善に役立てています。 |
サイト訪問者
なし。 |
| 追跡されるアクティビティ | |
| サイト所有者/ユーザー
WordPress.comに接続されている日時、ユーザー、ウェブサイト、およびプラグインが無効化された日時を追跡します。また、重要なCSSの生成処理や、設定が変更された日時と変更された設定などのアクティビティも追跡します。Jetpack Boostプレミアム購読者については、サイトのパフォーマンスも継続的に追跡します。このデータを使用して、Jetpack Boostダッシュボードの「履歴パフォーマンス」セクションを表示します。キャッシュ機能の切り替えや設定の変更などのアクティビティも追跡します。これらのデータを使用して一般的な利用パターンを特定し、今後の改善に役立てます。 |
サイト訪問者
なし。 |
| 同期されたデータ(続きを読む) | |
| サイト所有者/ユーザー
最適化機能が有効かどうかを示すオプション、最新の速度スコア測定値、および最後に実行した重要なCSS生成の状態を含むオプションを同期します。 |
サイト訪問者
なし。 |
All ブースト articles
- Caching site content with Jetpack Boost Speed up website p…
- Exclude JavaScript files from Jetpack Boost deferral This article expla…
- How the speed score is measured with Jetpack Boost? Jetpack Boost opti…
- Jetpack Boost Cornerstone Pages Improve your site’…
- Jetpack Boost: Image Performance Guide Ensure that the im…
- Optimize Your Largest Contentful Paint (LCP) Images with Jetpack Boost LCP Image Optimiza…
- Site Speed Optimization Beyond Jetpack Boost Jetpack Boost offe…
- Speed up CSS Loading with Jetpack Boost Jetpack Boost help…
- Troubleshooting common issues with Optimize LCP Images within Jetpack Boost If Jetpack Boost i…
- Troubleshooting Concatenated CSS or JavaScript Delivery Methods This article expla…
- Troubleshooting Critical CSS in Jetpack Boost If you encounter a…
- Troubleshooting Jetpack Boost caching issues If you receive an …
- Understand Console Errors in Jetpack Boost Know when you can …
- Using Filters to Customize Cache Parameters in Jetpack Boost In this guide, you…
- Using Performance History in Jetpack Boost The Performance Hi…
- Why my Jetpack Boost speed score changes (and what to do about it) If your speed scor…
- Improve your site speed score with Jetpack Boost A fast website is …
- Improve your site’s performance with Jetpack Jetpack includes p…
- Site Accelerator Jetpack's global C…
- Lazy Loading Images Lazy Images are no…