BLOG
 

最近ブログのテーマを変えたのでPageSpeed Insightで測定してみたところ、表示速度がかなり遅いことが判明しました。

PageSpeed Insightの改善提案に従ってブログの高速化を行っている最中です。

今回は第3回目、「画像の最適化」に対応します。

画像の最適化とは?

最適化とは、サイトで使っている画像の画質を保ちつつ、圧縮して転送サイズを減らすことです。

これによりサイトの表示スピードをより高速化することができます。

wordPressで画像の最適化を行うには、

  1. 手動で最適化する
  2. プラグインを使って最適化する

上記の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つ示されていました。

画像の最適化

新しいテーマのファイルに含まれている画像です。4つくらいなら手動で最適化してしまったほうが速いです。

画像を圧縮してくれるサービスで評判の良い「TinyPNG」を使ってみました。

「TinyPNG」の使い方

TinyPNGのページで、圧縮したい画像ファイルをドラッグ&ドロップするだけです。以前はPNGだけだったのですが、今ではJPEGファイルもOKです。

1度に20ファイルまで変換できます。

TinyPNG 画像の最適化

圧縮が完了すると、Downloadリンクが表示されるので、それをクリックしてローカルに保存します。

4ファイル変換したところ、99%も圧縮できました。スゴイ!

TinyPNG 画像の最適化

ATTENTION!

脅威の圧縮率を誇るTinyPNGですが、「不可逆圧縮」です。つまり画像が劣化します。

劣化するのが困るなら「lossless」のOptiPNGなどを使ってみてはどうでしょうか。

私の場合、上記4つの画像は24×24の小さな画像なので劣化はさほど気になりません。

画像を最適化した結果は?

PageSpeed Insight
  • PC 50→66→73→84↑
  • モバイル 39→50→54→64↑

成功です。だいぶ速くなってきました。

明日は「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する」に取り組みます。