JINでバグを出さずにWP Rocketを設定する方法を図解

当記事では上記の悩みに答えます。

ブログの高速化で最強のプラグインといえば、やっぱりWP Rocketです。

ただし、WordPressテーマとの相性も結構大事で、相性次第ではバグが大量発生しますので、設定の仕方に工夫が必要です。

ちなみにJINだと比較的相性は良く、うまく設定できれば以前の記事で紹介したようにPageSpeedInsightでもほぼ満点のスコアが出ました。

おすすめ記事

WP Rocketを入れたらJINの表示速度のスコアで100点が出た

当記事では上記の悩みに応えます。 ついに出たよ満点！ 上記の画像はJINで満点です！PageSpeed Insightsでの名誉ある満点です。 ちなみにスマホ版では99点でした！ 十分なスピードです。 ...

というわけで今回は、JINにWPRocketを導入してバグを出さないように高速化を設定する方法をお伝えします。

JINでバグを出さずにWP Rocketを設定する方法を図解

まずJINの環境については入れているプラグインなど人ぞれぞれ違うと思うので、全てが適用されるかどうかは保証できません。ご了承ください。

僕は以下の設定を行う上で、以下をまずは実行しています。

• キャッシュ系のプラグイン全停止
• ファイル最適化系のプラグイン全停止
• サーバーのキャッシュ（コンテンツキャッシュ・ブラウザキャッシュ）の停止
• 画像最適化プラグインEWWW Image Optimizerは有効

WordPressやJINのバージョンは最新のものでオッケーです。

WP Rocketのそれぞれの設定項目の意味などについては、ここでは深く触れません。（というか正直言ってよく分かりません）
ここに関してはCHIYOBLOGさんの記事がめちゃくちゃ詳しかったので、そちらを読むことをオススメします。

>>WP Rocketの設定と使い方

では上記の記事と照らし合わせつつ、以下で僕の設定を一つずつメニューに沿って図解していきます。

ちなみに今後の設定で何か設定してバグが出ても、チェックを外したり、WPRocketのプラグインを無効化すれば元に戻るので焦らないようにしましょう。

Cache

キャッシュの設定は高速化に大きく関わるポイントです。上記の図のようにチェックをしましょう。

ポイントとしては、特に入れなくてもいいよ〜的なニュアンスで書いている「Separate Cache Files for mobile devices」のチェックを入れることです。

あと、キャッシュのライフスパンですが、毎日のように更新するものでない限りは24時間などで良いそうです。

File Optimization

CSSの方は全てチェックを入れて問題ありませんでした。

Optimiza CSS deliveryの方で「REMOVE UNUSED CSS（使っていないCSSの除去）」は、結構PageSpeedInsightのスコアにも影響ある部分なので、これが使えるのはとてもありがたいことです。

ただ、JavaScriptの方は少し設定の工夫が必要です。

こんな感じで、「Load JavaScripr deferred」と「Delay JavaScript execution」はチェックを外した方が良さげです。

どんなバグが出るかというと、、、

Load JavaScripr deferredにチェックを入れると、記事の下の関連記事のスライドショーの表示がバグって、動かなくなります。

Delay JavaScript executionにチェックを入れると、見た目上の変化はないのですが、スマホ版でダブルクリックしないとリンクに飛べないという悲劇が起きます。

Media

MEDIAの設定は全部チェックで問題ありません。

Preload

Preload設定も全部チェックで問題なしです。

Sitemaps for preloadingの部分には、プラグインのXML Sitemapsなどで取得した「https://〜ドメイン〜/sitemaps.xml」などのURLを入力します。

下の方も全部追加。

URLs to prefetchについては、とりあえずおすすめされた以下のものをコピペで入れておきました。

//maps.googleapis.com
//maps.gstatic.com
//fonts.googleapis.com
//fonts.gstatic.com
//use.fontawesome.com
//ajax.googleapis.com
//apis.google.com
//google-analytics.com
//www.google-analytics.com
//ssl.google-analytics.com
//www.googletagmanager.com
//www.googletagservices.com
//googleads.g.doubleclick.net
//adservice.google.com
//pagead2.googlesyndication.com
//tpc.googlesyndication.com
//youtube.com
//i.ytimg.com
//player.vimeo.com
//api.pinterest.com
//assets.pinterest.com
//connect.facebook.net
//platform.twitter.com
//syndication.twitter.com
//platform.instagram.com
//referrer.disqus.com
//c.disquscdn.com
//cdnjs.cloudflare.com
//cdn.ampproject.org
//pixel.wp.com
//disqus.com
//s.gravatar.com
//0.gravatar.com
//2.gravatar.com
//1.gravatar.com
//sitename.disqus.com
//s7.addthis.com
//platform.linkedin.com
//w.sharethis.com
//s0.wp.com
//s1.wp.com
//s2.wp.com
//stats.wp.com
//ajax.microsoft.com
//ajax.aspnetcdn.com
//s3.amazonaws.com
//code.jquery.com
//stackpath.bootstrapcdn.com
//github.githubassets.com
//ad.doubleclick.net
//stats.g.doubleclick.net
//cm.g.doubleclick.net
//stats.buysellads.com
//s3.buysellads.com

Advanced Rules

設定なし（デフォルトのまま）

DATABASE

DATABASEは全部チェックで問題ありませんでしたよ。

その他（CDN以下）

設定なし（デフォルトのまま）

以上の感じでやれば、僕のJINは高速化されました。

というわけで、最後にWP Rocketの購入方法です。

WP Rocketの購入方法【所要時間1分】

WP Rocketの購入の流れを以下で解説します。

そんな不安がある方もご安心ください。

14日以内であればマイページから簡単にキャンセルが可能で、全額返金されます。

というわけで、一旦試すだけでも価値があると思いますよ。では以下をご覧ください。

STEP1：公式サイトへ

WP Rocketのページに飛んでください。そして、WP Rocketを今すぐ入手をクリックします。

STEP2：プランを選択する

ここでプランを選択します。とりあえずSingleプランでOKです。

アップグレードしたい時は、マイページで差額を払えばすぐにアップグレードできる仕様になっているので、損をすることがありません。

STEP3：支払い情報を入力

続いて支払い情報を入力します。日本語の入力でオッケーです。

支払い方法は以下の通り。

その時のドルの相場で計算されることになります。

STEP4：ダウンロードする

支払いが確認できたら、ダウンロード画面にうつるので「Download WP Rocket」をクリックしてダウンロードしましょう。

ログイン用のメールアドレスにログインパスワードが送られてきているのでそちらを確認しましょう。

あとは、設定は説明したようにやってみてください。

もしバグが出て、相性が悪いことが判明したら・・・

もしバグが出て相性が悪いことが判明しても、焦らなでください。

14日以内であれば、マイページより返金ができますので。

以上です。