htmlでlazyLoadを実装する

# lazy loadとは

画像を大量に使用したサイトだと負荷がかかり表示スピードが下がることがあるかと思います。
そんな時に使用できるのがlazy loadです。

lazyロードはスクロール位置に合わせて画像を読み込んでくれる機能で、最初にサイトを開いた際のページ下部の画像を読み込まないことによってサイトの表示スピードを上げられます。

# やり方

実装自体はかなり簡単で、imgタグの中にloading="lazy"を記入するだけとなります。

<img
  src="images/hoge.png"
  loading="lazy"
>

# まとめ

一行付け足すだけでサイトが軽くなるので、パフォーマンスはかなり良いと思います！
早速実務でも使用していきたいです！