ページ読み込みが3秒以上かかると53%のユーザーが離脱
自社サービスも計測した結果、読み込みにに10秒以上かかっていて、PageSpeed Insightsでの点数では30点台と低い数値となっていました。
※PageSpeed Insights図
システム・クリエイティブの少数精鋭でサイト最適化・高速化の改善を半年以上かけて行い、ウェブサイトの表示速度を2秒台まで縮め、最適化の点数も最大で80点台を出すことに成功しました。
その中で改善項目の一つでもあった「画像最適化」について簡単にお話しをしたいと思います。
画像最適化
webページ上のダウンロード容量を調べたところ、ほとんどが画像で占めていました。
最適化することでwebページの容量の大幅な削減やパフォーマンス改善に繋がります。
画像圧縮はコマンドラインで
これまで外部webサービスの「TinyPNG」を利用して画像圧縮を行ってきましたが、コマンドラインを使用したフローに変更しました。
導入が楽
引数にオプションつければなんでもできる
作業スピードの短縮にも大きく繋がった
圧縮しよう
- 拡張子pngは
pngquantを使用。 - 拡張子jpgは
jpegoptimを使用。
インストール
brew install pngquant //PNG
brew install jpegoptim //JPG
使い方
pngquant
sample.pngを圧縮してみる。
pngquant --ext .png --force sample.png
--extと--forceはオプションです。
--extは拡張子等。
--ext -new.pngにすると、sample.pngがsample-new.pngとして保存されます。
--forceは上書きオプションです。
jpegoptim
sample.jpgを圧縮してみる。
jpegoptim --max=80 sample.jpg
--maxはオプションです。
上記例の--max=80は品質80%で圧縮してくれます。
圧縮前・後の画像を比較
横幅150px 縦幅94pxの画像をコマンドラインにて圧縮した比較が以下になります。
見栄えもほぼ変わらず、容量を-2 KB縮めることが出来ました。
今回、例にあげた画像は容量が低めでしたが、500 KB近く容量がある画像などもあったりします。その場合は画像サイズを縮め、そこから圧縮することによって5〜6 KBほど圧縮するようにしています。
この作業を画像サーバーにアップした段階で自動で圧縮する仕組みも考えましたが、画像によっては荒くなって見えづらくなる問題もあったため、地道に手作業で一つ一つ圧縮し、目視で画像を確認するようにしています。
地道にこういったフローを踏みつつ、画像最適化の作業を進めています。地味な作業かもしれませんが、大幅にサイトパフォーマンスを改善することが出来ました。
サイトが重いと感じた方は、ぜひこのフローを取り入れてみてもよいかもしれません。