爆速!WordPressの表示速度を上げるならWP-Rocket!

WordPressで表示速度を上げることは、ユーザーエクスペリエンスが向上し、ユーザーの滞在時間も伸び、そして他のリンクをクリックする可能性も高まるので回遊率も上がりますよね。

私もいろいろな無料プラグインを試しましたが、結局行きついたのは有料プラグインのWP-Rocketです。

個人的に、上位のアフィリエイターやブロガーは、こういったことにお金を惜しまないと思います。もちろん私も有料テーマに有料プラグインをいくつか入れています。(私の収益などはここで紹介しています)

年間で合計1万円もかかってないと思いますが、これだけの小額投資で見返りは大きいですね。

 

WP Rocket

 

WP-Rocketとは

WP Rocketはキャッシュ系プラグインで、細かな設定ができます。

WP Rocketの設定

主に設定するのはCACHE(キャッシュ)、File Optimization、Media、Preload(プリロード)です。

見ての通り英語表記なので取っ付きにくいと思うかもしれませんが、詳細は後述しているのでやってみてください。

私はいくつかのサイトを運営していますが、あまり速度が変わらないものもあれば不具合が出たものもあったので、現在はこのサイトのみに使用しています。

全員が同じ状況になるか分かりませんが、参考までに私の状況を記載します。

サイト テーマ 使用状況 改善度
本サイト Generatepress 〇 〇
海外移住サイト JIN × △
育児サイト JIN × △
音楽サイト The Thor × ×

おそらくCoCoonなどのシンプルなサイトに合うと思いますが、JINやThorなどの「至れり尽くせり機能満載テーマ」には合わないんじゃないかなと思います。(使っているプラグインや設定によって変わります)

 

WP Rocket 返金ポリシー

WP Rocketは14日以内なら100%返金してくれるのですが、私もJINで試して改善があまりなかったので返金してもらいました。その後、海外テーマのGeneratepressに変更して試したら100点満点の改善度だったので使用しています。

 

価格

WP rocketの価格

価格は1年契約で

  • サイト1つ・・・49USドル
  • サイト3つ・・・99ドル
  • 無制限サイト・・・249ドル

になり、無制限の場合は、Webサイトを作成代行などをしている人に合います。と言うのも、クライアントのサイトにWP Rocketをダウンロードして使っても良いからです。(2021年12月31日現在)

 

WP Rocketの効果

それでは、私のサイトをPageSpeed Insightで計測した結果です。

PageSpeed Insightで計測した結果 モバイル<モバイル>

PageSpeed Insightで計測した結果 デスクトップ<デスクトップ>

PageSpeed Insightで計測した結果 TOPページ<TOPページ・モバイル>

最初の2つはサブディレクトリのランディングページで、モバイルが95点・CLS 0、デスクトップが96点・CLS 0、最後のスクショはTopページのモバイルで98点・CLS 0です。

こちら「WordPressテーマJINでCLSを改善するためにやった対処法」でも話したように、CLSが0と言うのは必須と言ってもいいくらい重要な項目です。

ちなみに日によってはスコア100点の日もあります。

 

注意点

他のどのキャッシュ系プラグインとも同じだと思いますが、WP Rocketを入れただけで改善されるものもあれば改善されないものもあります。なので、導入後は自分で必要な設定、不必要な設定をいろいろと組み合わせて対処する必要があります。

また、WP Rocketのサイトは日本語もありますが、サポートはすべて英語です(だと思います)。フォーラムや送られてくるメールもすべて英語なので、英語が苦手な人はGoogle翻訳などを使うとやり取りしやすいと思います。

 

WP Rocketの設定方法

サイトごとに設定が変わりますが、参考までに私の設定も紹介します。

必ず1つの項目を設定したら保存→ブラウザのキャッシュを削除、PageSpeed Insightで確認、ブラウザのプライベートモードで確認→問題なければ次の設定を始めます。

この作業をしないと、どれが不具合を起こしているか分からなくなるので、後々大変です。

また、キャッシュ系のプラグインなので、時間がある時+読者が少ない時間帯に設定をした方が良いです。

思い通りの結果が出るまで2-3時間くらいかかるかもしれません。その後、数日は様子見をした方が良いです。

また、Preloadなどを設定するとプラグインで読み込みを開始し、終わるまでに時間がかかるのですぐに結果が反映されるわけではありません。設定を変更後、細かく確認が必要です。

キャッシュ

WP Rocketの設定方法 キャッシュ

項目 訳 私の使用状況
Enable caching for mobile devices スマホやタブレットの読者もキャッシュするかどうか 〇
Separate cache files for mobile devices モバイルのキャッシュを分けるかどうか ×
Enable caching for logged in WP user WPにログインしているユーザー(主に自分の事)のキャッシュを保存するか ×
Specify time after which the global cache is cleared キャッシュの保存期間 10時間

キャッシュは基本的に再訪した読者への表示速度が速くなるので、初回の人には影響がないですが、キャッシュしていた方がいいと思います。

お使いのサイトがレスポンシブになっている場合は、モバイルキャッシュは分ける必要はありません。昔の様に、モバイルサイトとデスクトップサイトの2種類のページがあるわけじゃないので。もし、未だに分けている人がいたら、ここは使った方がいいですが、その前にレスポンシブにした方がいいと思います。

キャッシュの保存期間は長い方が良いですが、頻繁に更新する人は短い時間、あまり更新しない人は12時間や24時間でもいいと思います。更新したときにキャッシュをクリアしたら、変更が反映されます。

 

File Optimization

この項目を設定するときは1つずつ設定をして保存、そしてPageSpeed Insightで確認、ブラウザのプライベートモードで確認。問題が無ければ次の項目を設定していきます。

また、例えばA~Eの項目があるとして、ABCDの設定は問題なし、でもEを設定すると不具合が発生。その時にどうしてもEを設定したい場合はいろいろな組み合わせを試してみるしかありません。使っているテーマやプラグイン、その他仕様によって状況が変わるので、人に聞いても分からないことがあります。

WP Rocketの設定方法 File Optimization

 

項目 効果 私の使用状況
Minify CSS File CSSファイルを小さくする(スペースやコメントを削除) 〇
Combine CSS Files CSSのファイルを1つにまとめHTTPリクエストを減らす 〇
Exclude CSS Files 上記2つの設定から除外したいCSSファイルがあれば設定 ×
Optimize CSS Delivery レンダーブロックを減らす 〇

WP Rocketの設定方法 File Optimization

項目 効果 私の使用状況
Minify JavaScript files JavaScriptのファイルを小さくする 〇
Combine JavaScript files JavaScriptファイルを連結する ×
Exclude JavaScript Files 上記2項目の設定から除外したいJavaScriptがあれば記載 ×
Load JavaScript defered JavaScriptを延期する。ロード時間が短くなる 〇
Exclude JavaScript Files JavaScript延期から除外したいファイルを記載 〇
Delay JavaScript Files JavaScriptを遅延する。読者がその場所に来るまでJavaScriptを読み込まない 〇
Exclude JavaScript Files JavaScript遅延から除外したいファイルを記載 〇(初期設定のまま)

 

Media

WP Rocketの設定方法 Media

 

項目 効果 私の使用状況
Enable for image 画像遅延 〇
Enable for iframe and videos 動画遅延(Youtubeやビデオを投稿する人は使用した方が良い) ×
Excluded images or iframe 上記設定から除外したいビデオなどを記載 ×
Add missing image dimensions CLSが悪くならない 〇

画像遅延はWPの標準機能になっているので使う必要はないのですが、時々遅延になっていないので私は使用しています。

 

Preload

WP Rocketの設定方法 Preload

項目 効果 私の使用状況
Acivate Preloading 記載リンクのキャッシュを自動で取得するので、読者が回遊するときに次のページの表示が速くなる 〇
Acivate sitemap-based cache Preloading サイトマップに記載されたリンクのキャッシュをプレロード 〇
Sitemaps for preloading 自分のサイトのサイトマップを記載 〇
Enable lonk preloading 記載リンクのプレロード 〇

WP Rocketの設定方法 Preload

 

項目 効果 私の使用状況
Prefetch DNS Requests もしGoogleフォントやYoutubeなどのサードパーティ製サービスを使っている場合は、登録しておくとファイルが速く読み込まれます ×
Preload Fonts 使っているフォントを登録しておくと本門者のブラウザがフォントを探しやすくなる(=読み込み速度アップ) ×

 

まとめ

私はWP Rocketの設定に2-3時間かかりましたが、人によっては簡単に設定が終わる人もいるかもしれません。

他のプラグインとの兼ね合いもあるし、テーマとの相性もあるので個人差がありますが、返品もできるので試してみた方が良いと思います。

 

WP Rocket

 

他にもこういった記事があるので、併せてどうぞ。

・最速サーバー!ConoHaWingの設定方法

・エックスサーバーでWebPを設定する方法

・おすすめWordpressテーマ