【WordPress】画像をプラグインなどで圧縮（最適化）してるはずなのにサイトの表示が重いときのチェックポイント|Knowledge Base

公開日：2018(平成30)年3月8日／最終更新日： 2018(平成30)年3月8日

WordPressで作成したに限らずサイトを運営していると気になってくるのがページの表示スピード。「Google PageSpeed Insights」でスコアを計ってみると・・・38/100といったびっくりするような低スコア。経験上では本当に意味のある（需要のある）記事であればそれほど気にすることでもないような・・・という感じにはなるものの、やっぱり気になるといてもたってもいられなくなりますよね？

最近の画像はスマホでもデジカメでも結構な容量があり、WordPressのメディアアップローダーでは特に何もしていなければアップロードすると巨大なファイルが保存されることになります。

ファイルのサイズが大きいのはやはりページの表示速度に影響しますし、何より閲覧する方がスマホだった場合などはパケット量が・・・（あんまり気にしません？？）ちょっと迷惑なサイトかもしれませんね。

そこで登場するのが

サイトにアップロードした画像を自動で最適化するプラグイン「Smush Image Compression and Optimization」

といったアップロードした画像を自動で圧縮（最適化）してくれるプラグイン（有名なものにIEEE Image Optimizerというのがありますがこちらの方がおすすめ）。簡単に設定しておけば、アップロード時にはもちろんバッググラウンドで自動的にサイズを小さくしたり、ウェブページとして見た時にそれほど影響のない程度に粒子を粗くしたりしてサイズを縮小してくれます。

これで大丈夫！！と再度速度を計ってみたら・・・やっぱり改善されてない！！このクソプラグイン！！と思うかもしれませんね。でもこれちょっとした勘違いかもしれません。

実際のページでチェックして間違った使い方をしてないか検証してみましょう。

最適化された画像が使用されているかのチェック方法

まずは表示速度に問題があるページの画像を試しにダウンロードしてみてください。そしてパソコン上でその画像のプロパティを見てサイズを確認してみてください。

・・・・どうですか？？アップロードする前の画像と比べて小さくなってますか？？オリジナルと酷似してる、または同じサイズではないですか？？

WordPressのテーマは誰でもいい感じに表示できるようになっていて、もちろん画像も自動で拡大・縮小されるようになってるものが多いです。この機能のおかげですごく大きい画像を挿入してもいい感じに表示され、さらにはスマホなどの小さな画面でもいい感じに表示されるようになってます。

実はこれが諸悪の根源（ファイルサイズに気づけない原因）になっているのです。

まあそれは置いといて、何でプラグインで最適化したはずなのにファイルサイズが変わらないのか？？

答えは簡単！！圧縮された画像を挿入していないだけなのです。

画像の最適化をするプラグインの多くはオプション等で特別に設定しない限りオリジナル（アップロードした）画像そのものは何もしないようになっています。

WordPressではこのオリジナル画像をfullサイズと呼び、large、mediumといった別のサイズの画像を同時に保存するようになっています。プラグインが行うのはfullサイズ以外の画像に対する最適化なのです。

それを知らずにfullサイズで画像を本文へ挿入していると・・・なんだ！圧縮されてないじゃん！このクソプラグイン！！となるのです。

圧縮された画像を確実に挿入する方法

画像を挿入するときには投稿編集画面から「メディアを追加」ボタンをクリックして画像を選択、挿入ボタンをクリックというのがいつもの手順ですよね？

その時画像をクリックした右側の情報を見たことありますか？？

そこには画像のサイズが設定できるようになっています。サイズはどうなっていますか？

「フルサイズ」になっていませんか？これは前述したオリジナル画像という意味なので、圧縮プラグインの設定でフルサイズの画像の圧縮が無効であればアップロードした画像そのものになります。つまりビッグで巨大（おんなじか・・・）なファイルが本文に挿入されてしまうのです。

通常サイトの本文は７００ピクセル程度の幅なことが多いので「大」サイズを選べば問題ありません。「大」サイズはきちんと圧縮されていますからファイルサイズはかなり小さくなります。

これに気づかないのは誰でも簡単にきれいに表示できるテーマの機能の弊害なのかもしれませんね。

これを本文上で確認するには画像を挿入したときに追記されるタグを見て「size=”〇〇”」の〇〇の部分がどうなっているのかを調べます。「full」になっていればオリジナル画像です。これを「large」にすれば「大サイズ」の画像になります。

これである程度画像をばんばん入れたページでもそれなりに速度が速くなります。きちんと圧縮されている場合には次の項を参考にされるとさらに改善できるかもしれません。

画像の多いページの表示速度改善策

画像の圧縮はばっちり、圧縮された画像を使ってる、なのにスコアは・・・という場合に試してみていただきたい項目です。

画像の遅延読み込みをしてみる

スコアが悪くても、訪問した人が遅いと感じにくくなるテクニックがあります。それが「lazy load」です。これは実際にその画像を表示する段階になるまで画像を読み込まなくする機能です。スピード計測ではすべてを読み込むまでの速度が表示されるかもしれませんが、実際にページを表示してみて問題がなければ訪問者に対しては親切なページになります。

テーマに機能が搭載されている場合もありますし、プラグインもありますから是非試してみてください。