Webブラウザの開発ツールで遅延読込の効果を検証
画像の遅延読込によるページ読込時間の違いを、Webブラウザが備える開発ツールを用いて検証します。リスト2のWebページに1024×768ピクセルのJPEG画像を20枚設定してレンタルサーバーに配置し、iPhone 5sのSafariブラウザで表示させます。使用ネットワークは携帯電話(SoftBank 4G LTE)とします。この際iPhone 5sをMacとケーブルで接続して、iPhoneにおけるWebページ読込時間をMacのSafariからWebインスペクタを用いて測定します。
図3は、Lazy Loadによる遅延読込を行わない場合のWebインスペクタ画面です。20枚の画像がすべて読み込まれることで、ページ読込時間が長くなっていることが分かります。
一方、図4は遅延読込を行った場合のWebインスペクタ画面です。20枚の画像のうち読み込まれるのは画面に収まる2枚のみで、それ以外の画像については読み込まれていないことが分かります。
各5回ずつロード時間を計測した結果、ページ読込完了までの時間は遅延読込を行わない場合で平均8.3秒、遅延読込する場合で平均2.5秒でした。ページに含まれる画像の枚数や容量が大きくなるにつれ、この差はさらに大きくなります。
測定 | 遅延読込なし | 遅延読込あり |
---|---|---|
1回目 | 9.15秒 | 2.37秒 |
2回目 | 9.98秒 | 2.6秒 |
3回目 | 7.75秒 | 2.48秒 |
4回目 | 7.65秒 | 2.56秒 |
5回目 | 7.15秒 | 2.55秒 |
平均 | 8.34秒 | 2.51秒 |
まとめ
本記事では、Lazy Loadプラグインを用いた画像の遅延読込を紹介しました。PC向けWebページおよびjQuery Mobileを用いたスマートフォン向けWebページを作例として示しました。ツールを用いた測定結果から、画像の遅延読込でWebページの読込時間を短縮できることがご理解いただけたのではないでしょうか。画像の遅延読込は、特にスマートフォン向けページにおいてよく見られる、縦に長いページに画像が多く含まれるようなケースで効果を発揮すると思われます。