KUSONEKOの見る世界

Blogger で画像の遅延読み込みをやってみた

GoogleのPageSpeed Insightsで、オフスクリーン画像の遅延読み込みというのを指摘されることがあります。
これは、ページを開いた時の画面で見えない画像はダウンロードせず、スクロールした時に適宜ダウンロードして表示させるというものです。

当ブログでも画像を使うことが多いため、よく指摘を受けてしまいます。

今回、lozad.jsという物を使い、画像の遅延読み込みに対応できましたのメモを残しておきます。

また、オフスクリーン画像の遅延読み込みに対応すると、以下の指摘も出なくなりましたので、やる意味は大いにあります。
  • 適切なサイズの画像
  • 効率的な画像フォーマット

テンプレートの編集

まず、<head>タグの中に以下を追加。
<script async='async' src='https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js' type='text/javascript'/>

次に、</html>の直前に以下を追加。
<script type='text/javascript'>
  const observer = lozad();
  observer.observe();
</script>

トップページのサムネイルも対応させる場合は以下を変更。
<img expr:src='data:post.firstImageUrl'/>
↓
<img class='lozad' expr:data-src='data:post.firstImageUrl'/>

各記事の編集

後は、各記事の<img>タグを編集。
<img src="image.png" />
↓
<img class="lozad" data-src="image.png" />

Youtube等のiframeの遅延読み込みも可能。 
<iframe allowfullscreen="" src="https://www.youtube.com/embed/VgzOLUqEdLA" frameborder="0" height="270" width="480"></iframe>
↓
<iframe allowfullscreen="" class="lozad" data-src="https://www.youtube.com/embed/VgzOLUqEdLA" frameborder="0" height="270" width="480"></iframe>

pictureタグの場合。
これだとIEでもpictureタグ内にimgタグが無くても画像表示できます。
<picture class='lozad' data-alt='test' data-iesrc='gazou.png' style='display: block; min-height: 1rem'>
  <source media='(max-width: 480px)' srcset='gazou_480.webp' type='image/webp'/>
  <source media='(max-width: 896px)' srcset='gazou_896.webp' type='image/webp'/>
  <source srcset='gazou.webp' type='image/webp'/>
  <source media='(max-width: 480px)' srcset='gazou_480.png' type='image/png'/>
  <source media='(max-width: 896px)' srcset='gazou_896.png' type='image/png'/>
  <source srcset='gazou.png' type='image/png'/>
</picture>

ただ、Bloggerでは記事の最初の画像（アイキャッチ画像？）は遅延読み込みしない方が良いです。
それは編集するとサムネイルが表示されなくなるからです。

追記

lozad.js v1.11.0 以降では、以下のエラーが出て、IE11で画像を読み込めません。
オブジェクトは 'assign' プロパティまたはメソッドをサポートしていません。

IE11で遅延読み込みを行うには、v1.10.0が良いです。