ポイント
- 外部の画像サーバーは安定性の懸念がある
- 画像を後から差し替える
目的：画像を速く、確実に表示する
前回、外部のサーバーを利用すると画像を高速に表示できることを紹介した。
一方で、外部のサーバーは安定性の懸念があり、サーバーにトラブルが発生すると画像が表示されなくなる問題がある。
そこで、画像を遅延読み込みで差し替えて確実に表示できるようにする。
遅延読み込みの方法
遅延読み込みする画像は、次のように記述する。
<img src="元の画像のURL" data-src="差し替える画像のURL" alt="画像の説明" height="高さ" width="幅"/>
data-src="" という項目を追加して、差し替える画像のURLを記入する。
次に、ページの最後にこの記述を追加する。
<script> //画像の遅延読み込み
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
var slowImages = document.querySelectorAll('img[data-src]');
slowImages.forEach(function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
});
}, 150); // 150ミリ秒遅延実行
});
</script>
ページの表示から 0.15 秒後 に、<img> の src="" の内容を data-src="" の内容に書き換えている。
このスクリプトは軽量でどこに配置しても良いが、一般的には一番最後の </body> の前に記述する。
実際の動作
実際の差し替えを Chrome の 開発者ツール で確認してみる。
ページの読み込みに続いて、初期サーバーの画像が読み込まれる。こちらは読み込みが早い。
ページの読み込み終了から 0.15 秒後に、差し替えるサーバーの画像の読み込みが始まる。こちらは遅く、約１秒 かかっている。
そして、ページ読み込み開始から ２秒後 に、画像が入れ替わっている。
画像差し替えのメリット
- 画像表示を１秒短縮できる
- 外部サーバーがサービスを終了しても画像が表示される
画像差し替えのデメリット
- 画像を２回読み込むのでデータ通信量が増える
- 画像を挿入する時に少し手間が増える
実際のデメリットは？
データ通信量は、初期画像を高圧縮にすれば問題ない。
画像を挿入する手間も、外部サーバーはトップの画像にのみ使えばよいのでそれほど大変ではない。
参考：通常の遅延読み込みの用途
通常は、遅延読み込みは初期画像に1px × 1px の非常に軽いダミー画像を挿入して、読み込み負荷を減らす目的で使う。
ダミー画像の例：
src="data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"
現在は、全てのブラウザが <img loading="lazy"> による遅延読み込み対応したので、以前より使うことは少なくなった。
loading="lazy" との比較
| loading="lazy" | 今回の方法（Javascript） | |
|---|---|---|
| 対象 | img と iframe のみ | 何でも |
| タイミング | 指定できない | 細かく設定できる |
| 最初の画像 | 使うとスコアが悪化 | 一応使える |
| Javascript 無効時 | 動作する | 動作しない |
最初の画像に Javascript による遅延読み込みを行うと、スコアは上昇するが実際の画像の表示は遅くなる。
注意：height と width を記入する
画像を遅延読み込みすると、レイアウトシフト（ページの表示がカクッと崩れる）が発生する。
レイアウトシフトは見ていて不快で、さらに再レンダリングのためにパフォーマンスが悪化する。
これを防ぐため、遅延読み込みする場合は height と width を明示的に記入して、レイアウトを保持する。
まとめ
- 遅延読み込みで画像を差し替える
- 高速なサーバーを利用しながら、確実に表示できる
次の記事
前の記事
オリジナルのブログ記事