WP Rocketチュートリアル：ウェブサイトの速度を最適化する

WP Rocketとは何か？

WP Rocketは、WordPressのさまざまなキャッシュ最適化のソリューションとして生まれたプラグインです。今日ではそれ以上のもので、キャッシュだけでなく、ウェブサイトの読み込みパフォーマンス最適化に関連するほぼすべてを最適化できます。

その影響を実証するため、WP RocketありとなしでのSEOcrawl自社サイトのパフォーマンスをご覧ください：

なぜWP Rocketを使うのか？

**WPO**最適化には他の代替手段があり、誰もが好きなものを使う自由があると述べましたが、私たちの場合はWP Rocketに特別な好みがあります。チェックボックスのクリックで動作する直感的なインターフェース、キャッシュ設定とリソース読み込みのための多数のオプションにより、WP Rocketはすべての選択肢の中でお気に入りとなっています。

WP Rocketメインメニュー

WP Rocketのインストールに問題がなかったと仮定して、そのインターフェースと最適化のために利用できる様々なオプションの説明を始めましょう。ダッシュボードタブをクリックすると、次の画面が表示されます：

ウェルカムメッセージと、最初は触らずに残しておけるオプションがありますが、ここで説明しておきましょう。

マイアカウント

WP Rocketを購入されている場合、「View my account」ボックスをクリックするとWP Rocketユーザーページに移動し、ユーザープロフィール、データ、請求情報など、すべてを確認・完了できます。

RocketCDN

RocketCDNは、WP Rocketが比較的最近提供しているCDNサービスです。目的は、プラグインの外でソリューションを探さなくても最高のパフォーマンスを達成するために必要なツールを提供することです。CloudflareやAmazon CloudFrontなど、非常に人気があり同様に効果的なCDNサービスもあります。

マイステータス

このオプション内には有効化できる2つのスイッチがあります：

• ›

  Rocket Tester： これはWP RocketのBETAバージョンをテストするための改善プログラムです。メールで連絡を取る必要があります。

• ›

  Rocket Analytics： WordPressのパフォーマンスデータを開発チームと匿名で共有することに同意します。これはWP Rocketの改善に役立ちます。

ここではあまり言うことはありません。これは個人的な決定で、パフォーマンスに影響しません。

WP Rocketのキャッシュ設定

設定オプションに入る時です。まずキャッシュから始めましょう：

プラグインの2番目のタブで、提供されるキャッシュオプションを確認できます。WP Rocketではページキャッシュを最適化していること、そして今見るように、ログインユーザー向けのオプションもありますが、このオプションには注意が必要であることを覚えておきましょう。

モバイルキャッシュ

通常、モバイルと言うときにはタブレットも含みますが、今回はモバイルデバイスのみについて話しています。WP Rocketはuser agentを通じてスマートフォンから閲覧していることを検出します。

このオプションは常に有効化します。一般的に、デスクトップとモバイルのデザインは異なるため、レスポンシブ版がない場合を除き、このオプションは常に有効化されます。明確にするために、なぜ同じデザインなのに2つのキャッシュバージョンが配信される必要があるでしょうか？ つまり、モバイル版がない場合、このキャッシュを別扱いにしたくないですよね？

ここに例外が加わります。そのバージョンでのみ読み込まれるリソースや要素を持つモバイル版がある場合、ファイルは別々に保存されます。

例：

• ›モバイルでは、デスクトップ版にはないJSを読み込む広告がある。

この場合、モバイル用のファイルを別々に保存することになります。

ユーザーキャッシュ

ユーザーキャッシュは、ログイン状態で閲覧するユーザー向けにWP Rocketが提供するオプションです。

このオプションを有効化すると、各ユーザー向けに個別化されたキャッシュバージョンを提供できます。最善の方法は、ユーザーがログインする場合に有効化することですが、どのページがキャッシュされ、どれがされないかに特に注意を払う必要があります。ユーザーが個人データ（例えば銀行情報）を入力する場合、それをキャッシュに保存すると法的問題を引き起こす可能性があるからです。

ページをキャッシュから除外する方法は？

このような問題を避けたい場合、最善の方法は除外したいページに直接行き、WP Rocketのオプション（サイドバーまたは下部）で**「never cache this page」**を選択することです。

キャッシュの有効期間

このセクションでは、生成されるキャッシュファイルの保持期間を指定するだけです。つまり、WP Rocketはあなたのページのバージョンを保存するファイルを生成し、このファイルが、ユーザーがウェブサイトにアクセスしたときに配信されるものになります。

プロセスマネージャー（CRON）を通じて、指定された期間を超えて生成されたファイルは削除され、新しいものが作成されます。

留意すべき事項

WP Rocketはすでに以下のような特定のプロセスを考慮してキャッシュファイルを削除し新しいものを生成します：

• ›

  新しい投稿、ページ、カテゴリー、タクソノミーの生成、または編集

• ›

  新しいモジュール、ウィジェット、またはウェブサイトの任意の要素の生成と編集

• ›

  フロントエンドに影響するWP Rocket設定が変更された時。

それ以外に、キャッシュファイルの保存はサーバー上のスペースを使用し、このスペースは限られていることに留意してください。WP Rocketからキャッシュをクリアして更新し、もう不要なファイルが残らないようにすることもおすすめです。

時間に関しては、デフォルト値のままで構いません。

WP Rocketのファイル最適化

キャッシュ設定を簡単に確認した後は、ファイル最適化に取り組む時です。ファイル最適化は、HTMLの読み込みとレンダリングを軽くするために行います。この最適化にはどのように取り組めるでしょうか？

いくつかの方法があります：

• ›

  ファイルの容量を減らす

• ›

  不要なファイルを削除する

• ›

  必要に応じてファイルを段階的に実行する

CSSファイル

CSSファイルはウェブサイトのビジュアル部分を担当します。WordPressに形、色、スタイルを与えるスタイルシートです。この点で、魅力的なデザインが最適化されたデザインとは限りません。デザイナーがCSSを構築する際、一連の基本的な最適化ルールに従っていない可能性があるからです。

スタイルシートで通常遭遇する最も一般的な問題には：

• ›

  重いCSSファイル

• ›

  そのスタイルを使わないページに読み込まれるCSSファイル

• ›

  適切に構築されていないCSSファイル

• ›

  多すぎる外部CSSの読み込み

• ›

  外部スタイルシートを取り込むための@importの使用

つまり、優れたデザインの最適化には推奨されないが、よく使われる慣行が世の中にたくさんあります。しかし、WP Rocketが提供するものに移りましょう。

CSSファイルのminify

このオプションは、スペースと改行を削除することによってCSSファイルの容量を減らすことを目的としています。WP Rocketはチェックボックスを有効化することで実装します。

SEO Aliveのコツ：施策を実行する際は、すべて正しく動作しているかを確認するためにウェブサイトを読み込んでみるのが良いでしょう。 ブラウザのシークレットモードで行ってください。

このプロセスは、minifier.orgツールから取得した次の画像で表されています。

CSSファイルの結合

この機能は、複数のCSSファイルを読み込まずに1つだけにするために、あるCSSのコードを別のCSSに「コピー＆ペースト」するようなことを行います。

テストを続けることをおすすめします。テーマがどう開発されたかに大きく依存するからです。特定の種類のページでのみ読み込まれるCSSファイルがある場合、そのコードがすべてのページで単一のファイルに読み込まれるのは望ましくありません。

理想的なのは、URLが使用するコードを読み込むことです。チェックボックスをオンにし、GTMETRIXのようなツールでテストして、読み込み速度が改善されたかを確認してください。

CSSファイルを結合する利点は、サーバーへのリクエストを減らせることです。

CSS読み込みの最適化

WP Rocketは、読み込み速度最適化のためにさまざまなGoogleツールが提供する推奨事項を考慮して更新されました。これらのツールでの経験がすでにあれば、**「Eliminate render-blocking resources」**警告に遭遇したことがあるはずです。このチェックを有効にすることで、CSSが非同期に読み込まれるようにし、CSSが読み込みをブロックするのを防ぎます。

つまり、CSSファイルをダウンロードしなければならないときにHTMLレンダリングが停止せず、このファイルがバックグラウンドで読み込まれるため、読み込みプロセスが停止することがありません。だから有効化する価値があります。

JSファイル（JavaScript）

JavaScriptは、HTMLを処理する際にGoogleが直面した大きな問題の一つでした。この種類の言語をあまり深く掘り下げずに、WP Rocketはこの種のファイルを最適化するための5つの基本的なアクションを設計しました。見てみましょう！

jQuery Migrateを削除

jQuery Migrateは、jQuery 1.9以前のバージョン用に開発されたjQueryコードとの互換性を可能にするJavaScriptライブラリです。このライブラリはWordPressにネイティブに付属していますが、実用上はほとんど使用されません（一部のプラグインでは必要な場合があります）。

このアクションでは、不要なリクエストと使用されないJSの読み込みを避けたいです。無効化して、ウェブサイト内を閲覧して、すべてが正しく動作しているかを確認してください！

JavaScriptファイルのMinify

CSSファイルで説明したのと同じことが、JSファイルにも適用され、JSファイルのサイズがわずかに減少します。

JavaScriptファイルの結合

CSS最適化モジュールに似た別のアクションです。これらのチェックボックスを有効化するときは、すべてが以前と同じように動作しているかを確認する必要があることを覚えておいてください。

JavaScriptファイルを遅延読み込み

このアクションのチェックは、パフォーマンスに2つの改善を加えます：

• ›

  JSの読み込みによってHTMLのレンダリングが停止するのを防ぐため、「defer」属性をJSに追加します。このアクションでは、並列にダウンロードされ、HTMLの処理の最後に実行されます。

• ›

  初期レンダリングをブロックするJSを移動します。

WP Rocketは、このタイプの有効化が問題を引き起こす可能性があると警告しているため、ページを正しく表示するために不可欠な要素の読み込みの問題を回避するためのセーフモードを導入しています。

JavaScript実行の遅延

ユーザーがページを操作するまで、必要不可欠でないJavaScriptの実行を遅らせるもう一つのオプションです。このアクションはあまり重要ではないように思えますが、読み込みをより素早く行うための時間を稼げます。インタラクションは、クリック、スクロール、マウスの動きなどがあり得ます。

メディアの最適化

このタブでは、WPO最適化の最初のステップでの主要な要素の最適化を扱います。画像、動画、iframe、そしてWordPressに組み込まれた、その機能性が少なくとも疑わしい要素について話しています。

Lazyload

読み込み速度の最適化において必要不可欠なアクション。**Lazyload**機能は、画像、動画、iframeのような要素を、表示に不可欠になるまで読み込まないようにします。

例を挙げましょう。スクロールするにつれて、画像が読み込まれます。30枚の画像が一度に読み込まれた場合、特にユーザーが最初はそれらを見ていない場合、このページの読み込みがどうなるか想像してみてください。

Emoji

ブラウザはすでに独自の絵文字を含んでいるので、このチェックを有効化しなければ、行われるリクエストを節約できます。私のおすすめは有効化することです。

埋め込みコンテンツ

他の人があなたのサイトからコンテンツを埋め込むのを防ぎ、また、許可されていない他のサイトからコンテンツを埋め込むのを防ぎます。このJSで行われるリクエストが減ります。

WebPの互換性

WebPは、ウェブ上の24ビットグラフィックの非可逆圧縮のためにGoogleが2010年頃に導入した比較的新しいフォーマットで、これらのリソースの提供を改善して読み込みを速めます。

現在、すべてのブラウザがそれをサポートしているわけではないので、このフォーマットで作業する際にはユーザーがどのブラウザを使用しているかを注意して把握する必要があります。WebP画像で作業する場合は、このオプションを有効化してください。

キャッシュプリロード設定

Preload機能を理解するには、WP Rocketのキャッシュファイルがどのように生成されるかをよく理解する必要があります。

ユーザーが私たちのサイトのページを初めて訪問した時、そのページがキャッシュされ、その後のユーザーに配信されるキャッシュファイルが生成されます。キャッシュが期限切れ（私たちが決定した時間）になり、キャッシュバージョンが削除されたとき、または私たち自身がすべてのURLのキャッシュをクリアしたときも同じことが起こります。

Preload Cache

Preloadオプションを有効化すると、最初のユーザーでも私たちのサイトのより高速なバージョンを利用できるよう、事前にキャッシュされたバージョンを読み込むことになります。このアクションはサイトマップのリンクを通じて行われるため、サイトマップが必要です。

サイトマップは、私たちのサイトのURLが表示される生成されたファイルです。「Rank Math」や「Yoast」のようなプラグインを使えば、簡単に生成できます。Rank Mathでサイトマップを作成する方法はここでお見せします。

Preload Links

これはWP Rocketが最近のバージョンで組み込んだ機能です。目的は「ユーザーが次に訪問するページ」の読み込みを先取りすることです。カーソルをホバーすると、ユーザーがリンクをクリックする場合に備えてページがプリロードされます。

WP Rocketは、サイト内でのナビゲーションの流動性（ユーザーエクスペリエンス）を改善するために「Flying Pages」のような特定のプラグインがすでに実装していたこの機能を採用しました。とはいえ、これは読み込み時間を改善する要因ではなく、WPO監査ツールの指標で改善が見られるわけではありません。

DNSリクエストのプリロード

DNSリクエストのプリロードは、頻繁にリクエストするYouTube、Facebook、フォント、iframeなどの第三者リソースを使用する場合に非常に役立ちます。

インターネットで何らかの接続を行うとき、DNSリクエストが行われ、それを解決してサーバーに送信する必要があります。これには時間がかかりますが、必要なリソースのURLをWP Rocketが提供するこのボックスに追加すれば、改善できます。

例で見るように、ドメイン名*//youtube.com //facebook.com*を使用するだけで構いません。

GTMETRIXが示すように、DNS解決にはおよそ20〜120ミリ秒かかり、このプロセスが完了するまでブラウザはホストから何もダウンロードしません。

フォントのプリロード

フォントのプリロードには、フォントをダウンロードしてサーバーに置くという前段階が必要です。そこにあれば、キャッシュプリロードで行ったのと同じアクションを行え、フォントファイルのはるかに高速なバージョンを作成し、ユーザーがページに接続したときに提供できます。

フォントがホストされたら、使用しているフォントの正確なパスをWP Rocketに指定します。ページに異なるフォントを多用しないことをおすすめします。それぞれ異なるダウンロードが必要だからです。また、サーバーへのリクエストはフォントの異なるバリエーションごとに行われることに注意してください。説明しましょう：

• ›

  太字フォント --> 1リクエスト

• ›

  下線付きフォント --> 1リクエスト

• ›

  大文字フォント --> 1リクエスト

WP Rocketの高度なルールの設定

これらのURLを決してキャッシュしない

その独自性のため、キャッシュバージョンを保存したくない特定のURLがあります。このタブから、WP Rocketは決してキャッシュしたくないURLのリストを入力できます。

これらのCookieを決してキャッシュしない

WP RocketはURLによる以外のもう一つのコントロールツールを提供しています。多くのプラグインは独自のCookieで動作したり、特定のユーザーを識別するために独自のものをインストールしたりすることもできます。これらの小さなファイルを使用する方法は多数あります。

WP Rocketを使えば、ユーザーのブラウザにダウンロードされたCookie IDで識別されるURLのキャッシュを停止でき、キャッシュしたいURLのタイプをさらにカスタマイズできます。

これらのuser agentを決してキャッシュしない

user agentは、HTTPプロトコル内の記述フィールドで、リクエストを行うデバイスに関する情報を提供するために使用されます。この情報を知ることで、これらのuser agentsにキャッシュページが配信されるのを防げます。

例えば、Googleのuser agentの一つはGooglebotなので、ウェブのこの部分で指定すれば、ウェブサイトにアクセスするたびにキャッシュなしでページを提供します。

これらのURLを常にパージする

このオプションは、例えば更新時にキャッシュファイルを常に削除したい種類のURLにとって非常に興味深いものです。

例えば、スポーツ結果のURLがあって、結果が頻繁に更新されるためユーザーにキャッシュバージョンを配信したくありません。

これらのクエリ文字列をキャッシュ

クエリ文字列は、URLを介してウェブページにリクエストを行う際に送信されるデータです。

通常、クエスチョンマーク「?」記号で識別され、一般的なルールとしてWP Rocketはこの種のURLをキャッシュしません。このオプションでは、強制的にキャッシュさせることができます。

WP Rocketでのデータベース設定

記事全体で繰り返し言及してきたように、WP Rocketは単なるキャッシュプラグインではなく、ウェブサイトの読み込み速度を最適化するためのプラグインになりました。この設定セクションでは、データベースの最適化をさらに深く掘り下げることができます。

WordPress内でコンテンツを処理するにつれて、有用ではなく、私たちのウェブサイトのパフォーマンスを損なう他の種類の情報が生成されます。これに対して、WP Rocketはより徹底的なクリーンアップを行うためのツールを提供します。

投稿のクリーンアップ

画像で見るように、データベース内に私たちが興味のないスペースを取っている可能性のある3つの要素があります。コンテンツを更新すると、以前のバージョンが保存されます。編集中のものの自動下書きも生成され、破棄された投稿もあります。

これらの要素を削除すれば、データベース内のスペースを解放できます。

コメントのクリーンアップ

この部分は重要です。データベースが「スパム」コメントでいっぱいになることがあるからです。だからWP Rocketはこの種の要素をクリーンアップするオプションを導入しました。

Transients（一時データ）のクリーンアップ

WordPressで作業しているとき、特定の一時的な要素が生成されますが、それらは再生成されるため、問題なく削除できます。

データベースのクリーンアップ

この点と次の点の両方について、データベースのバックアップを取ることをおすすめします。何も起こらないはずですが、データベース内でのアクションを深く掘り下げることには常にリスクがあるので、バックアップを取っておくのは悪くありません。

このチェックを有効化すると、データベーステーブルのクリーンアップが実行されます。このプロセスは自動化できます。

WP RocketでのCDN設定

WP RocketでCDNを設定する方法を深く掘り下げる前に、CDNとは何か、なぜ使用されるのかを説明したいと思います。

CDNとは何か？

CDN（Content Delivery Network）は、ユーザーへのコンテンツ転送速度を改善することを目的としたサービスです。これを行うために、世界中の異なるサーバーにコンテンツ配信ネットワークを作成し、ユーザーのリソースリクエストの時間を短縮します。つまり、ユーザーがブラジルにいる場合、CDNは実際のウェブホスティングサーバーよりもユーザーに近いサーバーにホストされたコンテンツを提供します。

WP Rocketページから取得した画像

CDNはどのように動作するか？

ウェブサイトのキャッシュコピーを保存する他のサーバーを通じて動作し、ユーザーがこのコンテンツ／リソースを要求すると、より近いサーバーが転送を実行します。

これらの種類のサービスは、画像、音声、動画、または多くの訪問など重いコンテンツがある場合に非常に有用です。最初に訪問が少ないウェブサイトを持っている場合、この点について心配する必要はありません。

RocketCDN

WP Rocketは、月額7.99ドル、7ユーロ未満でCDNを契約する可能性を提供します。

CDN

CDNを契約すると、それを使用するための情報が提供されます。提供される要素の1つがCNAMEですが、提供されない場合は取得できます。

CNAMEは、ソースドメイン名をターゲットドメイン名にマッピングするDNSレコードの種類です。

この機能を使用するには、CNAMEを指定し、どのファイルに使用するかを伝えるだけです。

CDNからファイルを除外

予想通り、次のオプションは、CDNを通したくないファイルを除外することです。

WordPress Heartbeat関数の最適化

WordPress heartbeatは、WordPressのバックエンドとフロントエンド、サーバー間の通信を確立するための制御データ転送です。この種のプロセスは、WordPressで遅延を経験する理由の一つになり得ます。

制限できるアクションには：

• ›

  投稿エディタでの自動保存とリビジョン。

• ›

  WordPress管理パネルでの通知。

• ›

  誰が編集しているかについての情報。

• ›

  リアルタイムデータ。

WordPressが正しく動作している場合、この時点で何もすることをおすすめしませんが、遅延に気付いた場合は、異なるオプションでアクティビティを制限してみることができます。

WP Rocketアドオンの設定

Google AnalyticsやFacebookのスクリプトのような特定の要素は、設定のこの部分でそれらを有効化するだけで、キャッシュバージョンを取得し、パフォーマンスを改善できます。このアクションは、Pagespeedなどの読み込み速度監査で通常示される「Leverage browser caching」のリクエストの一つに直接応えるものです。

画像の最適化

画像の最適化は、その複雑さから独自のガイドを持つほどのプロセスです。WP Rocketは、これらのリソースで作業するための独立したプラグインを提供します。WP Rocketから「Free」バージョンのダウンロードにアクセスできます。

WP Rocketツール

WP Rocketの設定は、再びこのプロセスに時間を費やさなくて済むよう、保存してインポートできます。「Rollback」、つまりインストールされたバージョンの観点で戻るオプションも提供します。

WP Rocketチュートリアル

このWP Rocketガイドを締めくくるために、プラグイン自体が、実行される様々なアクションとそれらの実行方法に関する情報を提供する一連のビデオを提供しています。

結論

ご覧の通り、WP Rocketはキャッシュプラグイン以上のものです。ウェブサイトの速度とパフォーマンスを最適化する完全なスイートが手元にあるので、あとは様々なオプションを試すだけです。WordPressを飛ばすのに何を待っているのですか？

WP Rocketをご存知でしたか？ このガイドでパフォーマンスを改善できましたか？ ご質問はありますか？ コメントでお待ちしています！