ダッシュボード(Dashboard)
ダッシュボードでは現在使っているライセンスと有効期限を確認できます。後でキャッシュの初期化が必要なときは、右側で[Cache Files]の削除とプリロード、[優先順位要素]の削除をクリックして進められます。また、ページ右側の[マイアカウントを見る]や下部の[サポートを依頼]から、問題があればWP Rocket Supportを受けられます。
Rocket Insights Score — 追跡中のページのパフォーマンススコアとLCP・TBT・CLS・TTFBを表示します。
キャッシュファイル — すべてのキャッシュファイルを消してプリロードを実行します。
使用CSS — 使用CSSファイルが削除されます。
優先順位要素 — 自動遅延レンダリング、重要な画像、外部ドメインへの事前接続、フォントのプリロードに関する保存済みの最適化をリセットします。
Rocket Insights
Rocket InsightsはGTmetrixでページを検査し、パフォーマンススコアとLCP・TBT・CLS・TTFBを表示するタブです。検査するページのURLを追加でき、[Performance Monitoring]をオンにすると決めた間隔で自動検査します。
Content Delivery(CDN)
RocketCDN FreeはWP Rocketのライセンスに含まれており、自分で選んだ3ページを10か所のエッジ拠点から配信します。サイト全体に適用するには月 $ 7.99 のRocketCDN Proに上げることになり、エッジ拠点は100か所以上に増えます。
別のCDNを使う場合は、[Other CDN]にCDN会社が設定したCNAMEレコードを入力します。ここはCloudFlare CDN以外のCDNの設定だと考えてください。CloudFlare CDNはアドオンで有効にできます。
ファイル最適化(File Optimization) · CSS Files
ファイル最適化は、CSSファイルとJavaScriptファイルのサイズを減らし、読み込む順序を変えるタブです。キャッシュファイルを作るとき、そのページの CSS と JavaScript にも一緒に適用されます。
下のツリーでは、サーバー側キャッシュの サイトキャッシュ に当たります。
💾 キャッシュ
├── サーバー側キャッシュ
│ ├── サイトキャッシュ
│ │ ├─ 静的HTMLファイルに変換(CSS、JavaScriptなど)
│ │ └─ ウェブキャッシュの保存場所
│ │ ├─ メモリキャッシュ(RAM)
│ │ └─ ディスクキャッシュ(HDD/SSD)
CSSファイル最適化とJavaScriptファイル最適化の2つの機能に分かれます。
① CSSファイル
ⓐ CSSファイルの最小化
↳ CSSファイルの最小化は空白とコメントを取り除いてファイルサイズを減らします。適用後に見た目が崩れるプラグインがあれば、そのCSSファイルを除外リストに追加します。
除外リストには、下のようにパスを1行に1つずつ書きます。
wp-content/plugins/Plugin/(.*).css
ⓑ CSS配信の最適化
↳ CSS配信の最適化はレンダリングを妨げるCSSをなくす機能で、CSSファイルの最小化と一緒にオンにできます。[未使用CSSの削除]と[CSSの非同期読み込み]のどちらか一方の方法しか選べません。
Remove Unused CSS(未使用CSSの削除)
WP Rocketは[未使用CSSの削除]を推奨しています。ページごとに使わないCSSを除いてページサイズとHTTPリクエストを減らし、適用後に見た目が崩れる要素は[CSS safelist]にファイル名・ID・クラスを書いて削除対象から外します。
Load CSS Asynchronously(CSSの非同期読み込み)
[CSSの非同期読み込み]は最初の画面に必要なCSSを別に作り、残りのCSSを非同期で読み込みます。[未使用CSSの削除]で問題が起きたときに代わりに使います。
ファイル最適化(File Optimization) · JavaScript Files
② JavaScriptファイル
JavaScriptファイルの設定は、JavaScriptファイルの最小化、JavaScriptファイルの結合、JavaScriptの遅延読み込み、JavaScript実行の遅延の計4つに分かれます。
JavaScript ファイルの最小化
ファイルサイズ削減
JavaScript ファイルの結合
HTTPリクエスト削減
JavaScript 遅延読み込み
レンダリングブロックの解消
レンダリングを妨げるJavaScriptファイルがHTMLの解析後に実行されるようにします。
JavaScript 実行の遅延
ユーザー体験の改善
スクロールやクリックなどユーザーの操作があるまでJavaScriptファイルの読み込みを遅らせます。
ⓐ JavaScriptファイルの最小化
空白とコメントを取り除いてファイルサイズを減らします。適用後に訪問者側のページで一部の機能が動かなければ設定を解除します。
ⓑ JavaScriptファイルの結合
複数のJavaScriptファイルを1つにまとめてHTTPリクエスト数を減らします。HTTP/2を使うサイトには推奨されず、[JavaScript実行の遅延]をオンにするとこのオプションは選べません。有効にした後にエラーが出たら、またオフにすればサイトは元に戻ります。
ⓒ JavaScriptの遅延読み込み
JavaScriptの遅延読み込みは、HTMLの解析が終わるまでJavaScriptの実行を遅らせ、レンダリングを妨げるJavaScriptをなくします。 First Contentful Paint(FCP) と Largest Contentful Paint(LCP) を改善します。
どのように動くのですか?
<script>タグにdefer属性を追加し、HTMLの解析を妨げないようにします。こうするとウェブブラウザがJavaScriptファイルをダウンロードしている間も他のHTML要素をレンダリングし続けられ、ユーザーが感じる ページの読み込み速度が速くなります。
JavaScriptの遅延読み込みはいつ使いますか?
主に、ウェブページの最初の画面を表示するのに必須ではないJavaScriptファイルに使われます。
ファイル最適化(File Optimization) · Delay JavaScript execution
ⓓ JavaScript実行の遅延
JavaScript実行の遅延は、訪問者がスクロールやクリックなどページを操作するまでJavaScriptファイルを読み込まない機能です。
ワンクリック除外はWP Rocketが使いやすさのために用意した機能で、よく使われるプラグイン・テーマ・サービスにチェックを入れると、そのJavaScriptファイルを実行遅延の対象から外します。
ワンクリック除外 で標準で除外できる項目は次のとおりです。チェックボックスで選べるようにしてくれる機能は、実際には他のキャッシュプラグインではなかなか見られない機能です。
除外項目に該当するものがなければ、除外する内容を自分で設定できます。
https://platform.twitter.com/widgets.js
https://connect.facebook.net/en_US/fbevents.js
https://pagead2.googlesyndication.com/pagead/js
https://cdnjs.cloudflare.com/
https://stackpath.bootstrapcdn.com/
https://code.jquery.com/
[Safe Mode for Delay JavaScript Execution]は、サイト内部のスクリプトを遅延対象からすべて外すセーフモードです。
メディア(Media)
メディアは画像が主な設定ですが、YouTubeやGoogleフォントの設定も適用できるタブです。
① 遅延読み込みと② 画像サイズを設定します。
遅延読み込みは画像・iframe・動画を画面に入ったときに読み込み、HTTPリクエスト数を減らします。[Replace YouTube iframe with preview image]をオンにすると、YouTube動画はまずプレビュー画像で表示されます。
[Add missing image dimensions]は画像に抜けているwidth・height属性を補い、レイアウトのずれを減らします。
③ フォントでは、[Preload fonts]は最初の画面で使うフォントを先に読み込み、[Self-host Google Fonts]はGoogleフォントを自分のサーバーにダウンロードして配信します。
プリロード(Preload)
キャッシュのプリロードはすべてのキャッシュプラグインに当てはまる事項です。訪問者が来る前に投稿やページなどのコンテンツをプリロードしておくことで、訪問者がWordPressの特定のページを開いた時点ですでに速く読み込まれます。
プリロードをオンにすると、WP Rocketがサイトマップを探してすべてのURLを保存し、キャッシュを前もって作っておきます。[Enable link preloading]は訪問者がリンクにマウスを乗せるとそのページを先にダウンロードします。
WP Rocketが実際にキャッシュをプリロードしているか確認した結果です。おおよそ多いときで1分あたり30個ほど、最初にキャッシュを作るときはさらに多くのプリロードキャッシュを作ります。
プリロード以外に、個別の投稿のキャッシュを消せる機能はサイト運営でとても便利です。
高度なルール(Advanced Rules)
個人的には、キャッシュの有効期間を9時間に設定したこと以外は特に追加設定をしませんでした。
既定値は10時間で、問題が定期的に起きるなら10時間以下に減らすよう画面に案内されています。
キャッシュの有効期間
キャッシュファイルの有効期間を設定
キャッシュファイルがサーバーから自動で削除される時間を指定します。
キャッシュに含めないURL
特定ページのキャッシュ除外
機密情報(ログイン/ログアウトページ)を含むURLをキャッシュから除外します。
キャッシュに含めないクッキー
特定クッキーによるキャッシュ除外
特定のクッキーがブラウザに設定されたとき、ページのキャッシュを止めます。
キャッシュに含めないユーザーエージェント
特定ユーザーのキャッシュ除外
指定したユーザーエージェント(User Agent)の訪問者にはキャッシュしたページを見せません。
常に削除するURL
キャッシュの強制無効化
投稿やページを更新するたびにキャッシュから常に削除されるURLを指定します。
キャッシュするクエリ文字列
特定URLパラメーターのキャッシュ
特定のGETパラメーター(例:?utm_source=google)を含むURLを強制的にキャッシュします。
データベース(Database)
データベースタブは、リビジョン・自動下書き・ゴミ箱の投稿、スパム・削除されたコメント、一時データを消してテーブルを最適化します。整理した内容は元に戻せないため、実行前にデータベースをバックアップします。
[Schedule Automatic Cleanup]をオンにすると、決めた間隔で自動整理します。
Heartbeat
WordPress Heartbeatは、WordPressがウェブブラウザとサーバーの間で 定期的に通信 するようにするAPIです。心臓が鼓動するように、このAPIは定期的な信号を送ってサーバーとの接続を保ちます。
WordPressはこのHeartbeat APIを使っていくつもの機能を実現します。たとえばWordPressエディターでユーザーが投稿を編集しているとき、他のユーザーが同じ投稿を編集できないようにする
ロック 機能を実現するのに使われます。
また、投稿作成中のリアルタイム自動保存や、管理ダッシュボードでのリアルタイム通知にもHeartbeatが使われます。
[Reduce activity]は1分に1回送っていた信号を2分に1回に減らします。完全にオフにすると、このAPIを使うプラグインやテーマが動かなくなることがあります。
アドオン(Add-ons)
ユーザーキャッシュ
ログインしたユーザーそれぞれに合わせたキャッシュファイルを作ります。実際、個人的には使っていません。
Varnish
WP Rocketがキャッシュを削除するとき、Varnishのキャッシュも自動で一緒に削除して 最新のコンテンツを保ちます。
WebP互換性
WebP画像に対応したブラウザ向けにキャッシュを別に作ります。WP RocketがWebP画像を作ってくれるわけではなく、IMAGIFYのようにWebPを直接配信するプラグインを使うならオンにする必要はありません。
Cloudflare
WP RocketからCloudflareのキャッシュを管理し、最適な設定を有効にできます。
Sucuri
WP Rocketがキャッシュを削除するとき、Sucuriのキャッシュを自動で同期して削除します。
アドオン(Add-ons) · Varnish
① Varnish Cache
Varnishキャッシュが設定されたサーバーでは、通常ApacheやNginxサーバーの前段に配置されて使われます。
Varnish Cache はウェブアクセラレーターで、動的なウェブサイトやAPIのリクエストに対する応答をキャッシュしてバックエンドサーバーの負荷を減らし、ページの読み込み速度を向上させます。
WP Engine , Flywheel、Cloudways または WPXでホスティングしている場合 WP Rocketは自動で環境を検知してVarnishアドオンを有効にします。
SiteGround , Kinsta、Pressable では、WP Rocketのキャッシュは当該サーバーのキャッシュとすでに同期されているため、このオプションを有効にする必要はありません。.
Varnish Cacheはウェブサイトの
最終成果物(HTML 、画像など)を保存 し、ユーザーに直接届ける方式です。OpCacheとRedisはウェブサイトを構成する
内部のデータやコードをキャッシュ する方式なので性質が異なります。
アドオン(Add-ons) · Cloudflare
② Cloudflareの設定
Cloudflareを使っているなら有効にしてWP Rocketと連携でき、既存の他のCDNと一緒に使えます。
Cloudflareを有効にするときは、アカウントのメール、Global APIキー、ゾーンIDを入力して連携します。
画像最適化(Image Optimization)
ウェブサイトの読み込み時間の50%は画像に使われると言われています。 Imagify のインストールを勧めるページで、無料プランは月20MB(画像約200枚)まで圧縮し、WebPまたはAVIFに変換できます。
ツール(Tools)
[ツール]はWP Rocketで設定した内容をエクスポートする機能を提供します。
テストのために設定をエクスポートしてから再びインポートでき、設定ファイルをPCにダウンロードしてアップロードすれば設定を復元できます。
新しく追加された[MCP Server]は、AIツールをWP Rocketにつなぐ項目です。
[Rollback]は問題が起きたときに以前のバージョンへ戻し、[Update Inclusion and Exclusion Lists]は毎週自動で受け取る互換性リストを手動で更新します。
チュートリアル(Tutorials)
キャッシュプラグインは、どれだけ説明が丁寧でも、どれだけ性能が良くても、使い方を100%活用するのは実際には難しい点が多くあります。
プラグインページでそれぞれのチュートリアルを提供しているため、ユーザーはWP Rocketをインストールして基本設定とテストをした後も、継続的に性能を上げる機会を持てます。
当社のプラグイン(Our Plugins)
WP Rocketは多くのWordPressサイトで使われているプラグインなので、WP Rocketと衝突せずに使えるとアピールするプラグインがかなりたくさんあります。 実際、キャッシュ機能の設定中に起きるエラーはすべてのプラグインに共通することなので、適切なところで折り合いをつける必要があります。
group.oneという会社に
WP Media が2021年4月に買収され、その後2023年5月に
RankMath が買収されました。つまりWP Rocket、IMAGIFY、RankMathは同じ会社の製品で、互いの互換性が良いと言えます。