webの話。しかも見る方じゃなくて開発の話。
最近またHTMLをいろいろいじり始めてるんですが、画像が多いページの読み込みがなかなか終わらないのが気になってたんですね。
例えばサークルサイト。画像をたくさんロードするんですよ。今数えたら91枚ありました。あとKTさん保管庫なんかも最近いじりはじめてて、100枚単位で画像を並べるサイトなのでこちらも多かったり。
で、真偽はあいまいなんですが、最新じゃないHTTPは画像のロードが同時に2つまでしかできないらしく、画像の容量じゃなくて画像の数で読み込みが遅くなるっぽいんです。そういえばアマゾンとかツイッターのUI画像って1つにまとめられててるけどそういう意味だったのか。
なんかの情報によると、アクセスしてから3秒で表示されないと見に来た人は帰っちゃうらしいです。うちはもうちょっと待つけど3秒で帰る気持ちも分かる。対策できないかなぁ。
と、調べてたらimgタグとかにloading=”lazy”って書くとスクロールするまで(?)ロードをしないでいてくれるらしいです。
例えばimgタグで使うならこんな感じ。
<img src="image.jpg" loading="lazy">なんかのスクリプトをロードしたりせずこれだけで読み込みタイミングを変えられるとのこと。すごいな。
てことで先述のサークルサイトで実際に試してみました。
まずloading=”lazy”を挿入する前のロード時間。
一番下のピンクの文字が最初のロード時間で、2.64秒だそうです。3秒よりは短いとはいえ、すぐ出てくると思ったものが2.6秒でないのは待たされた感じになっちゃうだろうなぁ。
つづいて、これまで参加したイベント(ページの下の方)のバナーにloading=”lazy”を付与した場合。
1.78秒! 1秒短縮できました! おー、こんだけの手間で30%ロードが短縮するなんて!
さらに、「これまで参加したイベント」のタイトル画像とか、在庫状況の画像にもloading=”lazy”を付けたところ——
1.57秒! 40%の短縮です。体感的にも確実に早くなった!
全部の画像に付けてもいいんですけど、それはそれでスクロールしたときにしんどそうだし、最初にばっと表示される画像は普通に読み込んでおくのかなーと思いここまでにしました。
いやほんと導入難易度の低さに反して効果が大きくて驚いた。
KTさん保管庫の改装もそうだし、てこまいのイラストページも画像が多くて遅いのですぐに適用したいなーと。
これ見てる人でこっち側の人がどれだけいるのか分かんないですが(=これ見てる人がどれだけいるのか分かんないですが)、よかったら試してみてくださいねー