最近ブログのテーマを変えたのでPageSpeed Insightで測定してみたところ、表示速度がかなり遅いことが判明しました。
PageSpeed Insightの改善提案に従ってブログの高速化を行っている最中です。
今回は第3回目、「画像の最適化」に対応します。
- サイト高速化第1回 「圧縮を有効にしてサイトを高速化しよう！」
- サイト高速化第2回 「ブラウザのキャッシュを活用してサイトを高速化しよう！」
画像の最適化とは？
最適化とは、サイトで使っている画像の画質を保ちつつ、圧縮して転送サイズを減らすことです。
これによりサイトの表示スピードをより高速化することができます。
wordPressで画像の最適化を行うには、
- 手動で最適化する
- プラグインを使って最適化する
上記の2つの方法があります。
画像の最適化にオススメのプラグインは「EWWW Image Optimizer」
「EWWW Image Optimizer」はこれからアップする画像の最適化と、過去にアップロードされた画像の最適化を行うことができます。
「EWWW Image Optimizer」の使い方
「EWWW Image Optimizer」をインストールして有効化したら、特に設定は必要なく、新規で画像をアップする際は自動で圧縮してくれます 。
また、過去にアップロードした画像を最適化したい場合は、メディア＞Bulk Optimize＞Optimize Media Libraryの「Start optimizing」をクリックします。
「TinyPNG」を使って画像を最適化
実は私は、「EWWW Image Optimizer」は以前にインストール済みだったのです。
PageSpeed Insightの詳細を表示してみると、最適化の必要な画像が４つ示されていました。
新しいテーマのファイルに含まれている画像です。4つくらいなら手動で最適化してしまったほうが速いです。
画像を圧縮してくれるサービスで評判の良い「TinyPNG」を使ってみました。
「TinyPNG」の使い方
TinyPNGのページで、圧縮したい画像ファイルをドラッグ＆ドロップするだけです。以前はPNGだけだったのですが、今ではJPEGファイルもOKです。
1度に20ファイルまで変換できます。
圧縮が完了すると、Downloadリンクが表示されるので、それをクリックしてローカルに保存します。
4ファイル変換したところ、99%も圧縮できました。スゴイ！
脅威の圧縮率を誇るTinyPNGですが、「不可逆圧縮」です。つまり画像が劣化します。
劣化するのが困るなら「lossless」のOptiPNGなどを使ってみてはどうでしょうか。
私の場合、上記4つの画像は24×24の小さな画像なので劣化はさほど気になりません。
画像を最適化した結果は？
- PC 50→66→73→84↑
- モバイル 39→50→54→64↑
成功です。だいぶ速くなってきました。
明日は「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する」に取り組みます。
