【WordPress】最強の高速化プラグイン(有料)WP Rocketの設定方法

eyecatch-wordpress-wp-rocket

すいみん

こちらのCGメソッドの記事では最強の高速化プラグイン(有料)WP Rocketの設定方法を紹介します!キャッシュ系のプラグインをつかうなら安定して高速化できるものを選びましょう!
この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

WP Rocketとは?

WordPressを高速化するのプラグインです。

この「WP Rocket」というプラグインでは世界で一番売れているといっても過言がないくらい有名な有料のキャッシュプラグインです。

いままで無料の「WP Fastest Cache」を使っていたのですが、Googleアナリティクスの計測が狂ったり、モバイルだけのCSSが不安定だったりして問題を抱えていたので、いっそのこと有料キャッシュプラグインにしてみました。

WP Fastest Cache

ちなみにこのプラグインを知ったきっかけは、ブログ技術にも詳しい著名なブロガー、マクリン(@Maku_ring)さんもこのプラグイン導入していたことがきっかけです。

WP Rocketのプラグインの料金と購入方法


下記の公式サイトからクレジットまたはPayPalで購入できます。

「WP Rocket」は下記の公式サイトから購入できます。

参考 Pricing & Purchase - WP RocketWP Rocket

通常価格は$49(¥5,720です)

WP Rocketのライセンスの有効期限は?

プラグインは1年分です。
自動更新で次は$34.30(¥4,010)程度で次の1年を更新できます。

2年分のライセンスを更新すると半年間無料がついてきて、$68.6(¥8,020)で2年半分のライセンスになります。

参考 My Account - WP RocketWP Rocket

WP Rocketの割引クーポンの入手方法は?

年末のブラックフライデーで35%OFFになるので、もし導入するならそのタイミングがベストです。
他にも夏やハロウィンも配るときがあるそうなので、メール登録しておくと良いです。

あとは同会社の「Imagify」という画像プラグインをいれると20%引きになるようです。

参考 WP Rocket Coupons & Promo Codes | WordPress Caching PluginWP Rocket

WP Rocketの返金方法は?

14日以内であれば返金可能です。
下記のお問合せで返金リクエストを送信しましょう

参考 Contact Us - WP RocketWP Rocket

WP Rocketのドキュメントを確認したい

下記の公式ドキュメントサイトで全機能を確認できます。
参考 WP Rocket Knowledge Basedocs.wp-rocket.me

WP Rocketのインストール方法

  1. 支払いが終わるとプラグインのダウンロードボタンが表示されます。
  2. プラグイン「wp-rocket_3.4.4.zip」をダウンロードしましょう
  3. WordPressの管理画面からプラグイン>プラグインのアップロード
  4. ファイルを選択で先のZIPファイルを選択して、インストール
  5. インストールが終わったら、「有効化」ボタンを押しましょう

WP Rocketの設定

まずはじめに、すでにキャッシュ等高速化系のプラグインを導入している場合はプラグインを無効化しておきましょう!

今回は「WP Fastest Cache」と「Autoptimize」を停止しておきました。

それでは設定> WP Rocketから各種の項目を設定していきます。

CACHE(キャッシュ)

静的ファイル(基本的には.htmlと.gz)をキャッシュする「コンテンツキャッシュ」とブラウザーキャッシュはプラグインをアクティブにするだけで、自動で稼働されます。

なので特に設定しませんでした。
※「Separate cache files for mobile devices」はチェックしません。 PCとモバイルでキャッシュを分けて保存するのですが、最近のテーマはレスポンシブが多いので不要のはずです。

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


ここの設定は「Autoptimize」と競合するので停止してしまいましょう。
先に設定を言うと全てにチェックを入れました。

Basic Settings(HTMLの最適化)

  1. Minifiy HTML(余計な空白やコメントを削除)
  2. Combine Google Fonts files(Googleフォントを結合してリクエスト回数を減らします)
  3. Remove query strings from static resources(余計なクエリ文字列を削除します)

CSS Files(CSSの最適化)

  1. Minify CSS files(余計な改行や空白を削除)
  2. Combine CSS files(CSSの結合)
  3. Optimize CSS Delivery(レンダリングをブロックするCSSを無くします)

JavaScript Files(JavaScriptの最適化)

  1. Minify JavaScript files(余計な改行や空白を削除)
  2. Combine Javascript files(Enable Minify Javascript files to select)(JavaScriptの結合)
  3. Load JavaScript deferred(遅延ロード)
  4. Safe Mode for jQuery(Recommnended)(jQueryロード設定(推奨))
  5. Delay Javascript execution(Javascriptの遅延読み込み)

https://twitter.com/cg_method/status/1303830210811367424?s=20

注意
アナリティクスの計測「google-analytics.com/analytics.js」と「ga(‘」と
アドセンス表示「ga( ‘」「adsbygoogle」
の記述だけは削除しています。

Mediaの設定(メディア)

LazyLoad(遅延ロード)

  1. Enable for images(画像の遅延ロード)
  2. Enable for iframes and videos(iframeと動画の遅延ロード)

Emoji(絵文字)

  1. Disable Emoji(絵文字を無効に)

Embeds(埋め込み)

  1. Disable WordPress embeds(埋め込みの無効化)
    ※記事にURLを記述するとカード化するのですが、機能を使ってない場合はチェックを入れてもOKです。
    Twitterの埋め込みをしているのでチェックを入れませんでした。

WebP compatibility(WebPの互換性)

  1. Enable WebP caching
    ※当サイトは画像はWebPを使用(EWWW)しているので、チェックを入れてます

Preloadの設定(プリロード)

Preload(プリロード)

  1. Activate Preloading(プリロードの有効下)
  2. Activate sitemap-based cache preloading(サイトマップからキャッシュプリロードを有効化)
    サイトマップのURLを入力します。
https://www.cg-method.com/sitemap.xml

Prefetch DNS Requests(DNSリクエストのプリフェッチ)

外部ファイルの読み込み高速化している場合はURLを記述しておきましょう。
当サイトは読みこみしてないので記述してません。

Advanced Rules(高度なルール)

特に記述してません。なにか例外を作りたい場合は記述しておきましょう

  1. Never Cache URL(s)(URLをキャッシュしない)
  2. Never Cache Cookeis(Cookieをキャッシュしない)
  3. Never Cache User Agent(s)(ユーザーエージェントをキャッシュしない)
  4. Always Chche Agent(s)(常にURLを削除)

Database(データベースの設定)


余計なデータを削除してくれます。

Post Cleanup(記事のクリーンナップ)

下書き等消したくないので、ここはすべてチェックを外してます。
1. Revisions(リビジョン)
2. Auto Drafts(下書き)
3. Trasher Posts(ゴミ箱)

Comments Cleanup(コメントのクリーンナップ)

  1. Spam Comments(スパムコメント)
  2. Trashed Comments(ゴミ箱のコメント)

一時データのクリーンナップ

  1. Expired transients(期限切れのトランジェント)
  2. All transients(すべてのトランジェント)

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

  1. Optimize Tables(テーブルの最適化)

自動クリーンナップ

別のプラグインできれいにしているので、一旦こちらはOFFにしました。
1. Schedule Automatic Cleanup(クリーンナップの自動化)

CDN

CDNは導入してないので、この項目は調整していません。

※CDNとはコンテンツ・デリバリ・ネットワーク(Content Delivery Network)の略です。見る人によってキャッシュを使ったWEB表示をわけるのでWEBサイトの表示速度が上がります。

Heartbeat(ハートビート)

サーバー負荷は気にしていないので、この項目は調整していません。

Heatbeat

  1. Control Heartbeat(ハートビートの制御)

※Heartbeat(ハートビートはブラウザとサーバの接続を維持をしてくれます。WordPressでは標準で搭載されていて、Heartbeat制御することでサーバー負荷を下げることができます。

Add-ons(アドオンの設定)

Google TrackingやFaceBook Pixelの設定がワンクリックでできるアドオンが入っています。

今回は設定しませんでした。

Image Optimizetion(画像の最適化)

同社の画像圧縮プラグイン「Imagify」の紹介です。

無料だと縮小できる枚数に制限があるので見送りました。

Tools(ツール)

設定の保存などができます。

Export settings(エクスポート)

設定の書き出し

Import settings(インポート)

設定の読み込み

Rollback(ロールバック)

設定の復元

Tutorials(チュートリアル)

動画が見れます。

WP Rocketによる高速化の採点結果

スコアはモバイルがかなり上がりましたが、PCは元の設定からさほど変わらず。
ただし体感的にはキビキビとした表示で早くなりました。

PageSpeed Insights

参考 PageSpeed Insightsdevelopers.google.com

GTmetrix

参考 GTmetrix | Website Speed and Performance OptimizationGTmetrix News

追記:CDNの導入方法

やり方は公式のチュートリアル動画を必ずみましょう
参考 Using WP Rocket with Cloudflare - WP Rocket Knowledge Base取得できませんでした

  1. 無料のCDN「Cloudflare」のアカウントを作成(メール認証まですませる)
  2. 「Cloudflare」にログインして日本語設定にしてから各種設定
  3. WP RocketのアドオンAdd-onから「Cloudflare」をONさらに詳細ボタンをおしてAPIを設定して保存するだけです。

追記:ヘルパープラグイン

補助のプラグインを使用することでより凝った設定ができます。
詳細は各ドキュメントにて。

参考 helper pluginPW Rocket

最強の高速化プラグイン(有料)WP Rocketの設定方法まとめ

スコアよりも体感で早くなりました。
またモバイルのCSSも崩れないのと、アナリティクスも安定していているので、いまのところ、いい感じのキャッシュプラグインです!
高速化するだけでGoogleの評価(SEO)も上がるので、是非伸び悩んでいる人は2週間までなら返金できるので試してみてはいかがでしょうか?

以上、すいみん(@cg_method)でした!