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

PageSpeed Insights の「改善できる項目」の中の「オフスクリーン画像の遅延読み込み」で
「オフスクリーンの非表示の画像は、重要なリソースをすべて読み込んだ後に遅れて読み込むようにして、操作可能になるまでの時間を短縮することをご検討ください。」
と言われる場合の改善方法について解説する．

長々と文章を書く前に最初に結論を書く．

今は，下の目次の「Chrome では簡単に対策出来る」の部分を読めば一発で改善出来る．

見えていない部分の画像を遅延読み込みさせることは今は非常に簡単にできますので，すぐにでも対応することをお勧めします．

オフスクリーン画像の遅延読み込みの必要性

最近，Google 広告の効果を見るためにスクロールを本当にしているのかどうかを確認できるようにタグマネージャの設定を行った．
それを見て驚くのはスクロールする人が本当に少ない驚愕の事実だ．
検索した内容と違っていたのかもしれないが，それにしてもスクロール全くしないの？と驚くほどだ．

つまり，ネット界全体で見たらとんでもない量の無駄な読み込み(パケット通信)が行われている事実に気づく．

「そんなことないでしょ．」と思われた方，ページビューが多いことに満足せず，スクロールしている数を調査してみてほしい．

ちなみに弊社のログ解析はページ閲覧解析機能があるので，どのページでどのようにスクロールしているのかが一目瞭然でわかる．

速度（試験運用版）とは？

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

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

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

さらにここから，下の Page Speed Insight に飛ぶことが可能になっている．
https://pagespeed.web.dev/

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

オフスクリーン画像とは

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

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

なので最初に画像があって，その後テキストが続くようなページの場合，オフスクリーン画像があまりないということもある．そのようなページの場合はこのページに書いてある対策をとる必要はない．

遅延読み込みとは

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

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

Chrome では簡単に対策出来る
(追記: 2020/03/31)

Page Speed Insights 対策としては以下が一番簡単で chrome 以外のブラウザにも悪影響を及ぼさない方法です．

タグに loading 属性に lazy を入れる．

<img src="test.jpg">

と書いていたものを

<img loading="lazy" src="test.jpg">

と追記します．

これで chrome の最新版ではネイティブで遅延読み込みに対応してくれます．

簡単に試せますので，画像を大量に使っているページで確認してみましょう．

下の Chrome 以外での改善方法に比較して非常に簡単なので面倒だと思われる場合，この方法だけでも実装しておくとよいでしょう．
少なくとも PageSpeed Insights 対策にはなります．

Chrome 以外での改善策

2020/4 現在，Chrome 以外のブラウザは loading="lazy" にネイティブ対応していないので他の方法をとるしかない．

調べると 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 を使えばいい．

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 に代わり読み込まれるようになるので，最初の読み込みが早くなる．

つまり，オフスクリーン(スクリーンに表示されていない)画像の遅延読み込み(実際に表示する際に読み込む)対策となる．

PageSpeed Insights 対策

PageSpeed Insights 対策の一覧．他の対策は以下を見てください．

• CLS (Cumulative Layout Shift) とは
• LCP (Largest Contentful Paint) とは
• FID (First Input Delay) とは
• Youtube での複数動画を埋め込みページの高速化
• ウェブフォント読み込み中の全テキストの表示
• 次世代フォーマットでの画像の配信
• 第三者コードの影響を抑えてください
• 静的なアセットと効率的なキャッシュポリシーの配信
• FCP (First Contentful Paint) とは
• テキスト圧縮の有効化
• タップ ターゲットのサイズが適切に設定されていません
• 不適切なアスペクト比の画像が表示されています
• リンクはクロールできません
• 背景色と前景色には十分なコントラスト比がありません
• リンクに識別可能な名前が指定されていません
• 適切なサイズの画像
• ページ上で視認性の高い動画は検出されませんでした