こんにちわ、ロキです。
年々スマートフォンのユーザーが増える中、モバイルへの最適化は必須ともいえる時代になってきました。
スマートフォンへの最適化といえばレスポンシブルデザインが良くいわれますが、それと同じくらい必要なのが、サイトスピードアップといえるでしょう。
デザインが凝っていたり、やたら綺麗な写真を載せているサイトは往々にして読み込みが遅くなりがちです。
パソコンであれば、大した問題ではないかもしれませんが、スマートフォンの場合はどうでしょう。
・・・なかなか表示されずにイライラしたユーザーは表示される前に離脱してしまうでしょう。
今回は画像圧縮により、サイトスピードを上げてみたいと思います。
試してみたのは私のブログのこのページ
歴代のアサヒビールのイメージガールを紹介した記事ですが、そこそこ画像が多いので
スマートフォンだと確かに表示に時間がかかります。
サイトスピードを計測するPingdom Website Speed Testを使用して計測してみました。
…まあ、いいのか悪いのか正直よくわからないですね。
次に画像を圧縮してみましょう。
使うツールはJPEGmini
このツールに片っ端から元の画像を突っ込んで圧縮していきます。
この画像だと２３KBが１９KBに圧縮されているようです。
元の画像が重ければ重いほど、このツールの効果が大きくでます。
そんなこんなで画像を全部圧縮したものに差し替えてみました。
見た目はほとんど変わりません！
ではスピードはどうでしょう。
グレードとかはさておき、読み込み時間が4.89秒→1.46秒になりました！
スマートフォンで見ても確かに表示が早くなったように感じます。
(あくまで体感ですが)
すごいぞ！JPEGmini！
ちょっと面倒な作業ですが、こういった細かい配慮がユーザービリティの向上に
つながるのだと信じて続けていこうと思います。
以上、画像圧縮でサイトスピードを上げる試みでした！
