先日、ブログの表示速度を上げようと設定をいくつか変えたところ、記事の画像が全部消えるという事故が起きました。
原因が分かるまでは何度か遠回りをしましたが、結果的には無事に直すことができたので、原因と直し方をここに記録として残しておきます。同じ症状で困っている方の参考になれば嬉しいです。
この記事はこんな方におすすめです
・WordPressで画像が表示されない
・Cocoonで高速化したらアイキャッチが消えた
・LazyLoad設定を変更したあと表示がおかしい
・WEXALを有効にしたあと画像が消えた
何が起きたのか
私が使っているのは、ConoHa WINGというレンタルサーバーと、Cocoonという無料テーマです。
表示速度を上げるために、ConoHa WING側の高速化機能（WEXAL）と、Cocoonテーマ側の高速化設定をいくつかオンにしました。
その直後——
記事のアイキャッチ画像が、すべて表示されなくなっていました。1記事だけではなく、公開しているすべての記事です。
正直、一瞬、頭が真っ白になりました。
検証環境
・WordPress：7.0
・テーマ：Cocoon
・サーバー：ConoHa WING（Apache）
・PHP：8.5.6
・主な利用プラグイン：EWWW Image Optimizer（8.7.2）
原因：「画像を隠す」設定が、裏で重なっていた可能性
原因を探るのは、実は一度では終わりませんでした。設定をいくつか戻しても直らず、何度か試行錯誤することになりました。
最終的に分かったのは、私の環境では次の3つが、それぞれ「画像を一旦隠してから表示する」仕組みを持っていた、ということです。
①ConoHa WINGのWEXAL（高速化機能）
画像の遅延表示（LazyLoad）機能があり、管理画面には「LazyLoad戦略設定取得 失敗」というエラーが出ていました。「隠す」処理は動いているのに、「表示に戻す」処理だけが失敗していた可能性があります。
②画像最適化プラグイン「EWWW Image Optimizer」のLazyLoad
以前から使っていた設定で、画像を一旦隠しておき、表示するタイミングになったらJavaScriptで切り替える仕組みです。
③Cocoonテーマの高速化設定
同様のLazyLoad機能があり、キャッシュ・CSS/JS圧縮などとあわせて一括でオンにしていました。
私の環境では、この3つが同時に動いていたことが、画像が隠れたまま固定されてしまった原因だったと考えています。
直すためにやったこと
正直に書くと、最初からきれいに直せたわけではありません。
フェーズ1：いろいろ試したが、直らなかった
LazyLoadの設定を戻したり、キャッシュを削除したり、WEXAL側の設定を無効にしたりしましたが、それでも画像は表示されないままでした。
フェーズ2：一度、事故前の状態まで戻す
このままでは埒が明かないと判断し、思い切って直前に変更した設定をすべてオフに戻すことにしました。ちょうどGoogleアドセンスの審査期間中だったこともあり、「表示速度」よりも「画像がちゃんと表示されること」を優先しました。
結果、画像は無事に戻りました。ただし表示速度のスコアは、事故が起きる前と同じ水準（60点前後）に逆戻りしました。
フェーズ3：1つずつ、確認しながら積み上げ直す
ここからは、1つ設定を変えるたびに、必ず画像を確認しながら進めました。
変更した項目／結果
・画像プラグイン側のLazyLoadを、WordPress標準の方式に変更／画像は正常。「隠す」仕組み自体を撤去できた
・Cocoonの「Googleフォントの非同期読み込み」だけON／60点→82点に改善。画像も正常
・Cocoonの「CSSを縮小化する」を追加でON／82点→60点に悪化。画像には影響なし
・CSSの縮小化をOFFに戻す／スコアは82点には戻らず、60点のまま
最後の「戻したのにスコアが変わらない」という結果には戸惑いましたが、何度か計測し直して分かったのは、同じ設定のままでもスコアが60点台〜80点台の間で揺れる、ということでした。サーバーの混雑状況やフォントの読み込みタイミングによる誤差のようです。
今の設定（最終形）
項目／現在の設定
・WEXAL／オフ
・画像の遅延読み込み／プラグインの機能→WordPress標準の設定に変更
・Cocoonの高速化設定／「Googleフォントの非同期読み込み」のみON、他はすべてオフ
画像を隠すCSSは完全に削除したので、同じ仕組みでの事故はもう起きない状態にしています。
PageSpeed Insightsの点数だけでは判断できない
事故が起きた直後、まだ画像が表示されていなかったタイミングで測ったPageSpeed Insightsのスコアは、92点でした。
一瞬「高速化に成功した」と思いました。
でも実際には、画像がまったく読み込まれていなかっただけでした。画像を元に戻すと、スコアは通常の範囲（60〜80点台）まで下がりました。
数字だけを見ると改善したように見えても、実際の表示を目で確認することの方が大切だと、この時学びました。
この経験で学んだこと
一番の学びは、「高速化設定は、絶対に一括で変えてはいけない」ということでした。
良かれと思って複数の設定を一度にオンにしたことが、そもそもの原因でした。しかも直すときも、最初は複数の設定を同時に触ってしまい、かえって原因が見えなくなりました。1つ変えたら、必ず表示を目で確認する。計測も、1回の結果を信じずに複数回やってから判断する。当たり前のようですが、事故が起きて、直すまでに何度も遠回りをして、ようやく身にしみて分かりました。
同じ症状の方へ
「WordPressの高速化設定を変えたら画像が表示されなくなった」場合は、次の3つを疑ってみてください。
・サーバー側の高速化機能（WEXALなど）
・画像最適化プラグインのLazyLoad機能（EWWW Image Optimizerなど）
・テーマ側の高速化設定
どれか1つではなく、複数が同時に「画像を隠す」処理を持っていないか、1つずつオフにしながら確認することをおすすめします。
今回の経験で、「速くすること」よりも「壊さないこと」の方が大切だと学びました。
もし同じ症状で困っている方がいたら、この記録が少しでも役に立てば嬉しいです。
ブログの表示速度改善は、まだ完了ではありません。次はヘッダーのロゴ表示まわりなどの改善に取り組む予定です。進捗はまたこちらで報告します。
関連記事：
・ConoHa WINGでブログを始めて3か月。知識ゼロの私が感じたこと
・ブログ画像に企業ロゴはNG。アフィリエイトのメディア削除で学んだこと
最後まで読んでいただき、ありがとうございます。
「ゼロからAI副業」では、30代会社員の私がAI副業に挑戦する過程を、成功も失敗も正直に発信しています。
よかったら、また読みに来てください。
他のSNSなどはこちらからどうぞ→ https://linktr.ee/zero_ai_fuku
コメント