ポイント

外部の画像サーバーは安定性の懸念がある
画像を後から差し替える

目的：画像を速く、確実に表示する

前回、外部のサーバーを利用すると画像を高速に表示できることを紹介した。

一方で、外部のサーバーは安定性の懸念があり、サーバーにトラブルが発生すると画像が表示されなくなる問題がある。

そこで、画像を遅延読み込みで差し替えて確実に表示できるようにする。

遅延読み込みの方法

遅延読み込みする画像は、次のように記述する。

<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 を明示的に記入して、レイアウトを保持する。

まとめ

遅延読み込みで画像を差し替える
高速なサーバーを利用しながら、確実に表示できる

次の記事

前の記事

オリジナルのブログ記事