ページを開いた瞬間には全部見えない
長い通販ページを下へ動かすと、商品写真が一瞬遅れて現れることがあります。これは通信が必ず不調というわけではありません。画面の下の方にある画像を、必要になりそうな時点まで読み込まない設計があるからです。「遅延読み込み」と呼ばれる工夫で、画面を最初に開くときの負担を減らすために使われます。
もし百枚の画像があるページで、利用者が最初の五枚しか見ないなら、残り九十五枚を最初から全て取得する必要はないかもしれません。重い画像を後回しにすることで、文章や見出しを早く表示し、通信量を節約できる場合があります。全てを一度に取り寄せることが親切とは限りません。
スクロール位置が読み込みに関わる
画像には、表示領域へ近づくまで読み込みを遅らせるようブラウザーへ伝える方法があります。ウェブ制作ではHTMLの画像要素へ設定を付けて利用できます。これにより画面のずっと下にある画像まで、最初の瞬間に全て取得する必要がなくなります。ただし、どの距離で読み込みを始めるかなどはブラウザーの実装によります。
一方、目立つ最上部の写真まで遅らせると、ページの第一印象が悪くなるかもしれません。重要な画像は早く読み込み、下の方の画像だけ後回しにするなど、配置に応じた使い分けが必要です。何でも遅延読み込みにすれば速く感じるというわけではありません。
画像が突然入ると文字が動く
文章を読んでいるとき、後から画像が挿入されて文字の位置が大きくずれることがあります。原因の一つは、画像が入るための空間を事前に確保していないことです。縦横の大きさが分かっていれば、画像が届く前からその分の場所を空けられます。表示の安定性にも設計の工夫が要るのです。
これは、机の上へ後から大きな荷物を置く場面に似ています。最初から置き場所が空いていれば周囲のノートを動かす必要はありません。しかし場所を決めていないと、荷物が届いた瞬間に他のものをずらすことになります。画面のレイアウトにも同じ考え方が使えます。
通信量はどのくらい違う？
説明用に、一枚200KBの画像が五十枚あるページを想像します。全て取得すれば画像だけで約10MBです。一方、最初に五枚だけ読み込むなら画像については約1MBです。これは単純化した比較で、実際のページには文章、プログラム、広告、画像以外の通信もあります。
また画像がそれぞれ異なる大きさなら、枚数から通信量を計算することはできません。同じ五枚でも高解像度写真と小さなアイコンでは差があります。遅延読み込みの狙いは「画像を減らす」だけではなく、必要な時点まで取得を遅らせることにあります。
見えていない＝存在しない、ではない
一部のページでは、下へスクロールして初めて画像や商品一覧が表示されます。そのため、ページを開いた直後の画面だけで全情報を見たと思うと見落とします。スクロールが必要なことと、ページそのものに内容が存在しないことを区別します。ただし画像の配信エラーで本当に表示されない場合もあります。
商品の比較表や長い記事を読むときは、最後の方まで見て必要な情報がないか確かめましょう。途中で止めるかどうかを自分で選ぶことと、読み込まれていないから内容がないと推測することは別です。
遅延読み込みは万能ではない
ネットワークが非常に遅い環境で急に下までスクロールすると、画像の準備が間に合わず待つことがあります。また画像の代替テキストやレイアウトの指定が不十分だと、使いにくさにつながることもあります。表示の速さだけでなく、視覚的な安定や読み上げ機能への配慮も評価の対象です。
読み込みを遅らせる位置を変えると、最初の表示が速くなる反面、下部へ移動した際の待ち時間が増える場合があります。だから「全体の時間」と「今見たい部分の時間」を分けて測ることが重要です。
読み込みの順番は編集方針にもなる
子ども向けの解説記事で、最初の画面に図解が一枚必要なら、その図は優先して表示した方が理解しやすいでしょう。反対に記事の最下部にある関連記事の画像は、読む人が近づくまで待たせても大きな問題がないかもしれません。画面のどの部分が理解に欠かせないかで読み込み順序を決められます。
同じ記事でも、最初に目に入るものと後で目に入るものでは役割が違います。読み込みの技術だけで決めず、読者が何を知りたいかも設計に入れると、文章・画像・表示速度を一体として考えられます。
データ節約にも限度がある
画面の下の画像を遅らせても、利用者が最後までスクロールして全てを見るなら、結局ほとんどの画像を取得する場合があります。したがって遅延読み込みは、どんな閲覧でも通信量を半分にするような万能の節約方法ではありません。効果は利用者の行動に左右されます。
さらに画像を必要な時点で読み始めることで、通信の状態が悪ければ待ち時間が発生する可能性もあります。初期表示の速さと、最後まで読んだときの快適さを別々に評価することが大切です。
見た目が整っていても読みにくい場合
画像の枠があらかじめ確保されていれば、画面の大きな揺れを減らせます。しかし説明画像が小さすぎたり、文字が細かかったりすれば内容は伝わりません。視覚的に安定していることと、内容を理解できることは別の品質です。
記事を作る側はスマートフォンでも文字が読めるか、読み上げに必要な代替テキストが付いているかも確認します。速さだけを追うのではなく、読む人が意味を理解できるところまで設計する必要があります。
体験と仕組みを結びつける
公開されている長いページで、スクロール前後に画像がいつ現れるかを観察できます。端末やブラウザーの設定、通信状態でも結果が変わるので、一度の観察だけでサイト内部のコードは決められません。しかし、なぜ画面下の画像を後から読む利点があるかは理解できます。
ウェブの速さは、全ての材料を同時に運ぶことだけで決まるわけではありません。利用者が今必要とするものを先に届ける順序の設計が、体感上の使いやすさにつながります。
