Images hors écran différées

Silktide vérifie si votre page télécharge des images que le visiteur ne peut pas encore voir – des images plus bas dans 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 qu’il télécharge entre en concurrence avec tout le reste. Consacrer cette bande passante à des images situées trois écrans plus bas signifie que l’image principale, le texte et les boutons que le visiteur attend arriveront plus tard.

Sur des pages longues et riches en images, le gaspillage est important : un visiteur qui lit le premier écran puis part aura peut‑être 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 le prennent en charge nativement, sans scripts :

<!-- Loin dans la page : ne chargez qu’à l’approche du visiteur -->
<img src=\"team-photo.jpg\" alt=\"Notre équipe\" loading=\"lazy\" width=\"800\" height=\"600\">

N’appliquez pas le chargement différé aux images en haut de la page, en particulier à la plus grande : cela retarde ce que les visiteurs voient en premier et fait plus de mal que de bien.
De nombreux CMS et frameworks chargent désormais les images de manière différée automatiquement ; si ce n’est pas le cas du vôtre, recherchez un réglage ou une extension avant de modifier les modèles.
Conservez des dimensions explicites sur les images chargées de manière différée afin d’éviter que la page ne saute à leur arrivée – voir Tailles d’image explicites.

Comment Silktide teste cela

Charger la page dans un vrai 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 placées entièrement sous l’écran visible, et qui ne sont pas déjà différées.
Signaler chaque image hors écran avec la taille de téléchargement pouvant être différée.
Noter la page en fonction de la taille totale différable : environ 30 Ko entraîne une baisse de la note, 100 Ko ou plus est noté 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 écran d’ordinateur peut se retrouver sous le premier écran d’une plus petite . Le chargement différé reste sûr : 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 des téléchargements trop tôt, ou le script peut ne pas couvrir les images ajoutées par d’autres extensions. Les images signalées montrent exactement ce qui a été téléchargé alors qu’elles étaient hors écran ; l’attribut natif loading=\"lazy\" est la correction la plus simple et la plus fiable.