WordPress│高速化の有料プラグイン!WP Rocketの設定方法

wordpress-wp-rocket

こちらのCGメソッドの記事では最強の高速化プラグイン(有料)WP Rocketの設定方法を紹介します!

キャッシュ系のプラグインをつかうなら安定して高速化できるものを選びましょう!

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

WordPress高速化プラグイン WP Rocketとは?

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

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

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

WP Fastest Cache

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

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


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

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

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

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

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

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

WP Rocketのライセンスを更新しなくても使える?

WP Rocketを初めて購入すると、1年間のアップデートとサポートが含まれています。

それ以降は更新しなくてもプラグインの機能は維持されます。

※メジャーなバージョンのアップデートはできません。

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

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

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

WP Rocketの返金方法は?

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

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

下記の公式ドキュメントサイトで全機能を確認できます。

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)をキャッシュする「コンテンツキャッシュ」とブラウザーキャッシュはプラグインをアクティブにするだけで、自動で稼働されます。

なので、特に設定しませんでした。

Mobile Cache

※「Separate cache files for mobile devices」はチェックしません。

PCとモバイルでキャッシュを分けて保存するのですが、最近のテーマはレスポンシブが多いので不要のはずです

User Cache

管理者でも訪問者と同じキャッシュ状態を確認したい時はチェックを入れましょう。

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


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

CSS Files(CSSの最適化)

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

見た目の崩れが発生した場合は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の遅延読み込み)

記事にエラーが発生した場合はJavaScriptの結合のチェックを外しましょう。

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

Delay Javascript execution(Javascriptの遅延読み込み)によるiOSの不具合対応

この機能によってiOSで1回目のクリックが反応しないことがあります。

その場合の解決方法はフォーラムを参考にしてください。

FTPで下記のスクリプトにアクセス

wp-content/plugins/wp-rocket/assets/js

lazyload-scripts.js
lazyload-scripts.min.js

2つのコードの中身を下記に変更しましょう。※既存のコードにtouchendを追加する

		const instance = new RocketLazyLoadScripts(
			[
				'keydown',
				'mouseover',
				'touchmove touchend',
				'touchstart touchend',
				'wheel'
			],
			browser
		);

このままだとアナリティクスが計測できないことがありますので、リストからgtag / js関連のコードはDelay Javascript executionから外しておきましょう。

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)しているので、チェックを入れてます

ShortPixelなど別で設定している場合はチェック不要です。

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

略称はPSIと呼ばれています。早速サイトのページスピードを図ってみましょう!

GTmetrix

こちらのサイトは細かいページ表示に関するデータを計測できるサイトです。

CDNの導入方法

やり方は公式のチュートリアル動画を必ずみましょう

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

ヘルパープラグイン

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

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

スコアよりも体感で早くなりました!

またモバイルのCSSも崩れないのと、アナリティクスも安定していているので、いまのところ、いい感じのキャッシュプラグインです!

高速化するだけでGoogleの評価(SEO)も上がるので、是非伸び悩んでいる人は2週間までなら返金できるので試してみてはいかがでしょうか?

Web制作のご依頼

SEOからデザインまで魅力的なWebサイトを制作いたします。

目次