ユアマイスター株式会社エンジニアブログ

ユアマイスター株式会社のエンジニアが日々徒然。

サイトの表示速度は収益を左右する!!画像を最適化して、簡単に表示速度UP

0.1秒が売り上げを左右する

amazonの調べによると、ページの読み込み時間が0.1秒減ると、売り上げが1%上がるようです。 弊社のサイトも、サービス数が増えるに従って表示速度がきになるようになってきましたので、 スピードアップを図りたいと思います。

簡単にできるのは、画像の最適化。一番単純ですが、サイトの状態によっては一番効果的です。

今回は、開発マシンのmacbook proとimageOptimという画像圧縮ツールを使います。

imageOptim

https://imageoptim.com/mac

画像最適化ツールはJPEGminiやTinyPNG、PNG miniなどいろいろ存在しますが、 それぞれjpgやpngだけにしか対応していなかったり、有料だったりするため、 jpgもgifも存在する弊社サイトでは、imgeOptim一択でした。

使い方

使い方は簡単!imageOptimを起動すると表示される画面めがけて、画像をドラッグ&ドロップするだけ。 まとめてドラッグ&ドロップすると、一気に最適化してくれます! f:id:yourmystar_engineer:20170320105126j:plain

やってみた

数万もの画像を一気に圧縮したため、我がmacはプシューッ!!と凄まじい音を立ててましたが、 無事完了。 私の環境では、画像は平均して75%圧縮され、表示速度は単純計算で4倍になる模様!

やった後に悔やまれたのは、改善前のページ表示速度を記録していなかったこと。 もちろん体感速度は上がったものの、これじゃどのくらい早くなったのかわからないじゃん…

皆さんは、改善前後に下のツールを使ってちゃんと効果検証するようお勧めします。

https://search.google.com/search-console/mobile-friendly

簡単お手軽にサイト改善ができる画像圧縮、機会があれば試してみてくださいね。