【ロード時間を短縮！効率の良いサイトに早変わり】画像のローディングを再考する

ウェブデザインにおいては、目に見えないものがUXやブランド価値を犠牲にすることがあります。画像のことです。

画像は多くの帯域を占め、送信するのにも受信するのにもお金がかかります。ユーザーがページの一番下までスクロールしなければ、結局は見られることのない画像にお金を払っていることになってしまいます。

この記事では画像が占める帯域幅を削減する方法についてご紹介します。ロード時間の増加はパフォーマンスを遅く感じさせてしまうものですから、少しでも削るに越したことはありません。

3つの解決法

ウェブサイトを軽くするために開発者ができることがいくつかありますが、常にベストな方法は存在しません。場面に合わせてこれらを使い分けるのが最善策です。

1. 1.画像のプリロード

デザインの優れたサイトでの採用が増えている手法です。

プリロードで気を付けたいのが、。ユーザーが必要とする時までには読み込みを終えておくことです。そうでなければ、結局はユーザーを待たせることになってしまいます。プログレスバーなどを表示することもできますが、ユーザーに気付かれないうちに読み込みを進めておくこともできます。

サイトに画像スライダーやギャラリーがあるのなら、プリローダーにユーザーが次に見たいと思う画像を読み込ませておくことができます。これができればシームレスなUXが実現できます。ただしJavaScriptを多用するので、回線状況がよくなかったり遅いデバイスでは負担になります。

2. 2.必要な画像のみの読み込み

プリロードと比べて柔軟性の高い手法で、実はほとんどのウェブサイトで既に使われています。画像が多ければ多いほど活躍してくれます。

トラフィックの削減が目的であれば、迷わずこれを選びましょう。不要な画像が読み込まれなければ、それだけ帯域を削減できます。難点は今回紹介する手法の中では最もJavaScriptを使用することになるため、コードがより複雑になり開発にも時間がかかります。不具合も出やすくなるでしょう。

この手法が輝くのは安定した速いネットワークと速いプロセッサのある環境です。もしローエンドのスマートフォンなどもターゲットにする場合にはJavaScriptの使用は抑えるのが無難です。

3. 3.プログレッシブ画像を使う

FacebookやMediumが好む手法で、絶対に画像を表示しておきたい場所に使われています。

多くの場合は元の画像よりも小さくボヤけた代替画像を用意し、まずはそれを表示します。解像度の高い元画像の読み込みが終わったらそれと入れ替えるのです。Mediumのポストなどは最初の印象が大切です。ボヤけていてもとりあえず画像が表示されているポストと全く表示されていないポストでは印象が大きく変わります。

帯域の消費が心配なら、レスポンシブ画像などのテクニックと組み合わせて使うといいでしょう。
 
 
 
 

まとめ

オススメするのは、必要な画像のみを読み込む手法で、ほとんどのウェブサイトではこれで十分でしょう。

プログレッシブ画像は画像が欠かせない場所に、プリロードはそれ以外の手法が取れない時にのみ使うのがいいでしょう。組み合わせて使うことで、サイトがもっと効率よくなりますよ。

※本稿は 「Image Loading, Reloaded」を翻訳・再編集したものです。