全部読み込む必要はない！Lazy Loadingを使おう

はじめに

最近のユーザーは待つことにあまり慣れていないため、ページの読み込みに時間がかかりすぎると、ストレスを感じてしまうことがあります。そのため、フロントエンドを扱う際には、最初の読み込み速度を意識することが大切です。エンジニアとして、ただ動くシステムを作るだけではなく、品質の高いプロダクトにすることも考える必要があります。

Lazy Loadingとは？

ページを最初に開いたとき、ユーザーから見えていない要素であっても、ページ内にあるすべての要素がすぐに読み込まれます。そこで使えるのがLazy Loadingというテクニックです。Lazy Loadingを使うと、ユーザーがその要素がある場所までスクロールしたときに、その要素を読み込むことができます。

どのようなメリットがある？

Lazy Loadingを使う主なメリットは、最初は画面に表示されている項目だけが読み込まれるため、画面の初期表示が速くなることです。ユーザーが下までスクロールしなかったり、ページ内のすべての項目を見なかったりした場合、それらは読み込まれないため、通信量の節約にもなります。SPAでは非常に便利なテクニックですが、ユーザーのビューポートよりもページが大きい場合には、いつでも使用することができます。

ただし、Lazy Loadingを使用すると、最初にすべてのコンテンツが読み込まれていないため、スクロールしたときに少し動作が遅く感じられることがある点には注意してください。そのため、すべてを一度に読み込むと時間がかかりすぎてしまうような、非常に大きな画面やSPAで使用するのがおすすめです。

どうやって使う？

使い方は非常に簡単で、HTMLが標準で対応しています。読み込みを遅らせたいHTML要素に、loading=”lazy”を追加するだけです。

<img src=”image.jpg” loading=”lazy”>

これだけです！
これで、上のサンプルの画像は、ユーザーがその画像の近くまでスクロールしたときにだけ読み込まれるようになります。

ということで、今日の記事はここまでです！

今回はかなり短い内容でしたが、これをきっかけに、さらに最適化のテクニックについて興味を持ってもらえたらと思います。エンジニアとして、ただ動くコードを書くのではなく、お客に価値を提供するための方法を常に増やしていく必要があります。そこに私たちの価値があります。

これからも、さまざまな最適化のテクニックを紹介していきますので、お楽しみに！