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

Nov 5, 2018

Appears in: 読み込み時間の高速化

Katie Hempenius

TwitterGitHubGlitchHomepage

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

この手法でパフォーマンスを改善する候補は、最初のページ読み込み中に画面外にある画像です。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 .

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

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

Lighthouseを使用して検証する #

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

1. To preview the site, press View App. Then press 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. オフスクリーン画像の遅延監査に合格したことを確認します。

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