Images hors écran différées

Silktide vérifie si votre page télécharge des images que le visiteur ne voit pas encore — des images plus bas sur la page, sous le premier écran. Les charger d’emblée retarde le contenu que le visiteur regarde réellement.

Le remède est le : le navigateur récupère chaque image juste avant qu’elle n’entre dans le champ de vision, au lieu de télécharger immédiatement toutes les images de la page.

Pourquoi c’est important

Lorsqu’une page se charge, le navigateur dispose d’une bande passante limitée, et chaque image téléchargée est en concurrence avec le reste. Consacrer cette bande passante à des images situées trois écrans plus bas signifie que l’image d’en-tête, le texte et les boutons que le visiteur attend arrivent plus tard.

Sur des pages longues et riches en images, le gaspillage est important : un visiteur qui ne lit que le premier écran et s’en va aura payé — en temps et en données mobiles — pour des dizaines d’images qu’il n’a jamais vues.

Comment corriger

Ajoutez loading=\"lazy\" aux images situées sous le premier écran. Les navigateurs prennent cela en charge nativement, sans scripts requis :

<!-- Loin dans la page : ne chargez pas tant que le visiteur ne s’en approche pas -->
<img src="team-photo.jpg" alt="Notre équipe" loading="lazy" width="800" height="600">

Ne chargez pas en différé les images en haut de la page, surtout la plus grande — cela retarde ce que les visiteurs voient en premier et fait plus de tort que de bien.
De nombreux CMS et cadriciels chargent désormais les images en différé automatiquement; si ce n’est pas le cas du vôtre, cherchez un réglage ou un module d’extension (plugin) avant de modifier les gabarits.
Conservez des dimensions explicites sur les images chargées en différé pour éviter que la page ne saute à leur arrivée — voir Tailles d’image explicites.

Comment Silktide effectue ce test

Charger la page dans un véritable navigateur, en utilisant le type d’appareil, la vitesse de connexion et l’emplacement de test configurés pour vos tests de vitesse.
Identifier les images téléchargées lors du chargement initial mais situées entièrement sous la partie visible de l’écran, et qui ne sont pas déjà différées.
Indiquer pour chaque image hors écran la taille de téléchargement qui pourrait être différée.
Noter la page d’après la taille totale différable : environ 30 Ko entraîne une pénalité, 100 Ko ou plus est jugé médiocre.

Dépannage

L’image est visible sur mon écran

Ce qui est « hors écran » dépend de l’écran. Silktide teste avec l’appareil configuré pour vos tests de vitesse; ainsi, une image située près de la ligne de flottaison sur votre ordinateur de bureau peut se retrouver sous le premier écran d’un plus petit . Le chargement différé reste sans risque : l’image se charge dès que le visiteur s’en approche.

Nous utilisons déjà un script de chargement différé

Les anciennes approches basées sur des scripts déclenchent parfois encore les téléchargements trop tôt, ou le script peut ne pas couvrir les images ajoutées par d’autres modules d’extension. Les images signalées montrent exactement ce qui a été téléchargé lorsqu’elles étaient hors écran; l’attribut natif loading=\"lazy\" est la correction la plus simple et la plus fiable.