Chargement différé

Le chargement différé (lazy loading) est une technique web qui retarde le chargement des ressources situées hors de l'écran jusqu'à ce qu'elles approchent de la zone visible. Elle s'applique aux images, aux iframes, aux vidéos et à des sections entières de page.

Les navigateurs la prennent en charge nativement grâce à l'attribut loading des éléments img et iframe, réglé sur lazy, défini dans le HTML Living Standard. Les sites l'implémentent aussi en JavaScript, en général avec l'API IntersectionObserver, qui signale quand un élément approche de la zone visible.

Tant qu'une ressource n'est pas chargée, la page affiche un espace réservé : une case vide, une couleur unie, un aperçu flou ou un indicateur de chargement. Le chargement différé réduit le poids initial de la page et accélère l'affichage de la première vue.

Fonctionnement du chargement différé

1. La page se charge avec des espaces réservés pour les images hors écran.
2. Le navigateur ou un script surveille la position de chaque espace réservé.
3. Quand l'utilisateur défile à proximité, le fichier réel est demandé.
4. L'image remplace l'espace réservé dès son arrivée.

Le défilement infini utilise le même principe pour le contenu : de nouveaux éléments sont récupérés quand l'utilisateur atteint la fin de la liste.

Chargement différé et captures d'écran

Une capture de page entière qui rend toute la page d'un coup ne fait pas défiler la page, si bien que le contenu différé situé sous la ligne de flottaison peut ne jamais être demandé. Le résultat montre des cases vides ou des aperçus flous. Une capture de fenêtre d'affichage est moins touchée, car elle ne montre que ce qui est visible.

Détecter le contenu chargé en différé

• Repérez les cases vides ou grises dans la partie basse d'une capture de page entière.
• Faites défiler la page à la main et observez les images qui apparaissent en fondu.
• Inspectez les éléments image dans les outils de développement du navigateur pour repérer l'attribut loading ou les sources d'espace réservé.
• Comparez une capture rapide avec une capture réalisée après un délai.

Dans Website Capture de Temposhot, choisissez Network idle comme réglage Wait ou ajoutez un délai de 0 à 60 secondes. L'extension Temposhot Full Page Screenshot fait défiler la page active pendant la capture, ce qui déclenche le chargement lié au défilement.

Erreurs courantes

• Capturer à l'événement load en supposant que la page est complète.
• Régler un délai long sans défilement, ce qui n'aide pas les images déclenchées par le défilement.
• Capturer des pages à défilement infini comme « pages entières », ce qui ne se termine jamais proprement.
• Ignorer les images floues d'espace réservé qui paraissent chargées à petite taille.

Vous refaites les mêmes captures encore et encore ?

Réglez la condition d'attente une seule fois et réutilisez-la pour chaque URL dans l'automatisation des captures de sites web.

Questions fréquentes

Un délai plus long résout-il le problème des images différées ?

Oui, quand le contenu se charge sur une minuterie ou après une activité réseau. Le contenu déclenché par le défilement nécessite de faire défiler la page.

Faut-il éviter le chargement différé sur mon propre site ?

Non. Il améliore la vitesse. Gardez les images de la zone visible en chargement immédiat pour qu'elles s'affichent tout de suite.

Sources

• Lazy loading (Wikipedia)
• HTML Living Standard: URLs and fetching

Ressources associées

• Options de Website Capture : réglages d'attente et de délai.
• Capture de page entière : capturer toute la hauteur de la page.