本業の案件で、「画像を差し替えたはずなのに、サイトには古い画像のまま表示される」という不具合に遭遇したことがあります。
当時はまだWordPress運用に慣れておらず、「表示速度対策としてこのプラグインを入れる」というルールを、仕組みまで深く理解しないまま導入していました。
今回はその状態で不具合にぶつかり、1つずつ手探りで切り分けていった話をまとめておきます。
まず疑ったのはEWWW Image Optimizer
まずは1つ目。
導入していたのは、画像を自動で圧縮してくれるEWWW Image Optimizerというプラグインでした。
アップロードした画像を最適化してファイルサイズを軽くしてくれる、よく使われているプラグインです。
差し替えたはずの画像が古いまま表示される症状が出ていたので、画像を扱うプラグインといえばこれ、という理由でまず疑いました。
ブラウザのキャッシュを疑ってシークレットウィンドウで確認しても同じ古い画像が出てくるので、少なくともブラウザ側の問題ではなさそうだと判断できました。
💡 Tips: 画像最適化プラグインとは
アップロードした画像を自動で圧縮し、ファイルサイズを軽くしてくれるプラグインのことです。表示速度の改善に効果がありますが、圧縮や配信の裏側でキャッシュ的な仕組みを持つものも多く、元画像を差し替えても反映が遅れることがあります。
直したはずなのに、まだ直らない
EWWW側の設定を見直して解決したと思ったのですが、しばらくすると別の記事でも似たような症状が出てきました。
今度は画像がそもそも表示されない。
真っ白な枠だけが残っている状態です。
また白い画面。
ブラウザの開発者ツールでネットワークタブを確認すると、画像自体のリクエストがそもそも発生していませんでした。
「古いまま表示される」のと「そもそも表示されない」は、似ているようで別の症状です。
この時点で、犯人は1つじゃないかもしれないと思い始めました。
もう1つ疑ったのはAutoptimize
サイト全体の表示速度を上げる目的で、Autoptimizeというプラグインも導入していました。
これも「表示速度対策として入れておくもの」という感覚で使っていたプラグインの1つです。
調べてみると、Autoptimize側にも画像の遅延読み込み(Lazy Load)を行う設定がありました。
正直なところ、当時の自分は「どのプラグインが何の機能を持っているか」をきちんと把握できておらず、EWWWとAutoptimizeそれぞれの設定に、画像の表示に関わる機能が重なって存在していることにも気づいていませんでした。
結局、どっちのプラグインが犯人だったの?
正直に言うと、そこまで自信を持って言い切れないんだよね。当時は「ルールだから入れる」くらいの理解度だったから。
じゃあどうやって直したの?
理屈より先に手を動かした感じ。1個ずつプラグインを無効化しながら、症状が消えるタイミングを探っていったよ。
Lazy Loadをやめて、Autoptimizeも手放した
結局、犯人捜しは理屈より実験で進めることにしました。
EWWWとAutoptimize、それぞれの画像・遅延読み込み関連の設定を1つずつオフにして、都度ブラウザをリロードして症状が消えるかを確認する、という地道な作業です。
設定を1つ変えるたびにキャッシュもクリアしないと正しく判定できないので、想像していたよりずっと時間がかかりました。
途中でLazy Loadの機能自体をオフにしたところ、表示されない画像の症状はぴたっと消えました。
出た。
ただ、それでも「EWWWとAutoptimizeが同じような機能を裏で持ったまま共存している」という状態そのものが気持ち悪くて、最終的にはLazy Loadを使うのをやめて、Autoptimizeというプラグイン自体も外すことにしました。
画像の最適化はEWWW1つに絞り、余計な機能の重なりをなくす方向で決着させた形です。
結局、理解しないまま入れていたのが根本原因
犯人は、1人じゃなかった。
今振り返ると、今回の一番の問題は「EWWWかAutoptimizeか」ではなく、両方とも中身を理解しないまま「表示速度対策のルール」として導入していたことだったと思います。
それぞれのプラグインが具体的に何をしているかを把握していれば、画像まわりの機能が重なっていることにも、もっと早く気づけたはずです。
知らないまま入れる、が一番危ない。
怖いのは、それ。
「とりあえず入れておく」が一番危ないんだと、この時初めて実感しました。
まとめ
似た症状でも、原因は1つとは限らない。
教訓は、それだけ。
画像まわりの不具合は「キャッシュや遅延読み込みを疑う」までは辿り着きやすいんですが、複数のプラグインが同じような機能を持っていると、どのプラグインのどの機能が原因かの切り分けに時間がかかります。
1つ直して満足せず、同じ症状が別の場所でも再発していないか確認する癖をつけておいてよかったと思う出来事でした。
それ以上に学びだったのは、仕組みを理解しきれないプラグインは、無理に共存させず思い切って手放すという判断です。
「ルールだから入れる」ことは悪くないんですが、そのルールの中身まで分かっていないと、いざ不具合が起きたときに切り分けが一気に難しくなります。
今では新しいプラグインを入れるときは、機能が重なっていないか、他のプラグインとの兼ね合いも含めて一度確認するようにしています。
案件で使うツールが増えるほど、この「一度立ち止まって確認する」手間を惜しまないことが、結果的に一番の近道になると感じています。
この記事が参考になったら、応援クリックをお願いします
