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. Page Cache speeds up your site by saving pages as static files. These files are quickly served to visitors, reducing load times and enhancing user experience.

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

    JavaScript の保留の詳細については、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 を判断し、サイトのヘッダーに直接組み込みます。
  • Page Cache: This feature stores your website’s pages as static HTML files, bypassing the need for dynamic generation. This means visitors receive pages faster, reducing wait times and improving overall site performance.
  • 不要な 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 ブーストの画像 CDN 機能が画像を自動的により新しいウェブフォーマットに変換するため、質を損なわずに画像ファイルのサイズを小さくできます。

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

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

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

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

評価

2024年4月14日 1 reply
I tried the plugin and I didn't improve website Speed at all. I use DIVI and have optimised everything. I use WP Super Cache. Recently I uninstalled Jetpack and that speeded my website up significantly. I know Jetpack Boost and Jetpack is not the same plugin but I was surprised how much Jetpack slowed the site.
2024年3月25日 1 reply
Da quando ho installato il plugin, diversi conflitti con tutti i temi (generated press, ocean wp, astra ecc.). In particolare nel mio caso non permetteva la visualizzazione del menu su dispositivi mobili, causando la perdita del 90% il numero degli utenti. Tutto è ritornato alla normalità dopo la disattivazione del plugin English: Since I installed the plugin, several conflicts with all themes (generated press, ocean wp, astra etc.). In particular in my case it did not allow the menu to be displayed on mobile devices, causing the number of users to be lost by 90%. Everything returned to normal after deactivating the plugin
2024年3月3日 1 reply
It solved css issues I had since long time
2024年1月25日 1 reply
It does speed up the website with few clicks!
453件のレビューをすべて表示

貢献者と開発者

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

貢献者

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

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

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

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

変更履歴

3.2.2 – 2024-04-02

Added

  • Cache: Ensure cache engine is loading every time the Settings page loads.
  • Cache: Clear cache if Boost module settings are changed
  • Cache: Show notification in site health if cache system isn’t loading.
  • Compatibility: Improved compatibility with SEO plugins for smoother Cloud CSS generation.

Changed

  • Cloud CSS: Optimize regeneration time.
  • Cloud CSS: Update REST API endpoint to be available even if the module is turned off.
  • Performance History: Sanitize graph annotation text.
  • Speed Score: More accurately detect which modules are active when a speed score is requested.
  • General: Only show installation errors on plugins page.
  • General: Updated package dependencies.
  • General: Update getting started and upgrade copies.

これまでの変更履歴についてはこちらを参照してください