Le chargement différé des images est devenu si simple à activer qu’on l’applique sans réfléchir, et c’est précisément ce qui pose problème. Sur un site de mariage rempli de galeries, il peut diviser par cinq le poids initial d’une page ou dégrader l’affichage des premières secondes, celles qui décident si le visiteur reste. Tout se joue sur trois ou quatre détails d’implémentation.
L’erreur qui annule tout le bénéfice
Le principe est de ne charger une image qu’au moment où elle approche de l’écran. Appliqué à toutes les images sans distinction, il touche donc aussi la grande photo d’en-tête, celle qui est visible immédiatement. Le navigateur retarde alors le chargement de l’élément le plus important de la page, exactement celui sur lequel se mesure la vitesse perçue, et le résultat empire au lieu de s’améliorer. La règle ne souffre aucune exception : rien de ce qui est visible sans faire défiler la page ne doit être différé. Julien Jimenez renvoie dos à dos les deux erreurs symétriques, l’absence totale de chargement différé et son application aveugle, qui coûtent à peu près autant l’une que l’autre.
Réserver la place avant le chargement
Une image différée arrive après la mise en page. Si sa hauteur n’est pas connue à l’avance, le contenu se déplace au moment où elle s’insère : le texte descend, le bouton bouge, et le visiteur qui appuyait dessus se retrouve ailleurs. Renseignez donc les dimensions d’origine sur chaque balise, ou réservez l’espace par une proportion en CSS. Ce point est plus important que le chargement différé lui-même, car il conditionne la stabilité visuelle de toute la page. Une galerie de deux cents photos sans dimensions déclarées produit une page qui tressaute pendant tout le défilement.
Les iframes coûtent plus cher que les images
Une carte intégrée, une vidéo de cérémonie, un module de liste de mariage : chacun de ces cadres charge un site entier dans votre page, avec ses propres scripts et ses propres polices. Une seule vidéo intégrée pèse fréquemment plus que l’ensemble des photos qui l’entourent. Le chargement différé s’y applique de la même façon et le gain y est bien supérieur. Pour la vidéo, la meilleure approche reste de n’afficher qu’une vignette cliquable et de ne charger le lecteur qu’au moment où quelqu’un décide de regarder.
Jusqu’où descendre
Différer les trois images suivant immédiatement la zone visible apporte peu et risque de faire apparaître des blocs vides pendant un défilement rapide. Les navigateurs anticipent d’ailleurs le déclenchement, avec une marge de plusieurs centaines de pixels, précisément pour éviter cet effet. Retenez une règle de bon sens : les deux ou trois premières images d’une page se chargent normalement, tout le reste est différé. Sur une galerie longue, ajoutez une image de remplacement très légère ou une teinte moyenne, qui évite la succession de rectangles gris pendant le chargement. Un point d’attention : les images déclarées en arrière-plan par la feuille de style échappent complètement au mécanisme natif. Sur les thèmes qui affichent ainsi leurs grandes photos de section, l’attribut ajouté partout ailleurs donne l’illusion d’un site allégé alors que les fichiers les plus lourds continuent de se charger d’emblée.
Vérifier plutôt que supposer
L’attribut a été ajouté, donc le problème est réglé : c’est la conclusion la plus fréquente et la moins vérifiée. Ouvrez l’onglet réseau, chargez la page sans faire défiler, et comptez les images réellement téléchargées. Si vous en trouvez quarante sur une galerie qui en compte deux cents, le mécanisme fonctionne ; si vous les trouvez toutes, un script ou un constructeur de pages court-circuite le comportement natif, ce qui arrive plus souvent qu’on ne le croit. Trois minutes de vérification valent mieux qu’une ligne ajoutée dans un gabarit et jamais contrôlée.
