今回は「WP Fastest Cache」の有料機能で画像最適化を行った際に、当方が被った実害と解決できた方法について、メモがてら書いておきます。
復旧最優先で作業をしたので作業途中のスクリーンショットなどは取ってません。テキストベースの情報になりますがご了承ください。
画像最適化でサクサク表示のサイトを目指したが…WP Fastest Cacheにやられた件
WP Fastest Cacheについて
WP Fastest Cacheの名前をご存知の方は多いと思います。キャッシュを生成して自分のWPサイトを高速表示させるための様々な機能を搭載した無料プラグインです。
- キャッシュ生成
- CSSサイズ縮小
- JavaScriptサイズの縮小
- 画像最適化 (有料)
これらの機能を搭載しているわけですが、今回はGoogle先生のMobile Firstなアップデートのおかげでサイズ大きめの画像多数なメインサイトで検索順位を下げられまくったため、有料の画像最適化機能に手を出してみました。狙いは一つ、表示速度の高速化で検索順位の返り咲きを狙う事です。と言っても大手ライバルが多いクレジットカード系ブログなので、検索クエリの多いキーワードで順位が低く、ニッチなキーワードで上位を狙ってたりしました。
WP Fastest Cacheの有料機能、「画像最適化」を試した
39.99ドル払ってプレミアム機能を開放し、早速画像最適化をしてみました。
サイズがガンガン縮小され、PageSpeedInsightsでもスコアが伸びる伸びる。これはすごい！、と思っていたのも束の間。自分のサイトを覗いてみると、何だか意図しない画像が表示されている。自分が作ったページで、あるべき場所にあるべき画像が表示されていない…、ナニコレ？
例) 「楽天カード」の画像が表示されているべき場所に何故だか「リクルートカード」の画像が表示される
キャッシュを配信した事による影響としてはおかしい。
画像を更新したのに古い画像が表示される、これなら分かるが今回は明らかに異なる別画像ファイルソースの最適化済み画像がサイト上に表示されている(画像Aが画像Bで置換されている)。
- 三井住友カード … リクルートカードの画像で置換された状態で表示
- アメックスゴールド … 同上
- アトレビューカード … 同上
こんな感じで、意図しない画像で置換されまくり。アフィリエイト広告対象と明らかに異なる内容の画像を表示しつつ、リンク先はそのまま。これはかなり不味い。放置して万一広告主にバレたら「広告主からASPへ苦情」> 「ASPから提携解除」というコンボを食らう可能性大。
という事で終夜営業のファミレスに駆け込み、残業で遅くなるふりをしつつサイト復旧に挑む。まずは事象の再確認と原因の解析。仕事柄得意なんだぜこういうのは。
スポンサーリンク
原因は2バイト文字でした
WordPressサイト上で、訪問者として自分のサイトを見ても「画像ファイルAをソースとする縮小済み画像A’」が表示されるべきところで、「画像ファイルBをソースとする画像B'」に置換表示されまくっていた。
WP Fastest Cacheのキャッシュ削除 … NG
WP側のキャッシュを削除して、ブラウザキャッシュを削除して事象発生ページをリロード…効果なし。相変わらず事象発生しっぱなし。
WP Fastest Cacheプラグイン停止 … NG
画像最適化をしてくれたプラグインごと停止してもダメ。何が原因なのか途方にそうになるが、「もしかして配信される画像ソースそのものがダメージを受けたのか？」という最悪の可能性を考えて、Wordpress管理画面の、「ライブラリ」を確認してみた。
ライブラリ内の多数の画像が、「〇〇カードゴールド」で埋め尽くされていた。ライブラリが汚染されてたらそりゃキャッシュ消したり、プラグイン止めてももう遅いよね。
影響を受けたファイルを確認してみたところ、いずれも2バイト文字で始まるファイルばかり。マルチバイト文字サポートしてくれているからと、色々な画像ファイルを日本語ファイル名のままにして、そのままアップロードしていたのが裏目に出ました。だって今までちゃんと表示されてたんだもん。毎回英字にリネームするの面倒でしたし。
WP Fastest Cacheプラグインごと削除 … NG
ダメもとでやってみましたが、プラグイン削除してもダメでした。そろそろ頭使うの面倒になってきた。
現場百回。解決策は思わぬところに。
画像を一から全部アップロードし直しか…、こりゃ徹夜で復旧するかサイトをしばらく閉鎖するか、と覚悟を決めそうになりましたが、「WP Fastest Cache」の「画像最適化」で、「画像リスト」を表示しみてみると、画像リスト内にREVERT (切戻し=以前の状態に戻す) カラムがあった。この中に「X」ボタンがあり、それをクリックすると最適化前の状態に画像ファイルリンク含めて戻してくれる事が分かった。
でもRevert Allみたいなボタンがどこにもない。
最適化は一括適用なのに何で切り戻しは一括で実行できないんだよこの野郎ｗｗｗ
仕方ないので最適化済みの画像1,000個弱、手動で「X」をタップしました。疲れたけど全ての画像が最適化前の状態に戻りました。めでたしめでたし。
プラグイン削除しても事象が復旧しなかったこともあり、Revertボタンによる復旧を行わない場合、どこかにバックアップされた最適化前の画像に手動で差し戻すしかないのかな。もう考えるのも疲れたので試してません。誰かテスト用サイトなどで試した人いませんかね？
とはいえ、画像のファイルサイズは縮小したい
やはり画像サイズは縮小しないとGoogle先生からの検索順位は落ちます。そりゃサイトが重いから。アップロードするたびにすべての画像をあらかじめリサイズしてからアップロードなんて面倒だ、と思うのは私だけでしょうか。
EWWW Image Optimizer
結局これに頼ることにしました。過去に画像最適化で使ったときも、日本語ファイル名がそのままURLに含まれるようなパターンでもトラブル起きなかったし大丈夫だろ。
色々考えるのも面倒だし、もう疲れたから今はこれでよし。効率の良い画像サイズ縮小や最適化の方法はまた後日考えます。眠いし腹減ったし。
おわりに
私が間抜けなだけな可能性が高いのですが、ファイル名が2バイト文字である事が原因でこんな事象が起きるのって既知なんでしょうかね。とりあえず、WP Fastest Cacheで画像の最適化をする際には、「メディア」にアップロード済みの画像に2バイト文字をファイル名に含むものがあったら要注意、ということで自分の遭遇した不具合のメモがてら、誰かの役に立つかも知れないので記事に起こしました。
やっぱりファイル名やURLはシングルバイト文字だけが良いよね、システム屋さん的には。