大量の画像を含むWebページは、一般に表示速度が遅くなりがちです。 imgタグを使って、普通に実装すると次のような現象が起きてしまいます。 画像の読み込みが終わるまでブラウザが重くなり、画面操作に支障が出る ネットワークやサーバーの負荷が瞬間的にひっ迫する PageSpeed Insightsで低スコアになる これだと、サイト利用者にとっても、サーバー側にとっても、いいことはないですね。 対処方法として、スプライト画像を使うとか、CDNを使うとか、Expiresヘッダを設定するとか様々な方法がありますが、Webフロント側でお手軽にできる対策が画像を遅延ロードできるJavaScriptライブラリ「Lazy Load」の導入です。 今回は、Lazy Load で画像を遅延ロードする方法を解説します。 遅延ロードとは? 画像の遅延ロードとは、ブラウザの画面領域内に存在する画像のみをロードし、画面
![Lazy Loadで画像を遅延ロードする方法 | ページスピード改善 | テクニカルSEO BLOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/3d6a80f1ed11482f7bcaef8bc3b8714a2d73ac51/height=288;version=1;width=512/https%3A%2F%2Ftechnical-seo.jp%2Fwp-content%2Fuploads%2F2024%2F02%2F17.jpg)