先日から、ブログの高速化をしています。
とりあえずこれまでに以下の高速化作業をしてきました。
これらの作業によりPageSpeed Insightsのスコアが、61→77とかなり改善してきました。
毎回、一つ一つ成果を確かめながら高速化させたいので、今回は「画像最適化してブログの高速化」を行いたいと思います。
photo by Rami ™
目次
画像の最適化って？
簡単に言うと、ブログで使っている画像の画質は保ったまま圧縮して転送サイズを減らし、ブログの表示スピードを速くすることです。
PageSpeed Insightsの提案には以下のように出ています。
画像を最適化する
画像を適切にフォーマット化して圧縮すると、データ サイズを大きく削減できます。
次の画像を最適化すると、サイズを 41.6 KB（15%）削減できます。
画像を適切に圧縮することで、41.6KB全体の画像サイズを削減できるようです。ちょうど上にあるPNG画像が22KBなので、トップページだけでその約2倍削減できることになります。
今回の方法では、ブログの記事などにも使われているすべての画像を最適化します。ですので、まだ未対応の場合は今回の方法で、かなりサーバーの負担を減らすことができます。
画像の最適化方法
画像の圧縮方法については、
- WordPressテーマに使われている画像の圧縮
- WordPressメディアにアップロードされている画像の圧縮
では異なった圧縮方法をとります。
以下でそれぞれ説明していきたいと思います。
1.テーマに使われている画像の圧縮
PageSpeed Insightsの提案などで指摘されているWordpressテーマで使用されている画像を圧縮するには手作業で行うのが手っ取り早いと思います。手作業とは言っても、特別なソフトは必要なく画像を圧縮するWEBサービスを使用します。
以下で、PNG画像とJPEG画像の圧縮方法について説明したいと思います。FTPソフトなどでテーマのイメージフォルダ内の未圧縮画像をダウンロードしておいてください。
PNG画像の圧縮
PNG画像の圧縮には、TinyPNGを使うと簡単です。（追記：現在は、JPEGでも使用できます。）
このツールは、より圧縮度が高い不可逆圧縮（lossy圧縮）です。ロスレス圧縮をしたい場合は、Kraken.ioを利用するとできます。
使い方は簡単で、PNG画像をドロップボックスにD&Dで放り込むだけです。すると自動的に画像が圧縮されるので「download」リンクから圧縮画像をダウンロードするだけです。
全体で61％もPNG画像が圧縮されました。
追記：以前、ロスレスと書いていましたが、非可逆圧縮なので多少のロスはあります。ただ、素人目にはまずわからないと思います。コメントにて間違いを教えていただきました。ありがとうございます。
JPEG画像の圧縮
JPEG画像は、JPEG & PNG Image Compressionなどで圧縮します。
このツールも、不可逆圧縮（lossy圧縮）です。ロスレス圧縮をしたい場合はKraken.io。
こちらも使い方は簡単で、JPEG画像をD&Dでドロップボックスに放り込みます。
後は画像を選択して、「SAVE」ボタンから画像を保存してください。
画像の圧縮作業が終わったら、FTPソフトなどでアップロードして、テーマで使用されている画像を圧縮後のファイルで上書きします。
2.メディアにアップロードされている画像の圧縮
こちらは、記事などで使用されているメディアにアップロードされた画像の圧縮方法です。
WordPressプラグインを使用して自動処理させるので、テーマ画像を圧縮するより手間はかかりません。
その手段とは、「EWWW Image Optimizer」というプラグインを使った方法です。Wordpress上で「EWWW Image Optimizer」をインストールしてください。
EWWW Image Optimizerの設定
「設定→EWWW Image Optimizer」から「EWWW Image Optimizer Settings」画面を表示させてください。
「Optimization Settings」の項目から、「Remove metadata」にチェックを入れてください。
この設定を行うと、JPEG画像に埋め込まれているExif情報という撮影情報を写真から取り除いてくれます。一つ一つの画像のExifサイズは大したことないかもしれませんが、ブログに画像が多いほど、訪問者が多いほどこの設定は活きてきます。
EWWW Image Optimizerで一括圧縮
※プラグインを使った一括作業を行う場合には、一応念のためバックアップを取ることをお勧めします。
EWWW Image Optimizerを普段から使っている場合は、アップロード時に画像が圧縮されているので以下の作業は必要ありません。
メディアの画像を一括で圧縮するには「メディア→Bulk Optimize」に移動し「Import images」ボタンを押してください。
重複して、最適化（圧縮）するのを防ぐのに、メディアライブラリの画像をデータベースに取り込みます。
インポート中画面が出るのでしばらく待ちます。
終了すると、再び「メディア→Bulk Optimize」に移動し「Start optimizing」ボタンを押してください。
画像の最適化（圧縮）作業が開始されます。この作業は、画像の量によっては1時間以上かかることもあるので、おやつでも食べて気長に待ちましょう。
全て終了したら、メディア画像の圧縮作業は終了です。
画像の最適化（圧縮）前と後の変化
PageSpeed InsightsとGTmetrixとWebsite speed testで、スコアを計測してみました。
PageSpeed Insights
だいたい同時刻に計測。
画像の圧縮前
画像の圧縮後
スコアが76→79に改善しました。
受けていた提案は、以下のように改善しました。
画像の圧縮前
画像の圧縮後
とりあえず、自分のサーバーにあるトップページ画像は圧縮して40KBくらいは削減できました。
GTmetrix
だいたい同時刻に計測。
画像の圧縮前
画像の圧縮後
ページスピードグレードが90％（A）→91％（A）に改善。YSlowグレードは、なんだか知らないけど69％（D）→68％（D）に下がってしまいました
トータルページサイズも、1.18MBだったページサイズが、1.04MBに減少しています。
個別指標は、こんな感じで変化しました。
画像の圧縮前
スピード
YSlow
画像の圧縮後
スピード
YSlow
スピードに関しては、目立ったアップはなく微妙に上昇している感じ。
YSlowに関しては、「Avoid URL redirects」が下がってしまいました。詳細を見ると外部へのリダイレクトが原因のようなので今回の画像最適化（圧縮）とは関係ないようです。
Website Speed Test
だいたい同時刻に計測。
画像の圧縮前
画像の圧縮後
グレードが81→84に。ページサイズが減っています。
以下は各パフォーマンスです。
画像の圧縮前
画像の圧縮後
数値が微妙に増減していますが、平均値は81→84に上がっています。
まとめ
今回は、以下の2つの作業を行いました。
- テーマで使われている画像の手動による圧縮
- プラグインを使ってメディアライブラリの画像を圧縮
今まで使われている未圧縮画像は、大した数ではなかったですし、メディア画像の圧縮は、プラグインがほとんどやってくれるので、大した手間もかかりませんでした。
作業時間にしたら30分もかからなかったと思います。（プラグインの自動実行時間は除く）
簡単な作業で結構画像をサイズを削れて、効果的なので、普段から画像が重いなと感じている場合は、今回の方法を試してみてください。
「EWWW Image Optimizer」知りませんでした。
これは便利ですね。