lazysizesを使用したオフスクリーン画像の遅延読み込み

遅延読み込みは、リソースを事前に読み込むのではなく、必要になるまでリソースの読み込みを待機するアプローチです。これにより、最初のページの読み込み時に読み込んで解析する必要のあるリソースの量が減り、パフォーマンスを向上させることができます。

この手法でパフォーマンスを改善する候補は、最初のページ読み込み中に画面外にある画像です。lazysizesを使用すると、このパフォーマンス改善を簡単に実装できます。

lazysizesスクリプトをページに追加する #

  • Click Remix to Edit to make the project editable.

lazysizes.min.jsはすでにダウンロードされており、このGlitchに追加されています。次の手順でページに追加します。

  • <script>タグをindex.htmlに追加します。
  <script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>

lazysizesは、ユーザーがページをスクロールするときに画像をインテリジェントに読み込み、先に表示される画像を優先します。

画像を遅延読み込みするように命令する #

  • 遅延読み込みされる画像にlazyloadを追加します。また、src属性をdata-srcに変更します。

たとえば、flower3.pngの変更は次のようになります。

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

実際の動作を確認する #

以上です。これらの変更の動作を確認するには、次の手順に従います。

  • To preview the site, press View App. Then press Fullscreen fullscreen.

  • コンソールを開き、追加した画像を見つけます。ページを下にスクロールすると、クラスがlazyloadlazyloadedに変更されます。

遅延読み込み中の画像
  • ネットワークパネルを見て、ページを下にスクロールするときに画像ファイルが個別に読み込まれることを確認します。
遅延読み込み中の画像

Lighthouseを使用して検証する #

最後に、Lighthouseを使用してこれらの変更を確認することをお勧めします。Lighthouseの「オフスクリーン画像の遅延」パフォーマンス監査は、オフスクリーン画像に遅延読み込みを追加するのを忘れたかどうかを示します。

  1. To preview the site, press View App. Then press Fullscreen fullscreen. 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

  2. Click the Lighthouse tab.

  3. Make sure the Performance checkbox is selected in the Categories list.

  4. Click the Generate report button.

  5. オフスクリーン画像の遅延監査に合格したことを確認します。

Lighthouseの「画像の効率的なエンコード」監査に合格

成功です。lazysizesを使用して、ページで画像を遅延読み込みしました。

最終更新: 記事を改善する