Google Chrome、Microsoft Edge、Firefox、Safariといった今どきのWebブラウザーでは、ユーザーの使いやすさを向上するようなWebの表現を、ブラウザーの違いを気にすることなく実装できる。シンプルなコードでWebの表現力をアップさせる最新機能を紹介する。
Webページの表示速度を向上するための「画像の遅延ロード」というテクニックを紹介します。HTMLのコードで実現できます。
Webページには大量の画像が使われています。ユーザーがWebページにアクセスしたときにすべての画像を一気に読み込んでしまうと、ページの表示速度は遅くなります。表示速度が遅いWebページは、使いづらいものです。
この問題を解決する手段の一つが「画像の遅延ロード」です。遅延ロードでは、最初からすべての画像を読み込むことはしません。ページをスクロールしていって、画像の表示が必要になったタイミングで初めて画像を読み込むというものです。ユーザーがWebページにアクセスしたときには必要最低限の画像しか読み込まないため、ページの表示速度の向上が見込めます。
モダンブラウザーであれば、HTMLの画像を埋め込む要素であるimgタグのloading属性に、lazyを指定するだけで実現できます（表4）。
画像の遅延ロードを行う場合と行わない場合のそれぞれの画像の読み込み方を確認しましょう。
図6のように、縦方向に大量の画像を表示するWebページを作ります＊4。ユーザーがWebページにアクセスしたときに最初の画面で見えている画像は、上から3枚目の上半分までです（図6のA）。ページを下方向にスクロールすると、上から4枚目以降の画像（図6のB）が画面に次々と見えるようになります。ここでは、縦方向に20枚の画像を表示するページを作ります。
