WordPressのサイト表示速度を速くして、PageSpeed Insightsのスコアを上げるのによく名前が挙がるプラグイン「Autoptimize」。
特に、「レンダリングを妨げるリソースの除外」「使用していないCSSを削除してください」といった、PageSpeed Insightsの改善項目に対して効果があります。
ただこの「Autoptimize」を利用した際、私のサイトにおいては「画像がカルーセルスライダー以外まったく表示されなくなる」という不具合が出たのでメモしておきます。
こんな感じになりました。真っ黒。
ちなみに、テーマは「The Thor(ザ・トール)」を利用しています。
不具合の原因
結論から言うと、悪さをしていたのはこのJavaScriptに関するオプションでした。
「JavaScript コードの最適化」のチェックを残したままで、「JS ファイルを連結する」のチェックを外すと、無事画像に起きていたバグが修正されました。
プラグインのレビューを見ていると、画像に問題が起きた人、他にもいるみたいですね。
Autoptimizeをそれでも結局使う
「Autoptimize」を有効化して、CSSとJSを最適化してデフォルトの設定を保存しただけ。それだけでサイトが壊れてしまったので、最初はこう思いました。
ただ、PageSpeed Insightsの改善を試して他のプラグインも複数試した後、結局私のサイトにおいては「Autoptimize」がかなりスコアを改善してくれることが分かりました。
なので、この「JS ファイルを連結する」のチェックを外したままで、「Autoptimize」の設定を色々変えてみたところ、サイト表示速度が劇的に改善しました。
モバイルは、38点から79点に。
パソコンは、75点から96点に。
「Autoptimize」で不具合が起こったら、落ち着いて。
ひとつずつ設定を元に戻すことをまず試す。
それでもどうしても直らなければ、プラグインを無効化したうえで削除する。場合によってはキャッシュが他のプラグインに残ることもあるので、それもクリアすれば直るはず。
結論。
不具合が生じたものの、結局他のプラグインよりも成果を出してくれたので、私のサイトでは現状「Autoptimize」を利用し続けています。
「Autoptimize」以外で試したサイト速度改善プラグインはすべて削除したので、何を試したかメモしておきます。
「Autoptimize」と同じ開発元で、一緒に使うと良いという声を複数見かけた「Async JavaScript」は試しましたが、削除しています。別の不具合（PCで画像が表示されない、モバイルのカルーセルスライダーが動作しない）を引き起こしてしまったのと、あまりサイト表示速度に改善が見られなかったため。
「Asset Cleanup」も試しました。感触としては結構良かったのですが、「Autoptimize」と機能的には重複が非常に多かったので、プラグインを減らすためどちらかを削ることに。スコアを見比べて見て、パフォーマンスが良かった「Autoptimize」を残すことにしました。
この辺りは将来的にまた実験してみて変えていくかもしれません。