WP Rocketの設定方法と使い方

ウェブサイトを運用していてアクセスが多くなってくると、気になってくるのがウェブサイトの表示速度。WordPressでサイトを運用していると、多くのプラグインを有効にすることで関連ファイルの読込が増えたり、記事数増加に伴いデータベースが大きくなったり、オリジナルテーマやテーマをカスタマイズして制作した場合によくある表示速度を考えて作られていないなど、色々な問題が出てきます。

表示速度が遅いサイトは直帰率やコンバージョン、SEOに悪影響があるため、パフォーマンス改善は非常に重要な項目です。そこで、改善のためのWordPressプラグインであるWP Rocketのメリットや導入方法などをご紹介します。

表示速度の重要性

デザインや見た目はいいウェブサイトなのに、読み込むまで時間がかかったりページが重い等では、コンバージョンに至らなかったり作成したコンテンツがユーザーに届いていないかもしれません。いくつか例をあげます。

1秒遅れるとCVRが7%落ちる

hubspot.com の記事によると、ページ読込速度が1秒遅れるごとにコンバージョン率が7%落ちるというデータをインフォグラフィックスで紹介しています。

How Page Load Time Affects Conversion Rates: 12 Case Studies [Infographic]

How Page Load Time Affects Conversion Rates: 12 Case Studies [Infographic]

表示速度に比例して直帰率も大きく影響

Googleのレポートによると、ページ読込み速度に応じて直帰率が上がっていくことがわかっています。

• 1秒だった表示速度が3秒になった場合、直帰率が32％高くなる
• 1秒だった表示速度が5秒になった場合、直帰率が90％高くなる
• 1秒だった表示速度が6秒になった場合、直帰率が106％高くなる
• 1秒だった表示速度が10秒になった場合、直帰率が123％高くなる

Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed

https://think.storage.googleapis.com/docs/mobile-page-speed-new-industry-benchmarks.pdf

遅すぎる読込速度はSEOにも響く

Googleは2018年7月からSpeed Updateと呼ばれる、モバイル検索においてページ表示速度をシグナルの要素の一つとして付け足しました。

読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。 そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

Google ウェブマスター向け公式ブログ: ページの読み込み速度をモバイル検索のランキング要素に使用します

実際に影響を受けるのは表示速度が本当に遅いサイトで、影響があるのは全体のごくわずかだとしていますが、WordPressサイトは静的HTMLサイトに比べデータベースとのやりとりが発生したり、PHPの実行があるため表示速度が遅くなりがちです。

表示速度が遅くないか、PageSpeed Insights や GTmetrix といった計測ツールをつかって表示速度を確認しておきましょう。

WordPressサイトにおける表示速度改善

静的HTMLサイトに比べ、WordPressサイトはPHPやデータベースなど、表示速度に影響する部分が多いのが事実。まずは以下のような基本的な部分である

• HTMLやCSS, JavaScript等のファイルのミニファイ化（ファイルの圧縮）
• 画像最適化
• 静的ファイルのキャッシュを活用する

という表示速度に関する部分を改善しましょう。今回のWP Rocketプラグインで可能です。

PageSpeed Insightで改善が期待できる項目

ページ読込時間のチェックツールとしてGoogleが提供しているPageSpeed Insights。チェックツールの一つの目安として利用しましょう。例えば以下のようなPageSpeed Insights項目を改善できる可能性があります。

• レンダリングを妨げるリソースの除外
• テキスト圧縮の有効化
• サーバー応答時間の短縮(TTFB)
• 使用していないCSSを削除してください
• CSSの最小化
• JavaScriptの最小化

それではWP Rocketの説明と設定に移ります。基本的なところとして、サポートの切れた古いPHPバージョンを利用していないか、性能の低いサーバーを利用していないかといった部分は事前に確認しておき、対処が必要でしたら行っておきましょう。

WP Rocketとは

WP Rocketはページ表示速度を目的としてキャッシュ対策やパフォーマンス最適化を行うWordPressの有料プラグイン。高度なスキルがなくても高速サイトを実現できるようにと2013年に作られました。

同様のキャッシュ系プラグインというと

• WP Super Cache
• W3 Total Cache
• WP Fastest Cache

などのプラグインが有名ですが、WP RocketはWordPressプラグインディレクトリに登録されていない有料のプラグインのため、ウェブで検索してもあまり情報は多くありません。海外では有名なWordPress専用ホスティングを展開しているKinstaのブログでは、有料無料問わずキャッシュプラグインとしてWP Rocketが1位に輝いています。

有料のプラグイン

おなじみのW3 Total CacheやWP Super Cacheは無料ですが、WP Rocketは有料プラグイン。記事執筆時点だと$49で1サイトに導入できます。3サイトの場合は$99、無制限に導入したい場合は$249です。また、アップデートサポートは1年間のため、1年後も機能追加やサポート、セキュリティアップデートされ安心して利用するには年単位での更新が必要です。

画像の圧縮や最適なサイズの配信はできない

画像については、画像自体の圧縮だったり、ユーザーの閲覧環境に合わせた最適な画像サイズを表示したりといった機能はありません。それらを行う場合は別のプラグインや方法で行う必要があります。

しかし、画像の遅延読み込み機能があるため、初期ページ読込のHTTPリクエストを抑えることができます。特に画像を多く使っているページには非常に有効です。PageSpeed Insightsで言うところの「オフスクリーン画像の遅延読み込み」の部分。この部分の影響が大きい場合、大きく改善できる可能性があります。

また、Youtubeやiframe等の遅延読み込みにも対応しているため、例えば1ページ内にたくさんのYoutubeを読み込んでいるページにも表示速度改善が見込めます。

非常に優れているプラグインですが、設定は全て英語のため、日本人にとって少しハードルが高い印象です。しかし利用しないのはもったいない。そこで設定は以下に画像つきで設定方法を記します。

WP Rocketの設定方法

それでは、WP Rocketをインストールして設定する方法をご紹介します。

WP Rocket の購入とプラグイン入手

有料プラグインのため、WP Rocketの公式サイトから購入しましょう。

購入完了画面が表示されると購入完了メールが届きます。また、購入完了画面にダウンロードボタンが表示されるので、zipファイル形式のプラグインデータをダウンロードします。

もしダウンロードボタンがない、または画面を閉じてしまった場合は届いたメール内にあるマイページログイン情報にてマイページにログインすれば再度ダウンロード可能です。

WP Rocketのインストールと初期設定

それでは、ダウンロードしたWP Rocketプラグインをサイトへインストールし初期設定を行います。なお、各設定値はサイトにより異なり、絶対というのはありません。各項目を保存後、 デスクトップ/モバイルデバイスでプライベートウィンドウやシークレットモードを使ってサイトを確認し、崩れやエラーなどないか確認しましょう。もし不具合があれば該当するチェックした等箇所を無効にして再度保存し問題ないか確認します。また、レンタルサーバーによっては利用できなかったり不具合がある可能性もあります。必要に応じてバックアップを取ってから作業をしてください。
※WP Rocket 3.4.0.5にて検証

Cache – キャッシュの設定

• Mobile Cache
  • 「Enable caching for mobile devices」はモバイルキャッシュを有効にするかどうか。サイトがレスポンシブ対応していない場合はチェックをオフにする。初期状態でオンになっているのでそのままにする。
  • 「Separate cache files for mobile devices」は例えばスマホ版はJSで追加のナビゲーションを表示している場合など、スマホ専用のコンテンツの読み込みなどがある場合にチェックをいれる。完全レスポンシブでPC/スマホ同一の場合はチェック不要。
• User Cache
  • 「Enable caching for logged-in WordPress users」は会員制サイトやECサイト等でユーザーがログインするサイトの場合にチェックする。通常は不要。
• Cache Lifespan
  • 「Specify time after which the global cache is cleared」はキャッシュを保持する時間の設定。デフォルトで10時間になっており、この時間をこすとキャッシュファイルが削除され、自動的にキャッシュが再構築される。特にこだわりがなければ10時間を設定。

File Optimization – ファイル最適化の設定

• Basic Settings
  • 「Minify HTML」は生成されたHTMLファイルのスペースやタブ、コメントアウトなどを削除し容量を圧縮するかどうか。チェックがオススメ。
  • 「Combine Google Fonts files」は複数のGoogleウェブフォントを組み合わせるかどうか。初期状態でオンになっているのでそのままにする。
  • 「Remove query strings from static resources」はクエリ文字列を変換するかどうか。例えば /style.css?ver=1.0 等の文字列はGTmetrixやPageSpeeed Insight等のツールはクエリ文字列を削除することを推奨しています。WP Rocketの挙動としては、クエリ文字列がないファイル名として元ファイルをコピーしているようです。挙動を踏まえた上で、上記ツールの点数を改善したい場合はチェックをオンにする。
• CSS Files
  • 「Minify CSS files」はCSSファイルのスペースやタブ、コメントアウトなどを削除し容量を圧縮するかどうか。崩れを起こす可能性があるため再確認がある。サイトの挙動を確認し問題なければチェック。
  • 「Combine CSS files (Enable Minify CSS files to select)」はCSSを結合するかどうか。チェックするとすべてのCSSファイルが1つに統合され、HTTPリクエストが削減できる。チェック後に崩れが起きている場合や、HTTP/2を使用している場合はチェック不要。（HTTP/2でもスコアを上げるためにチェックしたほうがいい？）
  • 「Excluded CSS Files」は特定のCSSファイルを除外するかどうか。CSSファイルを結合すると崩れや不具合を起こすことがあるため、その場合は特定のCSSファイルを指定して、除外することでエラーが回避できる。
    設定例： /wp-content/themes/mytheme/style.css
  • 「Optimize CSS delivery」はPageSpeedインサイトの「レンダリングを妨げるリソースの除外」項目に該当する場合、非同期や遅延のCSSを適切に処理してくれる。サイトの挙動を確認し問題なければチェック。CSSが生成できていない場合は、公式サイトで紹介されているツール等を参考にして「Fallback critical CSS」に生成されたCSSを入力する。
• JavaScript Files
  • 「Minify JavaScript files」はJavaScriptファイルのスペースやタブ、コメントアウトなどを削除し容量を圧縮するかどうか。崩れを起こす可能性があるため再確認がある。サイトの挙動を確認し問題なければチェック。
  • 「Combine JavaScript files 」は「Minify JavaScript files」が有効になっているとチェックができる。JavaScriptを結合するかどうか。チェックするとすべてのJavaScriptファイルが1つに統合され、HTTPリクエストが削減できる。チェック後に崩れが起きている場合や、HTTP/2を使用している場合はチェック不要。（HTTP/2でもスコアを上げるためにチェックしたほうがいい？）
  • 「Excluded Inline JavaScript」は特定のインラインJavaScriptコードを除外するかどうか。JavaScriptファイルを統合するとエラーが起こることがあるため、その場合はインラインで問題が起きているJavaScriptコードを指定する。※設定方法参照
  • 「Excluded JavaScript Files」は特定のJavaScriptファイルを除外するかどうか。JavaScriptファイルをミニファイ化や統合するとエラーが起こることがあるため、その場合は問題が起きているJavaScriptファイルを指定する。設定例： /wp-content/themes/mytheme/script.js
  • 「Load JavaScript deferred」はPageSpeedインサイトの「レンダリングを妨げるリソースの除外」項目を改善。JSに対してdefer属性を付け適切に処理してくれる。サイトの挙動を確認し問題なければチェック。チェックすると「Safe Mode for jQuery (recommended)」が表示されるので、基本的にはチェック。

Media – 画像に関する設定

• LazyLoad
  • 「Enabled for images」は画像に対して遅延読込を有効にするかどうか。画面に表示されるときに読み込まれるため、画像表示が少し遅れるがHTTPリクエストを抑えることができる。動きに問題なければチェックがオススメ。
  • 「Enable for iframes and videos」はiframeタグやvideoタグ等に対して遅延読み込みを有効にするかどうか。動きが問題なければチェックがオススメ。ちなみに個別の要素やページを無効にするには公式サイトを参照。
  • 「Replace YouTube iframe with preview image」は上記を有効にすると表示される。ページに多くのYouTubeビデオを設置している場合、読み込み時間が大幅に改善されるため、こだわりが無ければチェックがオススメ。
• Emoji 👻
  • 「Disable Emoji」は絵文字を無効にするかどうか。HTTPリクエストが減らせるため、初期状態でオンになっているのでそのままにする。
• Embeds
  • 「Disable WordPress embeds」はWordPressの埋め込みを無効にするかどうか。WordPressページの場合記事にリンクを貼った際に自動で埋め込みカードとして機能してくれるが、これを無効にするとリクエスト数が抑えられる。埋め込みカードを利用していないのであれば、チェックすることをオススメ。
• WebP compatibility
  • 「Enable WebP caching」はWebP画像をキャッシュするかどうか。WP RocketはWebP画像を生成しないがサポートしている。WebP画像を利用していない場合はチェックしない。

Preload – プリロードの設定

• Preload
  • 「Activate Preloading」はWP Rocketのキャッシュを有効にするかどうか。初期状態でオンになっているのでそのままにする。
  • 「Activate sitemap-based cache preloading」はサイトマップベースのキャッシュプリロードを有効にするかどうか。Yoast SEOやAll-in-one-SEOといったWP Rocketが対応しているサイトマッププラグインを利用している場合はチェックボックスが表示される。それ以外はサイトマップのURLを設定する。
• Prefetch DNS Requests
  • 「URLs to prefetch」はDNSプリフェッチしたいURLを設定。外部ドメインへの参照リンクが多い場合はここにURLを記述します。

Advanced Rules – 詳細設定

• Never Cache URL(s)
  • キャッシュさせないURLを指定したい場合に記述する。1行につき1つとし、 ワイルドカード「.*」を使用して、特定のディレクトリ配下にある複数のURLをアドレス指定することも可能。カスタムログインページやキャッシュが効いて不具合があるページ等はキャッシュから除外する必要がある。また、問い合わせフォームに不具合がある場合も該当ページやサンクスページのURLをここに記載します。
• Never Cache Cookies
  • Cookieを除外したい場合に記述する。例えば、ユーザーのログイン/ログアウト状態を検出するためにカスタムCookieを設定するプラグインを使用してえる場合等。
• Always Purge URL(s)
  • 投稿またはページを更新するたびに毎回キャッシュから削除したいURLがあれば指定。
• Cache Query String(s)
  • WP Rocketは初期状態でクエリ文字列を含むページをキャッシュしない仕様だが、特定のパラメーターを含むページをキャッシュしたい場合は該当のクエリ文字列を入力する。設定方法は公式サイトを参照。

Database – データベースの設定

• Post Cleanup
  • 「Revisions」は投稿のリビジョンを削除するかどうか。データベースが重くなるにつれ読込速度に影響が大きくなるためできれば削除したいが、以前作成した記事へ戻ったり参照する必要がある場合は、チェックはいれずにそのままに。
  • 「Auto Drafts」は投稿の下書きを削除するかどうか。下書きが必要な場合は、チェックはいれずにそのままに。
  • 「Trashed Posts」は削除済みの投稿を削除するかどうか。必要な場合は、チェックはいれずにそのままに。
• Comments Cleanup
  • 「Spam Comments」はスパムコメントを削除するかどうか。特に問題がなければ削除。
  • 「Trashed Comments」はゴミ箱にいれたコメントを削除するかどうか。こちらも削除で問題ありません。
• Transients Cleanup
  • 「Expired transients」は期限の切れたTransients（一時的にデータベースへ保存するためのWordPressが提供するAPI）を削除するかどうか。
  • 「All transients」は全てのTransientsを削除するかどうか。削除してもプラグインやWordPressは必要に応じて自動で作成するようです。
• Database Cleanup
  • 「Optimize Tables」はテーブルを最適化するかどうか。
• Automatic cleanup
  • 「Schedule Automatic Cleanup」は上記の設定を定期的に自動実行するかどうか。毎日、毎週、毎月から選択可能。上記の設定を行ったら、チェックしておくと自動で実行されるのでオススメ。

CDN – コンテンツデリバリーネットワークの設定

WP RocketはAmazon CloudfrontやMaxCDNといったほとんどのCDNサービスに互換性があります。（Cloudflareの場合は別途設定有り）詳細な設定は公式サイトを参照してください。

• CDN
  • 「Enable Content Delivery Network」はCDNを有効にするかどうか。
  • 「CDN CNAME(s)」はCDNプロバイダーから提供されたCNAME（ドメイン）をコピーしてここに入力する。
• Exclude files from CDN
  • CDN経由での提供を除外するURLを記述

Heartbeat – Heartbeat APIについての設定

WordPressには記事を自動保存したり、他のログインユーザーが記事を編集しているときにロックするためなどに定期的にサーバーへリクエストが送られるHeartbeat APIというのがあります。一部のサーバーでは役立ちますが、過負荷や高いCPU使用率を引き起こす可能性があり、サーバーのスペックや環境によっては、パフォーマンスの問題につながる可能性があります。よって、Heartbeat APIのアクティビティを制限または無効にすると、サーバーのリソースを節約できます。一方、完全に無効にするとプラグインやテーマに影響を与える可能性もあります。

• Heartbeat
  • 「Control Heartbeat」はHaertbeat機能を制限または無効にするかどうか。制御する場合はチェック。
• Reduce or disable Heartbeat activity
  • 「Behavior in backend（管理画面）」「Behavior in post editor（記事エディタ）」「Behavior in frontend（フロントエンド）」に対して、「Do not limit（制限しない）」「Reduce activity（頻度を1分ごとに1ヒットから2分ごとに1ヒットへ変更）」「Disable（無効）」のそれぞれを設定可能です。

Add-ons – アドオン設定

• One-click Rocket Add-ons
  • 「Google Tracking」はGoogleアナリティクスを使っていると読み込まれるJavaScriptのブラウザキャッシュを改善する機能。PageSpeed Insight等でブラウザキャッシュを活用する項目の点数改善につながります。Googleタグマネージャを使ってアナリティクスを導入している場合は対象外。
  • 「Facebook Pixel」はFacebookピクセルを導入していると読み込まれるJavaScriptのブラウザキャッシュを改善する機能。こちらもPageSpeed insight等でブラウザキャッシュを活用する項目の点数改善につながります。PixelYourSite等一部のプラグインを使ってFacebookピクセルを設定している場合は対象外。
  • 「Varnish」はVarnishを導入しているサーバーを利用している場合にオンにする。
• Rocket Add-ons
  • 「Cloudflare」はCDNの一つであるCloudflareの設定を行います。詳細な設定は公式サイトを参照。ちなみに当サイトもこの機能を使っています。
  • 「Sucuri」はSuciriが提供するWebsite Firewall Application(WAF)を利用している場合、この機能を有効にする。詳細設定は公式サイトを参照。

Image Optimization – 画像最適化の設定

Imagifyというプラグインをインストールし設定する項目です。このプラグインはWP Rocketと同じ会社であるWP Mediaが作成していて、画像圧縮やリサイズ、WebP変換などの画像最適化のプラグインです。

Tools – その他の設定

• Export settings
  • WP Rocketの設定ファイルをエクスポート。
• Import settings
  • WP Rocketの設定ファイルをインポート。
• Rollback
  • 問題があったときに以前のバージョンへ復元することができる。

設定完了後、キャッシュ等のクリア

設定は以上です。完了後に念の為キャッシュ等を削除しましょう。以下の各ボタンを押します。

• Remove all cached files: 全てのキャッシュを削除
• Start cache preloading: キャッシュのプリロードを開始
• Purge OPCache content: OPCacheコンテンツを除去
• Regenerate Critical CSS: CSSファイルを再構築

トップページや下層ページを確認し、問題や不具合があれば設定箇所を対応します。また、PageSpeed InsightやGTmetrixでスコアがどう変わったのか確認してみましょう。

細かい設定が必要

以上、WP Rocketの設定方法でした。初心者には設定方法や用語が少し難しいかもしれません。サイトにより各設定値は異なるため細かいチューニングが必要ですが、初期設定だけ終えればあとは大きな変更は基本的にないため、一つ一つクリアしていっていただきたいと思います。

WP Rocketは常にバージョンアップしていっており、例えば次世代画像フォーマットのWebPへの対応は3.4で新しくリリースされた機能です。今後GoogleやSEOの動向によって変化していくものでしょう。

WP Rocketという強力な武器にって、快適なパフォーマンスの一助になれば幸いです。