Katie Hempenius
遅延読み込みは、リソースを事前に読み込むのではなく、必要になるまで読み込みを待機する手法です。これにより、最初のページ読み込み時に読み込んで解析する必要があるリソースの量が削減されるため、パフォーマンスが向上します。
この手法は、最初のページ読み込み時に画面外に表示される画像が適しています。何よりも、lazysizes を使用すると非常に簡単に実装できます。
lazysizes スクリプトをページに追加する
- [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
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="">
この例では、flower3.png、flower4.jpg、flower5.jpg の遅延読み込みを試してみます。
実例を見る
これで、これらの変更の動作を確認するには、以下の手順を行います。
サイトをプレビューするには、[View App] を押してから、[Fullscreen]
を押します。コンソールを開き、追加した画像を見つけます。ページを下にスクロールすると、クラスが
lazyloadからlazyloadedに変わります。
- ネットワーク パネルで、ページを下にスクロールしたときに画像ファイルが個別に読み込まれることを確認します。
Lighthouse を使用して確認する
最後に、Lighthouse を使用して、これらの変更を確認することをおすすめします。オフスクリーン画像に遅延読み込みを追加するのを忘れた場合は、Lighthouse の「オフスクリーン画像を先送りする」パフォーマンス監査で示されます。
- サイトをプレビューするには、[View App] を押してから、[Fullscreen] を押します。
- Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
- [Lighthouse] タブをクリックします。
- [カテゴリ] リストで [パフォーマンス] がオンになっていることを確認します。
- [Generate report] ボタンをクリックします。
- [画面外の画像の延期] の監査に合格したことを確認します。
Success! ページの画像を遅延読み込みするために遅延サイズを使用しています。