実際、画像を軽量化すると本当に表示高速化されるの？LightFileの処理前後が比較できるページを公開しました。
表示の高速化は必須条件です。
提案書にも書くことが増えてきている今日このごろ、どうやって解決しようかお悩みですか？今回は、弊社の画像最適化ツールLightFileの効果を体感するページを作成しました。表示高速化の第一歩は、画像の最適化がオススメです。
比較ページを見てみよう
LightFileの処理結果を比較するためのページ
今回は、HTMLがほぼ同じなページを２ページ作成し、表示する画像をLightFileの処理前と処理後でそれぞれ読み込ませるようにしました。これにより、キャッシュを消してリロードするとか、ChromeのDevToolsでいろいろ見てみるとか、比較できるようにしてみました。
それぞれのページのスペックは以下のとおりです。
- サーバ：AWS S3にコンテンツを置いて配信
- オリジナル：処理前の画像を表示するページ
- LightFile処理版：処理後の画像を表示するページ
それぞれの表示する画像のファイルサイズは以下のとおりです。
- オリジナル：12.6MB
- LightFile処理版：4.6MB
LightFileで処理をすると、約1/3のファイルサイズになっています。かんたんに表現してしまうと、ダウンロードにかかる時間が約1/3ですんでしまうことになります。実際に、ファーストビューの画像が表示されるまでの時間は、明らかにLightFile処理版の方が早いです。可能であれば、Wifiなどの高速回線ではなく、3G回線などの少し遅めの回線で見ていただくと、その違いは驚くほど体感することができますよ！
比較ページはこちら
ページにアクセスすると、PCではページ右上、スマホではページ上部にナビゲーションがあります。それぞれ以下のテキストリンクがあるので、ページを切り替えて表示してみてください。
PC版でのページ切り替え
スマホ版でのページ切り替え
オススメな違いを比べる方法
GoogleのChromeをご利用の方は、ぜひDevToolsを利用しましょう。
- 画面を右クリックして、「検証」を選ぶと、ブラウザの下や右側にDevToolsのパネルが表示されます。
- 上の方に、Networkというメニューがあるので、そこをクリックします。
- ブラウザのリロードボタンを長押しして、「キャッシュの消去とハード再読み込み」を選びます。
- ブラウザのキャッシュが消え、ページの要素をすべてダウンロードします。
- パネル下部に転送量や、どのくらいの時間がかかったのかなどが表示され、見比べることができます。
詳しくは、こちらのブログ記事を参考にしてみてください。
#Chrome 便利ですよね！今回はNetworkパネルで、画像がどのくらい読み込まれているのかがわかる！というご紹介です。ちなみに画像と同じく重いのは、#フォント です。https://t.co/iA9tes17Zt
-- アイデアマンズ (@ideamans) 2018年2月2日
最後に
表示高速化は、さまざまな要素が絡み合っているため、できるだけシンプルに対応することが重要です。LightFileは、開発不要で、AWS Lambdaか、サーバにインストールすることで設定が可能です。処理はすべて自動で行われるため、一度設定してしまえば、もう気にすることはありません。
JPGの最適化は、LightFile Core | 画像の最適化でページ表示を高速に！
自動でJPEGファイルを容量削減し、表示の高速化/転送量の削減を実現します。
仕組みを自動化することで、半永久的に問題を解決することが可能なのです。
メール無料相談
お聞きになりたいことはありませんか？ この記事の筆者 グロースハッカー能勢 がまずはメールで疑問やお悩みを伺います！ フォームよりお気軽にお寄せください。
担当サービス 画像最適化ツール LightFile
フォローしませんか？
次へ