画像圧縮・WEBサービス「Optimizilla」でサイト高速化

久々にサイト速度の測定をしたらスピードが落ちていました。

 

▼GTmetrix

当サイトは画像を結構使います。1記事に10枚以上貼ることもあります。

画像圧縮にはかれこれ1年ほど「Ewww image optimizer」を使っていますが、先日の検証でWEBサービスを使って圧縮した方が圧縮率が高いということがわかりました。

photo by Luis Villa del Campo

▼目次

1. 「Optimizilla」で画像圧縮
2. 画像圧縮後に再計測

「Optimizilla」で画像圧縮

 

画像を圧縮するためのWEBサービスを実際に使っていくつか試してみました。

その結果、画像を圧縮するためのWEBサービスは「Optimizilla」が圧縮率高めで良さげだったので今回このツールを使うことにしましょう。一度で最大20個の画像ファイルをアップロードすることができます。
参考: 画像を軽くするなら高圧縮率の「Optimizilla」がお勧め

と思い立ったのはいいですがWEBサービスで圧縮する場合、1つ1つアップロードする作業になるので記事数が多いとかなり手間のかかる作業なんです。当サイトの場合現時点で300記事を超えているのでそれを手作業でやるということになります。
それを全てとなると膨大な時間がかかってしまうので今回は20記事分圧縮してみました。

これが「Ewww image optimizer」だったらワンクリックで放置しておくというだけなのですが、プラグインでかかる負荷と圧縮率の高さを考えたらこの「Optimizilla」を利用する価値はあるでしょう。

ちなみに「Ewww image optimizer」を使用することで結構な負荷がかかるようです。WordPressは重くなりやすいCMSなので軽量化できるところはできるだけしておきたいところです。

とりあえずやってみましょう。WordPressにアップした画像を保管していない場合は一度自分のサイトからダウンロードして「Optimizilla」にアップロードするという流れになります。

1. サイトから画像をダウンロード

2. 「Optimizilla」にアップロード

3. ZIPファイルを解凍

4. ダッシュボードから元と同じ位置に画像をアップロード

という流れになるかと。サイトから画像をダウンロードする場合は画像でいっぱいになってしまうので、作業用のフォルダを新規で作ると管理しやすいです。

保存する時、画像のファイル名をそのページのURLのパーマリンクにしておくとあとでわかりやすいでしょう。そうすることで一気にダウンロードできますし効率化できます。

「http://独自ドメイン.[▼ここを画像ファイル名に]/」

作業工程

まずは画像を圧縮したいWEBページの画像を全てダウンロードします。続いて「Optimizilla」に画像をアップロードします。

画像をアップロードするのに、それ程時間はかかりません。JPGのクオリティはデフォルトで90ですが充分圧縮されているのでこのままで充分です。

このクオリティを下げるとさらに圧縮できます。
画像によっては70程のクオリティで180KBの画像を30KB以下に抑えることができます。一通り試してみましたが、「Ewww image optimizer」や他の画像圧縮サービスではここまでの圧縮率はなかなか出せません。

続いてそのファイルをダウンロードします。ZIPファイルなのでこれを解凍。最適化された画像は「min.拡張子」という名前が追記されているのでわかりやすいです。

WordPressのダッシュボードから「Optimizilla」で最適化された画像をアップするわけですが、その際にしなくてならない作業があります。圧縮前にアップロードされている画像の削除です。この作業をしておかないと「圧縮前の画像＋圧縮後の画像」という2枚の同じ画像がアップロードされたままという状態ですから圧縮後の画像をアップした分、かえって重くなってしまいます。

「圧縮前の画像(消す) / 圧縮後の画像(これを使用)」という状態にしておきましょう。「メディア」→「ライブラリ」から消すことができます。

画像数が多いと探すにも一苦労ですが、画像の「代替えテキスト」やアップロードした月別で検索をかけることができるのでそのように検索することで、目当ての画像をすぐに見つけることができます。

何よりこの「メディアライブラリ」から元画像を削除という作業が一番大変かもしれません。GIFや音楽ファイルを扱っている場合はうっかりそれも削除しないように気を付けなければいけませんし。結構骨のおれる作業です。

これから新規で投稿する記事に関してはWordPressにアップする前に「Optimizilla」で圧縮をかけてそれをアップするというだけですが、画像を圧縮していない過去記事はこのように地道な作業をしていく必要があります。

画像圧縮後に再計測

20記事であまり変わらないかと思いますが、一応計測してみましょう。

▼PageSpeed Insights

▼GTmetrix

少し上がったのかな？という感じです。このちょこっと軽量化されたのはプラグインの「Ewww image optimizer」を無効化したというのもあるのでしょう。

このように画像圧縮用のWEBサービスを使うと多少なりとも確実に高速化につながります。といっても、手間が増えるわけですしプラグインを使うより面倒なことは確かです。

関連記事 : 「GIF圧縮」3つのWEBサービスを使って比較してみた