Wordpressで画像が消える!

こんにちは!木原でございます。

WordPressでサイトを作っている方は表示の高速化を図っていろいろと施策をやりますよね!

.htaccessを触ったり、プラグインのON、OFFを試したり、、、

僕も休日にちょっとWordpressをイジイジしていて、Google PageSpeed Insightsのスコアも上がって「よっしゃー!」と思っていました。

しかーし!

翌日、自分のサイトを見てみると、、、

Wordpressの画像リンク切れ

画像がリンク切れで表示されてないっ!

なんでやーーー!!

という事で、今回はWordPressの画像が突然リンク切れになるという怪現象についてみていきたいと思います。

ちなみにこの現象、見るデバイスによってリンク切れの場所や数が変わったり、時間によって表示されたり、されなかったりするので、ほんと最初は意味不明でしたw

同じ現象に悩まされている方のお役に立てればうれしいです♪

キャッシュが原因?

今回僕はWordpressの高速化を図って.htaccessファイルを編集し、キャッシュの設定をしていました。

しかし、僕が使っているのはXサーバー系列のWordpress特化サーバーであるwpXサーバーです。

このサーバーはWordPress専用に作られており、もともとキャッシュ機能をサーバー側で持っています。

なので、もしかすると.htaccessに書いたキャッシュの設定と、サーバーのキャッシュ機能がバッティングして、不具合が出たのかな?と思いました。

そこで.htaccessに書いたキャッシュの設定部分の文言を削除したり、逆にwpXサーバー側のキャッシュ機能を切ったりしてみたのですが、現象は改善されませんでした。

という事で、この現象の原因はキャッシュでは無かったようです。

mod_pagespeedが原因!

そして次にたどり着いたのがmod_pagespeedです!

最近はこの機能を持っているサーバーが増えていますが、超簡単にまとめて言うと、サーバー側でいろんな圧縮をしてくれて、サイトの表示が早くなります!という機能です。

詳しく知りたい方はググってみてくださいw

mod_pagespeed

僕の使ってるwpXサーバーの管理画面でも設定項目があって、これをOFFにするとちゃんと画像が表示されるようになりました。

これでめでたしめでたし。。。

としたいところですが、mod_pagespeedはページの高速化ツールですし、やっぱり使いたい!という方も多いと思います。

そこで試したみたのが以下の方法です。

webp処理をさせない

ここからちょっと突っ込んだ話になりますが、mod_pagespeedを有効にするとjpgやpngなどの画像をさらに圧縮し、webp(ウェッピー)というファイルに変換しようという処理が入ります。

webpとはGoogleが開発している画像フォーマットで、ちゃんと変換できれば問題ないと思うのですが、もしかするとこの変換の工程でなにかトラブルがあるのかな?と考えました。

この処理をしないでね!という命令を.htaccessに書き込むのですが、以下の一文を記入すれば良いだけです。

mod_pagespeedを有効にしていると「ModPagespeed On」という文章があると思うので、その下にでも追記してあげればよいです。

僕はこんな感じで書きました。

ModPagespeedDisableFilters convert_jpeg_to_webp

この1文を書くだけで、mod_pagespeedを有効にした状態できちんと画像が表示されました!!

あ、でも.htaccessの編集は自己責任でお願いしますね!w

結局はmod_pagespeedを無効にした。

上記の処理をしてサイトのチェックをしていたのですが、ほとんどの画像はちゃんと表示されている一方で、まだ画像がうまく表示されていない箇所がちょっとだけありました。

もしかするとキャッシュの問題で表示されていないのかもしれませんが、やっぱり僕はmod_pagespeed機能を無効にしましたw

そもそもページの速度を早くするための機能ですが、無効にした状態で.htaccessの設定やプラグインの選定などで、Google PageSpeed Insightsのスコアがわりといい感じの数値が出せたのですw

Google PageSpeed Insightsのスコア

まぁ、満点ではありませんが、96点出ていれば画像表示に不安が残るmod_pagespeedを使わなくてもいいのかなーという結論ですw

それにしても今回はmod_pagespeedやwebpやら、いろいろと勉強になりました♪

この記事がお困りの方のお役にたてればうれしいです!

それでは、最後までお読みいただいてありがとうございましたヽ(*^^*)ノ

この記事が気に入ったら
いいね ! しよう

Twitter で