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

Katie Hempenius

Pour suivre cet atelier de programmation, ouvrez ce Glitch dans un deuxième onglet.

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>

Remarque : Le fichier lazysizes.min.js a déjà été ajouté à ce projet. Il n'est donc pas nécessaire de l'ajouter séparément. Le script que vous venez d'ajouter peut l'utiliser.

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

Remarque : Vous vous demandez peut-être pourquoi il est nécessaire de remplacer l'attribut src par data-src. Si vous ne modifiez pas cet attribut, toutes les images seront chargées immédiatement au lieu d'être chargées en différé. data-src n'est pas un attribut reconnu par le navigateur. Par conséquent, lorsqu'il rencontre un tag d'image avec cet attribut, il ne charge pas l'image. Dans ce cas, c'est une bonne chose, car cela permet ensuite au script Lazysizes de décider quand l'image doit être chargée, et non pas le navigateur.

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.

1. Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur 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 Generate report (Générer un rapport).
6. 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.