Le chargement différé est une approche qui consiste à attendre le chargement des ressources jusqu'à ce qu'elles soient nécessaires, plutôt que 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 sont hors écran lors du chargement initial de la page sont idéales pour cette technique. 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 pouvoir modifier le projet.
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 tailles différées chargent intelligemment les images lorsque l'utilisateur fait défiler la page, et donnent la priorité à celles qu'il va bientôt voir.
Indiquer les images à charger différé
- Ajoutez la classe
lazyload
aux images qui doivent être chargées de façon différée. De plus, définissez l'attributsrc
surdata-src
.
Par exemple, les modifications apportées à flower3.png
se présenteraient comme suit:
<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 View App (Afficher l'application), puis sur Fullscreen (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.
- Observez le panneau "Network" (Réseau) pour voir les fichiers image se charger individuellement en faisant défiler la page.
Effectuer la validation à l'aide de Lighthouse
Enfin, nous vous recommandons 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 View App (Afficher l'application), puis sur Fullscreen (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 Générer un rapport.
- Vérifiez que l'audit Différer les images hors écran a 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.