Jetpack ブースト – サイトのスピード、パフォーマンス、クリティカル CSS

説明

Jetpack ブーストでページのパフォーマンスを最適化し、WordPress サイトを高速化しましょう。 ワンクリックの最適化を簡単に有効化し、Core Web Vitals を高めることができます。

高速なサイトが次のような特徴を持つのをご存じでしたか。

  • Google の検索結果の上位に表示されるようにします。
  • バウンスレートを改善します (人々のサイト滞在時間を長くします)。
  • コンバージョン率を向上させます。

WordPress サイトのパフォーマンスをパワーアップさせ Core Web Vitals スコアを高めるワンクリックの最適化を活用して、サイトのパフォーマンス向上とスピードアップを実現し、検索エンジンの上位に表示されるようにします。

Core Web Vitals を向上させると Google の検索結果の上位に表示されやすくなります。 サイトの高速化は SEO の改善、バウンスレートの低減、eコマースのコンバージョン率の向上にもつながります。

  • Largest Contentful Paint (LCP): 読み込みのパフォーマンスを測定します。 LCP を改善すると、サイトの読み込みスピードが改善します。
  • First Input Delay (FID): 応答性を測定します。 ユーザーエクスペリエンスを向上させるには、ページの FID が低い必要があります。
  • Cumulative Layout Shift (CLS): 視覚的な安定度を測定します。 CLS の低減はユーザーエクスペリエンスの向上に役立ちます。

パフォーマンスモジュール

世界有数の成果をあげているサイトが使用しているのと同じテクニックで自分のサイトを最適化しましょう。

サイトのパフォーマンスの向上に使用する各テクニックはモジュールとしてパッケージ化されており、これを有効化して試すことができます。

現在このプラグインでは6つのパフォーマンスモジュールを利用できます。

  1. CSS 読み込みの最適化では、ホームページ、投稿、ページのクリティカル CSS を生成します。 特にモバイル端末を使用する読者向けに、コンテンツを画面に表示するまでの時間を大幅に短縮できます。

    クリティカル CSS の生成の詳細については、web.dev を参照してください

  2. 不要な JavaScript の保留では一部のタスクをページ読み込みの後に移動するため、重要な視覚情報が表示されるまでの時間が短縮され、サイトの読み込みが速くなります。

    JavaScript の保留の詳細については、web.dev を参照してください

  3. 画像の遅延読み込みでは、ユーザーが見ることのできる画像のみを読み込みます。 画像は、ユーザーのスクロールに合わせ、ページに表示される直前に読み込まれます。 このシンプルな最適化により、ウェブサイトを高速化し、ホストと顧客の帯域幅を節約できます。

    画像の遅延読み込みの詳細については、web.dev を参照してください

  4. 画像ガイドはサイトの画像を最適化するすべての人にとって必須の機能です。 このガイドを使用すると、サイトの画像を適切なサイズと寸法に調整できます。これはユーザーエクスペリエンス、ページのスピード、サイトのランキングを改善するうえで非常に重要です。 ガイドに示されたヒントとベストプラクティスに従うことで、画像ファイルのサイズを縮小し、サイトを高速化できます。 この機能の詳細と、これを活用してサイトのユーザーエクスペリエンスを高速化・円滑化する方法については、サポートページを確認してください。

  5. 画像 CDN の使用により、サイトは自動的にサイズ変更された画像を最新のウェブフォーマットで Jetpack の世界規模のコンテンツ配信ネットワークから直接送信できます。

    画像 CDN の詳細については、web.dev を参照してください

  6. CSS と JS の連結と縮小では、JavaScript と CSS のリソースを組み合わせてサイズを縮小し、サーバーへのリクエストの数とサイズを減らすことにより、コンテンツの読み込みを高速化します。

    ファイルサイズの縮小の詳細については、web.dev を参照してください

サイトを更新するたびにクリティカル CSS を手動で生成したくないとお考えですか ? 面倒な作業はお任せください。自動化されたクリティカル CSS で、サイトが更新されるたびに自動的にクリティカル CSS を再生成してパフォーマンススコアを更新します。 アップグレードにより、専用のメールサポートも利用できるようになります。

Jetpack より💚を込めて

これは始まりにすぎません。

私たちは Jetpack ブーストの機能の増加と改善に尽力しています。 皆様の考えやアイデアをお知らせください。

プラグインの初期調査をサポートし、プロジェクト全体を通して弊社チームと連携してくださった XWP チームにも深く感謝いたします。

スクリーンショット

  • Jetpack ブーストによるクリティカル CSS 生成
  • Jetpack ブーストによるスピード改善

インストール

  1. Jetpack ブーストをプラグインディレクトリからインストールし、有効化します。
  2. Jetpack 接続を有効化する
  3. パフォーマンスモジュールを1つずつオンにしてパフォーマンススコアの変化を確認する

FAQ

Jetpack ブーストはどのようにして作成した WordPress のサイトの速度を上げますか ?

Jetpack ブーストは、WordPress のサイトからブラウザーにデータが送られる方法を少し変更して、ブラウザーにコンテンツがより速く表示されるようにします。

Jetpack ブーストには独立した機能が搭載されており、その数は増え続けています。それらは個別に有効化でき、サイトのパフォーマンスを向上させます。 次の機能が含まれます。

  • CSS の読み込みの最適化: この機能は、サイトの重要なコンテンツを迅速に表示させるために最も重要な CSS を判断し、サイトのヘッダーに直接組み込みます。
  • 不要な JavaScript の保留: この機能は、サイトのメインコンテンツが読み込まれた後に、サイトの表示に必須とは見なされないすべての JavaScript を読み込ませます。
  • 画像の遅延読み込み: この機能を使うと、スクロールして表示するまでサイトの画像が表示されないようになります。こうすることで、ブラウザーにユーザーが最初に見るコンテンツを最初に読み込むことができます。
  • 画像 CDN: この機能は、画像サイズを訪問者の画面に適したサイズに自動的に変更し、最新の画像フォーマットに変換し、Jetpack の世界規模のサーバーネットワークから送信します。
  • JS の連結 : この機能は JavaScript リソースのサイズを縮小し、自動的に組み合わせてファイル数を減らすため、サイトを少ないリクエストでより速く読み込めるようになります。
  • CSS の連結: JavaScript の連結と同様に、この機能は CSS ファイルのサイズを縮小し、より少ないリクエストで読み込めるようにします。

Jetpack ブーストを使うと速度はどれくらい上がりますか ?

サイトのパフォーマンスは複雑で、いろいろな要因によって左右されます。 そのため、Jetpack ブーストがそれぞれのサイトにどの程度の影響を与えるかを正確に予測するのは困難です。

通常、表示速度が遅いほど、Jetpack ブーストがパフォーマンスに与える影響は大きくなります。 「Jetpack ブーストをインストールして使用しただけで、表示速度が最大25ポイント向上した」というユーザーレポートも複数届いています。

ただし、パフォーマンスはさまざまな要因によって左右されます。Jetpack ブーストがサイトにちょっとした悪影響を及ぼすこともあります。

Jetpack ブーストをインストールし、ご自身でお試しいただくことをお勧めします。 表示速度を計測できるツールが搭載されているので、サイトにどのような効果があるかをご確認ください。

Jetpack ブーストを使うと重要ではない CSS も保留できますか ?

Jetpack ブーストの「CSS の読み込みの最適化」機能を有効にすると、重要ではない CSS は自動的に保留されます。

「CSS の読み込みの最適化」機能は、サイトでページを迅速に表示するために必要な最も重要な CSS ルールを特定し (一般的には「クリティカル CSS」と呼ばれています)、メインのコンテンツが読み込まれるまで他の CSS ルールを保留します。

Web Vitals とは何ですか ?

Web Vitals は Google がサイトでのユーザーエクスペリエンスを詳しく把握するために使用している指標です。 Web Vitals スコアを改善すると、サイトでのユーザーエクスペリエンスも改善されます。

Web Vitals の詳細については、web.dev を参照してください

Jetpack ブーストプラグインによって Core Web Vitals はどれくらい向上しますか ?

個々の Core Web Vitals は、新しいサイト訪問者の画面にサイトが読み込まれて表示される速度に関係しています。

Jetpack ブーストは WordPress のサイトからブラウザーにデータが送られる方法を少し変更して、コンテンツがより速く読み込まれるようにします。 結果的に Core Web Vitals スコアが上がります。

たとえば、「CSS の読み込みの最適化」機能を使用すると、最も重要な CSS ルールができるだけ迅速にユーザーのブラウザーに送られるようになります。これにより、First Contentful Paint (FCP) スコアと Cumulative Layout Shift (CLS) スコアの両方を上げることができます。

このプラグインには Jetpack が必要ですか ?

Jetpack ブーストは Jetpack ブランドの一部ですが、Jetpack プラグインの実行は不要です。 これは Jetpack から独立したプラグインであり、今後もそうであり続けます。

このプラグインはどのようなサイトのパフォーマンスも向上させることができますか ?

このプラグインはさまざまな方法でサイトのパフォーマンスを向上させます。ほとんどすべての WordPress サイトのパフォーマンスが、このプラグインによって向上します。

ただし、すでに適切な最適化が行われているサイトで Jetpack ブーストを使っても、大きな変化は見られないかもしれません。

Jetpack ブーストにはサイトの表示速度を計測できるツールが搭載されています。ぜひお試しいただき、その効果をご確認ください。

機能しているかどうかを知るにはどうすればよいですか ?

サイトはすべて異なるため、各モジュールがパフォーマンスにもたらすメリットもサイトごとに異なる可能性があります。 そのため、パフォーマンスモジュールを1つずつ有効化してパフォーマンスの改善を測定することをお勧めします。 パフォーマンスの改善を無料で測定できるツールが数多くあります。

Google PageSpeed の指標は Jetpack ブーストのダッシュボードに組み込まれています。

Jetpack ブーストの速度最適化機能は安全ですか ?

はい、Jetpack ブーストは任意の WordPress のサイトで安全に試すことができます。

Jetpack ブーストはサイトのコンテンツを変更するのではなく、コンテンツがユーザーのブラウザーに送られる方法を変更します。こうすることで、コンテンツがより速く表示されるようになります。

その結果、他のプラグインとの互換性がない場合、Jetpack Boost のすべての機能を安全にオフにすることができます。

他の速度最適化プラグインと比べると、Jetpack ブーストは何が違うのですか ?

WordPress の速度最適化プラグインは、ユーザーにとって複雑で不透明な場合があります。 多くの場合、説明の少ないチェックボックスの列があり、ユーザーが行った各変更や選択の影響を測定するツールは含まれていません。

Jetpack Boost は使いやすさに焦点を当てています。表示速度測定機能も搭載されており、選択した内容の影響をすぐに測定できます。

これは固定ページのキャッシュに使用できますか ?

はい。 WP Super Cache や W3 Total Cache などのプラグインをインストール済みの場合、Jetpack ブーストはパフォーマンスにさらなるメリットをもたらします。 キャッシュがクリアされるまで Jetpack ブーストによる改善は反映されませんのでご注意ください。

Jetpack ブーストを使えば、大規模なデータベースがあるサイトでも短時間で読み込めますか ?

現在 Jetpack Boost は大規模なデータベースの最適化には対応していません。 ただし、皆様のパフォーマンスを向上させるための新しい方法を常に探っていますので、今後も楽しみにしていてください。

Jetpack ブーストは画像の最適化には対応していますか ?

大きな画像のあるサイトのパフォーマンスについては、Jetpack Boost の遅延読み込み機能で向上させることができます。遅延読み込みとは、スクロールして表示されるまで画像を読み込ませない機能のことです。

また、その画像 CDN 機能が画像を自動的により新しいウェブフォーマットに変換するため、質を損なわずに画像ファイルのサイズを小さくできます。

Jetpack ブーストは他のキャッシングプラグインや速度最適化プラグインと互換性がありますか ?

一部の例外を除き、Jetpack Boost はキャッシュプラグインや速度最適化プラグインと一緒に実行しても問題はありません。 ただし、ガイドラインとして、複数の最適化プラグインで同じ機能を有効にすることはお勧めしません。

たとえば、2つのプラグインが必須ではない JavaScript を延期しようとすると、それらが互いに競合し、サイトでの表示の問題が発生する可能性があります。

互換性の問題が発生した場合は、お知らせください。 Jetpack Boost サポートフォーラムにいつでもご連絡ください。

評価

2023年11月29日
I don't know what we would do without the Jetpack Boost plugin. It keeps us safe, efficient, and so much more.
2023年11月21日 1 reply
I don't know which is the best tool for regenerating CSS, but this one works very well
2023年11月16日
I am building a hobby website with only tree pages en two messages jet. I don't want to sell something and I am not looking for visitors; if somebody thinks my website is too slow then they are free to switch to another one. So, I am thinking to get rid of the boost-plugin, because it seems way to heavy for me. And I will never pay (almost € 10 p/m) for this plugin.
422件のレビューをすべて表示

貢献者と開発者

Jetpack ブースト – サイトのスピード、パフォーマンス、クリティカル CSS はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Jetpack ブースト – サイトのスピード、パフォーマンス、クリティカル CSS” は27ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Jetpack ブースト – サイトのスピード、パフォーマンス、クリティカル CSS” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

2.2.0 – 2023-10-31

Changed

  • General: Indicate full compatibility with the latest version of WordPress, 6.4.
  • Getting Started: Improved how features are sorted in the getting started page.
  • Performance History: Improvements in design.

Deprecated

  • Lazy Images: Added deprecation notice.
  • Lazy Images: Force disable feature to avoid conflict with new version of Gutenberg and WordPress 6.4.

Fixed

  • Concatenate JS/CSS: Fixed generating invalid html ID values for concatenated stylesheets.
  • Image CDN: Update quality slider UI.

See the previous changelogs here