Le chargement différé est l'approche qui consiste à attendre que les ressources soient chargées jusqu'à ce qu'elles soient nécessaires, au lieu de les charger à l'avance. Cela peut améliorer les performances en réduisant la quantité de ressources à charger et à analyser lors du chargement initial de la page.
Les images qui se trouvent hors de l'écran lors du chargement initial de la page sont des candidats idéaux pour cette technique. Et cerise sur le gâteau, les tailles différées en font une stratégie très simple à mettre en œuvre.
Ajouter le script Lazysizes à la page
- Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
lazysizes.min.js
a déjà été téléchargé et ajouté à ce Glitch. Pour l'inclure dans la page:
- Ajoutez la balise
<script>
suivante àindex.html
:
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
Les lazysizes chargent intelligemment les images à mesure que l'utilisateur fait défiler la page et donnent la priorité à celles que l'utilisateur rencontrera bientôt.
Indiquer les images à charger différée
- Ajoutez la classe
lazyload
aux images qui doivent être chargées en différé. En outre, remplacez l'attributsrc
pardata-src
.
Par exemple, les modifications pour flower3.png
ressembleraient à ceci:
<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">
Pour cet exemple, essayez le chargement différé flower3.png
, flower4.jpg
et flower5.jpg
.
Démonstration
Et voilà ! Pour voir concrètement ces changements, procédez comme suit:
Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .
Ouvrez la console et recherchez les images qui viennent d'être ajoutées. Leurs classes doivent passer de
lazyload
àlazyloaded
lorsque vous faites défiler la page.
- Sur le panneau réseau, vous pouvez voir que les fichiers image se chargent individuellement à mesure que vous faites défiler la page.
Valider à l'aide de Lighthouse
Enfin, nous vous conseillons d'utiliser Lighthouse pour vérifier ces modifications. L'audit de performances "Différer les images hors écran" de Lighthouse indique si vous avez oublié d'ajouter le chargement différé à des images hors écran.
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Lighthouse.
- Assurez-vous que la case Performances est cochée dans la liste Catégories.
- Cliquez sur le bouton Generate report (Générer un rapport).
- Vérifiez que l'audit Reporter les images hors écran a été réussi.
Opération réussie. Vous avez utilisé des tailles différées pour charger les images de votre page de manière différée.