「オフスクリーン画像の遅延読み込み」への対策

2019年11月6日 HTML&CSS

速度(試験運用版)

サーチコンソール(google search console) に先日から,「速度(試験運用版)」というページが表示されるようになった.

サーチコンソール(速度)

どうやら,ある程度のページビューがないとここには表示されないようだ.

ここに「低速 URL」「中速 URL」「高速 URL」が何件あるかという表示がされている.

さらにここから,下の Page Speed Insight に飛ぶことが可能になっている.
https://developers.google.com/speed/pagespeed/insights/

ここで計測した場合に「改善できる項目」として,「オフスクリーン画像の遅延読み込み」という項目があげられることがある.

オフスクリーン画像とは

これはその名の通り,スクリーンがオフの時に表示されている画像.
つまり,ブラウザの表示されている部分以外に存在している画像のことを指す.

通常,ページをスクロールさせないで全てが読めるページというのはあまりないので,オフスクリーン画像が存在しているページがほとんどだろう.

なので最初に画像があって,その後テキストが続くようなページの場合,オフスクリーン画像があまりないということもある.

遅延読み込みとは

遅延読み込みもその名の通り,遅延させて読み込んでみてはどうか?ということ.
通常,表示されていない画像も読み込みに行ってしまうため,表示されているはずの部分自体の表示自体も遅くなってしまう.

つまり,ある程度長いページ(スクロールさせないとすべてのページが見られないページ)で画像が重かったり,多かったりする場合にはこの方法が読者をイライラさせないためには有効であることが分かる.

すなわち,「オフスクリーン画像の遅延読み込み」とは「画面に表示されていないもの(オフスクリーン)を先に読み込まない(遅延読み込み)ようにしなさい」ということを言っている.

オフスクリーン画像を遅延読み込みさせるには?

調べてみると Intersection Observer を使えばよいということが分かった.
そこで,Intersection Observer が良さそうなので試してみた
のように自分でスクリプトを書いても良いのだが,
IntersectionObserverベースな、遅延読み込みライブラリのLozad.jsを紹介する」で紹介されている Lozad.js を使ってみることにした.

Lozad.js

Github
https://github.com/ApoorvSaxena/lozad.js
ここの dist にある
lozad.min.js
を右クリックして「名前をつけれリンク先を保存」して手元のパソコンに持ってきてサーバーに上げる.

IE 対策で Polyfill を使う

Intersection Observer は現時点で IE11 では動かない.
Intersection Observer がどこまで使えるか?
そのような場合は Polyfill を使えばいい.

これはブラウザが対応していない場合に代わりにその関数を読み込んでくれるもの.
https://polyfill.io/v3/url-builder/
ここで必要なものにチェックを入れて,「Copy HTML to clipboard」を押すと挿入するタグが表示される.

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

このように使う関数のみを指定して無駄なコードを読み込まないように出来る.
使用しているブラウザが Intersection Observer に対応している場合はこの関数は読み込まれない.

しかし,これを読み込んでも IE11 では以下のエラーが出る.

オブジェクトは 'assign' プロパティまたはメソッドをサポートしていません。

IE 対策で Object assign も入れる

Object assign がどこまで使えるか?

結局,以下のように Object assign も読み込むように変更するとエラーは出なくなった.
これをヘッダなどに入れ,

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver%2CObject.assign"></script>
<script src="/js/lozad.min.js"></script>

これで監視する処理を追加しておく.
rootMargin を設定しておくと,表示される少し手前で読み込まれるようになる.

<script>
  const observer = lozad('.lozad', {
    rootMargin: '10%',
  });
  observer.observe();
</script>

画像のタグは

<img src="images/xxxxxx.jpg">

となっているものを以下のように変更する.

<img data-src="images/xxxxxx.jpg" class="lozad">

data を data-src に変更し,class に lozad を追加する.

こうすることでブラウザに表示されて初めて data-src が src に代わり読み込まれるようになるので,最初の読み込みが早くなる.

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
お問い合わせはお気軽に
ノウハウを書籍化!
Pagetop