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