ページスピードは、Webサイトにとって非常に重要な項目の1つです。
ユーザーの離脱率に大きく影響するため、Web製作者はページスピードを意識しながら制作しています。
自身のサイトのページスピードがどの程度であるかを知るには、Googleが提供している「ページスピードインサイト」というツールを使うのが一般的です。
ページスピードインサイトで指摘されやすく、ページスピードが下がってしまう原因の1つに、「オフスクリーン画像の遅延読み込み」という項目があります。
この項目を解消するためには、「画像を遅延読み込みする」もしくは「プログレッシブ画像を使用する」のいずれかの対応が必要になるのですが、後者で対処する方が望ましいです。
その理由と、それぞれの使い方について詳しく説明していきます。
画像の最適化とは
そもそも「画像の最適化」とはなんでしょうか。
簡単に言ってしまうと「画像の読み込み速度を早くして、ページの表示速度を上げる」ことです。
HTML・CSS・JavaScriptなどのファイルと比べ、画像の方がファイルサイズが大きいので、画像を使用しているページでは画像の読み込むまでに時間が掛かり、Webページの表示速度が遅くなってしまいます。
表示速度が遅くなっている原因の1つである画像を、Webページに最適化することで、表示速度を上げることができます。
画像の最適化には、以下の方法があります。
- 画像のファイルサイズを圧縮する
- デバイスに適した画像サイズを表示する
- 画像を遅延読み込み、またはプログレッシブ画像にする
今回は3つ目の「画像を遅延読み込み、またはプログレッシブ画像にする」についてご説明します。
その他の項目の改善方法については以下の記事でご紹介しているので、気になる方は是非ご覧ください。
「画像の遅延読み込み」とは
まずはデモをご覧ください。
画像の遅延読み込みとは、画面をスクロールして画像の表示エリアに入るまで、非表示またはダミー画像を表示しておく機能のことです（デモではグレーのダミー画像を表示しています）。
画像の表示エリアまでスクロールしないと画像を読み込まないため、Webページの読み込み速度が速くなります。
実装方法
遅延読み込みの実装には、「Lazy Load」や「TADA」などが有名です。
どちらを使用しても問題ありませんが、今回は「TADA」の実装方法をご紹介します。
1. プラグインをダウンロード
「TADA」のファイルをダウンロードします。
まずは、配布サイトよりファイルをダウンロードして解凍します。
2. 画像を用意
実際に表示する画像と、ダミー画像の2つを同じサイズで用意します。
デモでは、以下のファイル名にします。
実際の画像：「image.jpg」
ダミー画像：「dummy.jpg」
3. jsファイルを読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="tada.js"></script>ダウンロードした「tada.js」と、jQueryの本体ファイルを読み込みます。
本体ファイルをCDNで読み込む方法はこちらの記事でご紹介しています。
4. HTMLに記述
<img src="image.jpg" alt="">上記のHTMLに、以下の情報を追加します。
| クラス名 | 任意 |
|---|---|
| data-src属性 | 実際に表示させる画像のパス |
| src属性 | ダミー画像のパス |
<img class="tada" data-src="dummy.jpg" src="image.jpg" alt="">追加すると、このようになりました。
クラス名が「tada」、ダミー画像が「dummy.jpg」の例です。
5. jQueryを実行
<script>
$(".tada").tada();
</script>最後に、jQueryを実行させます。
先ほど<img>に追加したクラス名に対して命令します。
6. 完成
「プログレッシブ画像」とは
まずはデモをご覧ください。
プログレッシブ画像とは、このように画像の読み込みが完了するまでの間、ぼやけた低画質の画像を代わりに表示しておく機能のことです。
ぼやけた低画質の画像はファイルサイズも小さいため、その分ページの読み込み速度が上がるという仕組みです。
実装方法
1. プラグインをダウンロード
いくつか種類がありますが、「progressive-image」というプラグインが簡単に実装できるのでおすすめです。
配布サイトよりファイルをダウンロードします。
CDNでも配信されているので、CDNを利用する場合はダウンロードする必要はありません。
2. 画像を用意
- 実際に表示する画像
- ダミー画像
上記2つの画像を用意します。
ダミー画像は、実際に表示する画像を小さく縮小したものを使用します。
上記は、「幅：400px」の画像を同じ比率で「幅：20px」まで縮小した例です。
サイズは小さければ小さいほど、ぼやけて表示されます。
当然ですが、小さいほどファイルサイズも小さくなります。
3. CSSファイルを読み込む
<link href="dist/index.css" rel="stylesheet" type="text/css">ファイルをダウンロードして読み込む場合はこのように書きます。
<link href="//unpkg.com/progressive-image@1.2.0/dist/index.css" rel="stylesheet" type="text/css">CDNを利用する場合はこちら。
そのままコピペで問題ありません。
4. jsファイルを読み込む
<script src="dist/index.js"></script>ファイルをダウンロードして読み込む場合はこのように書きます。
<script src="//unpkg.com/progressive-image/dist/index.js"></script>CDNを利用する場合はこちら。
そのままコピペで問題ありません。
5. HTMLに記述
<div id="app">
<figure class="progressive">
<img class="preview lazy" data-src="image.jpg" src="dummy.jpg" alt="">
</figure>
</div>このようにマークアップします。
id名、クラス名は以下に従って付与してください。
| 親要素 | id=”app” |
|---|---|
| 子要素 | class=”progressive” |
| 孫要素（<img>タグ） | class=”preview lazy” |
6. jsを実行
<script>
(function(){
new Progressive({
el: '#app',
lazyClass: 'lazy'
}).fire()
})()
</script>最後に、jsを実行させます。
先ほど<img>に追加したクラス名に対して命令します。
7. 完成
「プログレッシブ画像」をおすすめする理由
ではなぜ「遅延読み込み」と同じ結果なのに、「プログレッシブ画像」の方が良いのでしょうか。
その理由は、ユーザビリティとUX（ユーザーエクスペリエンス）が関係しています。
画像が表示されるまでの間にグレーのダミー画像が表示されているよりも、実際の画像をある程度視認できるプログレッシブ画像の方が、心理的に「今画像を読み込み中なんだ」とユーザーは感じやすいです。
その結果、待ち時間による不快感を軽減でき、離脱率が下がるというメリットがあるため、いずれかの対応をするのであれば、「プログレッシブ画像」で対応するべきと考えます。
まとめ
画像の最適化はページスピードインサイトでも指摘されやすい項目です。
せっかく対策するのであれば、よりユーザーにメリットのある「プログレッシブ画像」を検討してみてはいかがでしょうか。
ページスピードインサイト上の数字だけでなく、実際のユーザーの視点に立った施策ができると、WEBデザイナーとして一歩レベルアップと言えるかもしれません。