Différer le chargement des images et des iframes

Les images et les iframes consomment souvent plus de bande passante que les autres ressources. Pour un iframe, le chargement et le rendu de la page intégrée demandent en plus un temps de traitement non négligeable, car il s’agit d’un document HTML complet avec ses propres sous-ressources. Pourtant, il n’est pas nécessaire de tout charger dès l’ouverture de la page.

Différer le chargement des éléments hors écran est une technique à faible effort et fort retour pour le SEO. Sur les connexions lentes, cela peut améliorer le Largest Contentful Paint (LCP) en réattribuant de la bande passante aux candidats LCP, un levier complémentaire pour optimiser le LCP. Côté iframe, alléger les sous-ressources au démarrage améliore aussi l’Interaction to Next Paint (INP), donc la réactivité perçue.

L’attribut loading sur les balises img accepte deux valeurs utiles. eager, la valeur par défaut, charge l’image immédiatement même hors écran. lazy diffère le chargement jusqu’à ce que l’image soit à une distance définie de la fenêtre d’affichage, distance qui varie selon le navigateur, le type de connexion et le type d’image.

N’appliquez lazy qu’aux images hors de la fenêtre d’affichage initiale, comme le détaille notre guide du chargement différé natif des images. Comme la position finale n’est connue qu’après la mise en page, une image visible passée en lazy n’est demandée qu’après le téléchargement et l’application du CSS, au lieu d’être repérée tôt par le scanner de préchargement. Sur picture, loading se place sur l’img enfant.

Un iframe sous la ligne de flottaison gagne presque toujours à être différé s’il n’est pas essentiel au démarrage. Les intégrations tierces sont le cas typique : lecteurs vidéo, publications sociales et widgets embarquent de nombreuses sous-ressources, souvent du JavaScript. Différer une vidéo YouTube intégrée économise plus de 500 Kio au chargement initial, et le bouton J’aime de Facebook plus de 200 Kio, en grande partie du JavaScript : un cas concret abordé quand on apprend à différer les iframes.

L’attribut loading sur iframe est géré par tous les navigateurs majeurs, avec les mêmes valeurs et comportements que pour les images. Chrome réserve même un espace réservé pendant la récupération, mais il reste conseillé de fixer width, height et des styles CSS pour limiter les décalages de mise en page.

Une façade affiche une image ou un élément léger à la place d’une intégration coûteuse, et ne charge l’embarqué réel qu’après une interaction de l’internaute. Pour une vidéo, on montre une image statique qui ressemble au lecteur, remplacée par l’iframe au clic. Si l’utilisateur ne lance jamais la vidéo, ses ressources ne sont jamais téléchargées. Des solutions open source existent comme lite-youtube-embed, lite-vimeo-embed ou React Live Chat Loader.

Pour les éléments non couverts nativement (video, image poster, background-image CSS), une bibliothèque comme lazysizes ou yall.js prend le relais. Ces outils s’appuient sur l’API Intersection Observer pour détecter l’entrée dans la fenêtre et remplacent alors un attribut data-src par le src réel.