lazy load(遅延読み込み)について
Lazy LoadとはLazy Load(レイジーロード)とは、必要になるまでデータや画像などのコンテンツを読み込まない技術のことです。「遅延読み込み」とも呼ばれています。「今すぐ表示しなくていいものは、あとで読み込めばよい」という考え方に基づき、多くのWebサービスやアプリで使われている一般的な技術です。 Lazy Loadの主な効果・ページの初期表示が速くなります・無駄な通信やリソース消費を抑えられます ・スクロールに応じてコンテンツが自然に表示されるため、ユーザー体験の向上にもつながります HTMLでの簡単な実装例現在の主要なブラウザでは、画像やiframeに対して以下のように記述するだけで簡単に実装できます。<img src="image.jpg" loading="lazy" alt="遅延読み込み画像">このように loading="lazy" 属性を追加するだけで、画像は画面に表示されるまで読み込まれません。 実装のハードルは高くありません以前はJavaScriptを用いた実装が一般的でしたが、現在は上記のようにHTMLに一行追加するだけで対応できるため、実装コスト・開発リスクともに非常に低く、既存ページへの対応も容易です。注意点(ファーストビューには適用しない)ページを開いた直後に表示されるファーストビューの画像には、loading="lazy" を設定しないようご注意ください。これらの画像まで遅延させてしまうと、逆に表示が遅く見えてしまうことがあり、ユーザー体験を損なう恐れがあります。 ファーストビューには通常の画像読み込みを行い、それ以降の画像にlazy loadを適用するのがベストです。
その他の注意点
・ユーザーがスクロールしないまま離脱した場合、遅延対象の画像は読み込まれません。 |
この記事の目次 |
ありがとうございました。
よろしければ、ご意見をお聞かせください。
件名、コメントをご入力いただき、『送信』ボタンをクリックしてください。
ご意見を送られない場合は、『閉じる』ボタンをクリックしてください。