Chargement différé d'images hors écran avec des tailles différées

Katie Hempenius

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'attribut src sur data-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.

1. Pour prévisualiser le site, appuyez sur View App (Afficher l'application), puis sur Fullscreen (Plein écran) .
2. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
3. Cliquez sur l'onglet Lighthouse.
4. Assurez-vous que la case Performances est cochée dans la liste Catégories.
5. Cliquez sur le bouton Générer un rapport.
6. 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.