Jetpack Boostでサイトの速度スコアを改善しましょう
高速なウェブサイトは不可欠です。訪問者の利便性が向上し、検索エンジンでのサイトの視認性も高まります。このガイドでは、Jetpack Boostを使ってサイトの速度スコアを改善する方法、各設定の機能、期待した改善が見られない場合の対処法を説明します。
サイトの速度スコアが重要な理由
サイトの高速化は単なる技術的な目標ではありません。コンテンツにアクセスしやすくなり、訪問者が長く滞在しやすくなり、サイト全体の操作感も滑らかになります。
Jetpack BoostはGoogle PageSpeedに基づいてパフォーマンススコアを算出するため、サイトのパフォーマンスと改善の余地を確認できます。次の情報が表示されます。
- モバイルとデスクトップの数値スコアと文字による評価が表示されます
- 明確な視覚的なメーターでパフォーマンスレベルを確認できます
- 時間経過に伴うスコアの履歴（有料プランで利用可能）
モバイルのスコアはデスクトップより低くなることがよくありますが、心配はいりません。これは想定されることです。Boostは両方のスコアの改善に役立ちます。
Jetpack Boostによるサイト高速化の仕組み
Jetpack Boostは訪問者が操作するフロントエンドのパフォーマンスに重点を置いています。BoostはCSS、JavaScript、画像、キャッシュを最適化して、ページの読み込みを高速化します。
各機能はWP Admin → Jetpack → Boostからオンまたはオフに切り替えられます。
CSSの読み込みを最適化する
ブラウザーがサイトを読み込むと、まずサイトのCSS（Cascading Style Sheets）が提供するデザインの指示を確認します。これらの指示は、色やフォントサイズなどの表示に関する詳細を定義します。ページを表示する前にブラウザーがこれらすべての指示を解釈する必要があると、読み込みが遅くなることがあります。
Jetpack Boostは、ページの表示部分の読み込みに必要な重要なCSSを特定して最初に読み込むことで、この問題を解決します。これにより、他のすべての要素が読み込まれる前でも、サイトの表示が早く始まります。
次のスコアを改善できます。primer renderizado con contenidoとrenderizado del mayor elemento con contenido。これらはコンテンツがどれだけ速く表示されるかを測定します。
- 無料版では、大きな変更を加えたときに重要なCSSを手動で再生成する必要があります。
- 有料プランでは、必要に応じてBoostがバックグラウンドで重要なCSSを自動的に更新します。
サイトのページをキャッシュする
誰かがサイトを訪れると、WordPressはページを最初から生成します。そのため時間がかかります。
ページキャッシュは、すぐに利用できるページのコピーを保存するため、訪問者を待たせずに済みます。キャッシュにより、サーバーの応答時間を短縮し、再訪問時の読み込みを高速化できます。毎回書き直す代わりに完成したコピーを渡すようなものです。
- Boostでサイトのページのキャッシュを有効にすると、コンテンツをより速く読み込めます。
- このオプションが表示されない場合は、ホスティングプロバイダーによってすでに処理されている可能性があります。
重要でないJavaScriptの読み込みを遅延させる
ポップアップ、共有ボタン、アニメーションなど、サイト上の一部のスクリプトは、ページの読み込み時にすぐ必要になるわけではありません。
Boostでは遅延させることで、これらのスクリプトをメインコンテンツの後に読み込み、ページの読み込みを高速化できます。レンダリング時間の改善や、「JavaScriptの実行時間を短縮してください」といったPageSpeedの警告の解消にも役立ちます。
- 重要でないJavaScriptの遅延読み込みを有効にして、メインコンテンツを優先します。
- 期待どおりに動作しない場合は、特定のスクリプトを除外するか、一時的にこの機能をオフにする必要があります。
JavaScriptとCSSを連結する
サイトが読み込むCSSまたはJavaScriptの各ファイルは、サーバーへの追加リクエストになります。リクエストのたびに、ページ全体の読み込みが遅くなります。
連結すると複数のファイルが1つにまとまり、リクエスト数が減って読み込みが高速化します。これにより、ブラウザーがサイトを処理しやすくなり、Total Blocking Timeを短縮できます。
- JSの連結とCSSの連結を有効にして、サイトのアセットの読み込みを効率化します。
- デザインや機能が壊れた場合は、特定のファイルを除外する必要があります。詳しくはこちら。
画像CDNを使用する
画像は、サイトの速度低下の主な原因になることがよくあります。Boostの画像CDNは、画像のサイズ変更と圧縮を自動で行い、世界中の高速サーバーから画像を配信します。これにより、Cumulative Layout Shiftとページ全体の読み込み時間が改善され、特にモバイルで効果を発揮します。
- 画像CDNを有効にすると、サイト全体のすべての画像が自動的に最適化されます。
- 有料プランでは、画像の品質を調整して自動サイズ変更遅延画像を有効にできます。これにより、必要なときに適切なサイズの画像だけが読み込まれます。
画像品質を調整する
画像品質によって、見た目の忠実度とファイルサイズのバランスが決まります。品質設定を高くすると画像の細部がより保持されますが、ファイルサイズは大きくなります。品質設定を低くするとファイルサイズが小さくなり読み込み時間も短縮されますが、高解像度ディスプレイでは鮮明さが低下する場合があります。
有料のJetpack Boostプランでは、画像品質を調整できます。
- Jetpack → Boostに移動します。
- 画像CDNで、品質調整をクリックします。
- 画像品質スライダーで希望する品質レベルを選択します。JPEG、PNG、WEBP画像ごとに個別に設定できます。また、可逆に設定することもできます。
調整後、Boostダッシュボードから新しい速度テストを実行し、変更によってスコアが改善したか確認します。画像の品質が明らかに低下した場合は、品質設定を上げて再テストしてください。
大きな画像を特定する
CDNを使用していても、サイズが大きすぎる画像はサイトの速度を低下させる可能性があります。画像の寸法を適切に保つことは、速度とレイアウトの安定性の両方に役立ちます。Boostには、特に問題のある画像を見つけるためのツールが含まれています。
- 次の画像パフォーマンスガイドを使用して、スペースに対して大きすぎる画像を検出します。
- 画像エディターまたはオンライン圧縮ツールを使用して、画像を置き換えるかサイズを変更します。
速度スコアがまだ低い場合
Jetpack Boostは多くの技術的な最適化を処理しますが、すべての問題を単独で解決できるわけではありません。Boostのすべての機能を有効にしてもスコアが希望する水準に達しない場合は、サイトのパフォーマンスに他の要因が影響している可能性があります。次に行う一般的な対策をいくつかご紹介します。
- 使用していないプラグインやスクリプトを削除する：余分なコードによってサイトの速度が低下することがあります。
- 軽量なテーマを使用する：一部のテーマは、他のテーマよりも最適化されています。
- Google PageSpeed Insightsでテストする：具体的にどのような問題が指摘されているかを確認できます。
- ホスティングプロバイダーに相談する：サーバーが遅い場合（TTFBが長い場合）は、アップグレードやチューニングが必要になることがあります。
Boostは、クリーンなセットアップと高速なホスティングを組み合わせることで最大限の効果を発揮します。すべてを解決するものではなく、解決策の一部と考えてください。
Jetpack Boostで対応できること
Jetpack Boostは、訪問者に対するサイトの読み込み方法を改善するよう設計されています。フロントエンドのパフォーマンスに重点を置き、速度スコアを向上させる可能性のある、迅速で効果的な変更を行います。具体的には、Boostは次の点に役立ちます。
- CSS、JavaScript、画像の配信を高速化
- 主要なWeb Vitalsを改善：
- FCP（コンテンツ付き初回レンダリング）：画面に最初に何かが表示されるまで
- LCP（最大コンテンツのレンダリング）：メインコンテンツの読み込みが完了するまで
- CLS（Cumulative Layout Shift）：ページの読み込み中にレイアウトがどれだけ安定しているか
Jetpack Boostで対応できないこと
Boostは多くの一般的なパフォーマンス問題に役立ちますが、すべてに対応するわけではありません。対応しない項目：
- サーバーやホスティングに関連する速度低下（TTFBや応答時間の遅さなど）
- 使用していないコード、プラグイン、またはサードパーティ製スクリプト
- Google PageSpeedやLighthouseで完璧なスコアを保証すること
Boostのすべての機能を有効にしても速度スコアが期待より低い場合は、テーマ、プラグインの構成、ホスティング環境など、他の要因が関係している可能性があります。
さらに改善しますか？
当社の高度なサイト速度最適化ガイドでは、Boostで対応できる範囲を超えた、より詳細なテスト、クリーンアップ、改善のための実践的な手順を紹介しています。サイトをさらに微調整する準備ができている場合に、次のステップとして最適です。
JetpackサポートはBoost固有の機能についてお手伝いしますが、一般的なパフォーマンスのチューニングはサポート対象外です。
まだサポートが必要ですか？
Boostが期待どおりに機能しない場合や、機能が有効になっているかどうかわからない場合は、 Jetpackサポートにお問い合わせください。喜んでお手伝いします。
