WP Rocketを利用していて不具合が発生するときはJavaScriptを疑う

度々当ブログでも取り上げている高速化プラグインの WP-Rocket ですが、強力故に不具合や挙動への影響を与えることがよくあります。

そういった不具合時にWP-Rocketが関係していた場合、どの部分を対処すれば解決できるのかご紹介します。

1 不具合が起きたらまず WP-Rocketを確認
2 たいていはJavaScriptの影響
3 一部のスクリプトだけ除外する
4 テストできる検証用環境があると安全

不具合が起きたらまず WP-Rocketを確認

モバイルデバイスで閲覧しているときにリンクをクリックしても動作しない。2回目のクリックで動作する。デスクトップでは問題ない。
ウェブフォントを利用しているが、スクロールしないとウェブフォントが適用されない。

上記は例ですが、いずれの不具合が発生した時も WP-Rocket が原因でした。

このような不具合が発生したら利用しているプラグインにもよりますが、優先的に確認するべきは WP-Rocketです。

稼働中の本番環境のサイトよりも、一般公開していない検証用のテスト環境があると望ましいです。テスト環境の作り方は以下をご参考ください。

WordPressのテストサイト・検証用環境の作り方

まずは 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 についてもっと知りたい方は以下を参照してください。

「Delay JavaScript execution」はマウスを動かす、画面にタッチする、スクロールするといったユーザー側の操作があるまで JavaScript の読み込みを遅らせてパフォーマンスを改善するメリットがあります。JavaScriptに対する LazyLoad のようなイメージです。

これらを無効化し保存。先程と同じ用に未ログイン状態のシークレットモードのブラウザで確認します。これで改善されているようならこの機能を無効化した状態で WP Rocket を使うというのは選択肢の一つです。

一部のスクリプトだけ除外する

難易度は上がりますが、対象のスクリプトだけ遅延しないように記述すると、「Load JavaScript deferred」「Delay JavaScript execution」機能は有効化しつつも、不具合を解消できます。プラグインを一つずつ無効化する、テーマ側で読み込んでいるスクリプトを一つずつ探るというように、原因となるスクリプトが何か一つずつ探す手間と、除外するスクリプトの記述する必要があります。