度々当ブログでも取り上げている高速化プラグインの WP-Rocket ですが、強力故に不具合や挙動への影響を与えることがよくあります。
そういった不具合時にWP-Rocketが関係していた場合、どの部分を対処すれば解決できるのかご紹介します。
不具合が起きたらまず WP-Rocketを確認
- モバイルデバイスで閲覧しているときにリンクをクリックしても動作しない。2回目のクリックで動作する。デスクトップでは問題ない。
- ウェブフォントを利用しているが、スクロールしないとウェブフォントが適用されない。
上記は例ですが、いずれの不具合が発生した時も WP-Rocket が原因でした。
このような不具合が発生したら利用しているプラグインにもよりますが、優先的に確認するべきは WP-Rocketです。
稼働中の本番環境のサイトよりも、一般公開していない検証用のテスト環境があると望ましいです。テスト環境の作り方は以下をご参考ください。
まずは WP-Rocket プラグインを一旦無効化してみます。
無効化した状態で、ログインしていない状態でブラウザのプライベートウィンドウ（シークレットモード）等のキャッシュが残っていない状態で確認してみましょう。
サーバーや設定によっては別のキャッシュが効いていて WP-Rocket を無効化にしているにも関わらず WP-Rocket が読み込まれている場合もあるので、その場合はサーバーのキャッシュをクリアするといった対処を行います。
これで問題が解消されていれば犯人は WP-Rocket となります。もし解消されていない場合は他の原因が考えられるので、検証用環境でプラグインを無効化したり、テーマをデフォルトテーマに変えたりして原因を探ります。
たいていはJavaScriptの影響
WP-Rocketが原因というのがわかったところで、それだけでプラグインを無効化するという選択肢はちょっともったいない。こういう不具合の場合は JavaScript が影響している可能性が高いので、CSS と JavaScript の最適化設定ができる WP-Rocket の「File Optimization」画面を確認します。
「JavaScript Files」内にある、「Load JavaScript deferred」「Delay JavaScript execution」機能にチェックが入っていたらオフにします。
「Load JavaScript deferred」を有効にすると全ての script タグに defer 属性が付与されます（除外設定したファイルや reCAPTCHA 等の指定ファイルを除く）。これは PageSpeed Insights 改善に効果があります。無効化にした場合はデフォルトととなり defer 属性は付与されません。defer や async についてもっと知りたい方は以下を参照してください。
<script> タグに async / defer を付けた場合のタイミング – Qiita
「Delay JavaScript execution」はマウスを動かす、画面にタッチする、スクロールするといったユーザー側の操作があるまで JavaScript の読み込みを遅らせてパフォーマンスを改善するメリットがあります。JavaScriptに対する LazyLoad のようなイメージです。
これらを無効化し保存。先程と同じ用に未ログイン状態のシークレットモードのブラウザで確認します。これで改善されているようならこの機能を無効化した状態で WP Rocket を使うというのは選択肢の一つです。
一部のスクリプトだけ除外する
難易度は上がりますが、対象のスクリプトだけ遅延しないように記述すると、「Load JavaScript deferred」「Delay JavaScript execution」機能は有効化しつつも、不具合を解消できます。プラグインを一つずつ無効化する、テーマ側で読み込んでいるスクリプトを一つずつ探るというように、原因となるスクリプトが何か一つずつ探す手間と、除外するスクリプトの記述する必要があります。
除外方法は正規表現も利用できるので、気になる人は公式のドキュメントもご参考ください。
Delay JavaScript Execution compatibility exclusions – WP Rocket Knowledge Base
Exclude files from Load JavaScript Deferred – WP Rocket Knowledge Base
テストできる検証用環境があると安全
以上、WP Rocketの不具合対象方法でした。今回紹介した箇所以外の項目の場合もあるケースもあります。
WP Rocketを有効化するだけで500 エラーが出るケースもあります。（.htaccessファイルが上書きされるため、それによるケース等）
そういったケースにも備え、テスト実施は検証用環境で確認できると一番安全です。今はレンタルサーバーでも簡単にサブドメインの設定や無料で別ドメインの追加等も行えたりしますので、今後運用を続けていくならば一度テスト環境を構築しておくことをお勧めします。
Shortcodes Ultimate WP Rocket 不具合
上記キーワードで2位にヒットして読ませて頂きました。
Shortcodes Ultimateという無料プラグインを使っていて、一度プラグインの更新をしたところショートコードがそのまま公開記事に出てしまう不具合が発生。
いろいろと探った結果、WP Rocketとの相性が原因と判明しました。
WP Rocketを無効化しても不具合が治らず、バックアップから復元という面倒な作業を冷や汗をかきながら実施し、怖くてShortcodes Ultimateの更新が出来ない状態です。
どのように対処するのがよいのかご教授いただけないでしょうか？
Shortcodes Ultimateは多くの記事でコードを使ってしまっているのもあり「使わない」選択はありません。WP Rocketは有料ということもあり、使わない選択を考えたくない状況です。
テーマ「アフィンガー6」使用
Shortcodes Ultimate を更新したところショートコードがそのまま表示されてしまい、WP Rocket を無効化しても治らないということであれば、これらのプラグインの干渉によるところが原因かもしれません。
一度、テスト環境でこれらのプラグイン以外を無効化した状態で再度ご確認されることをおすすめします。また、テーマもアフィンガーから Twenty Twenty-three 等の WordPress デフォルトテーマに変更し確認してみてください。
テスト環境の作成方法参考: WordPressのテストサイト・検証用環境の作り方