2023年11月20日のブックマーク (1件)

  • Lazy Loadで画像を遅延ロードする方法 | ページスピード改善 | テクニカルSEO BLOG

    大量の画像を含むWebページは、一般に表示速度が遅くなりがちです。 imgタグを使って、普通に実装すると次のような現象が起きてしまいます。 画像の読み込みが終わるまでブラウザが重くなり、画面操作に支障が出る ネットワークやサーバーの負荷が瞬間的にひっ迫する PageSpeed Insightsで低スコアになる これだと、サイト利用者にとっても、サーバー側にとっても、いいことはないですね。 対処方法として、スプライト画像を使うとか、CDNを使うとか、Expiresヘッダを設定するとか様々な方法がありますが、Webフロント側でお手軽にできる対策が画像を遅延ロードできるJavaScriptライブラリ「Lazy Load」の導入です。 今回は、Lazy Load で画像を遅延ロードする方法を解説します。 遅延ロードとは? 画像の遅延ロードとは、ブラウザの画面領域内に存在する画像のみをロードし、画面

    Lazy Loadで画像を遅延ロードする方法 | ページスピード改善 | テクニカルSEO BLOG