Le lazy loading, le chargement différé, est un des outils de performance les plus efficaces et les plus mal utilisés. L'idée est simple et bonne : ne charge pas tout de suite ce que le visiteur ne voit pas encore. Les images en bas de page, les éléments hors écran, les contenus lourds qu'il n'atteindra peut être jamais. Tu allèges le chargement initial en repoussant le reste à plus tard.
Le problème, c'est que cet outil est devenu un réflexe appliqué partout, y compris là où il fait l'inverse de ce qu'on attend. Et c'est le coeur de cet article : un lazy loading mal placé est pire que pas de lazy loading du tout. Parce qu'au lieu d'accélérer la page, il retarde précisément l'élément que ton visiteur attendait. Voici comment fonctionne le mécanisme, l'erreur la plus fréquente, et la liste claire de ce qu'il faut différer ou ne jamais différer.
Le mécanisme : différer, c'est dire au navigateur "pas tout de suite"
Quand tu mets un élément en lazy loading, tu donnes une instruction précise au navigateur : ne va pas chercher cette ressource maintenant, attends qu'elle approche de la zone visible. C'est parfait pour une image en pied de page, que le visiteur ne verra qu'après avoir beaucoup défilé, ou peut être jamais. Tu économises une requête et des octets au moment le plus critique, le chargement initial.
Mais cette même instruction, appliquée à l'élément le plus important de ton écran d'accueil, devient un sabotage. Si tu mets en lazy loading ton image de héros, celle qui est ton élément LCP, tu dis au navigateur d'attendre avant d'aller la chercher. Résultat, l'élément que ton visiteur attend en premier est précisément celui que tu as mis en file d'attente derrière les autres. Tu as retardé ta première impression en croyant l'accélérer.
Le piège vient souvent d'un réflexe ou d'un réglage automatique. Certains outils ou certaines bibliothèques activent le lazy loading sur toutes les images par défaut, y compris celles du haut de page. Tu crois optimiser, et tu différes ce qu'il fallait servir en priorité absolue. L'intention était bonne, l'application a tout inversé.
La prise de position : le lazy loading par défaut sur tout est une erreur, pas une optimisation
Je vais à contre courant d'un réflexe répandu. Activer le lazy loading partout, sans distinction, n'est pas une optimisation, c'est une négligence déguisée en bonne pratique. La performance ne se gagne pas en appliquant une technique uniformément, elle se gagne en sachant où elle aide et où elle nuit. C'est toute la différence entre cocher une case et traiter vraiment la vitesse comme un levier de conversion.
La bonne posture est l'inverse du réflexe. Par défaut, tu charges normalement ce qui est visible au premier écran, et tu différes uniquement ce qui est sous la ligne de flottaison. Le lazy loading n'est pas un interrupteur global à activer, c'est une décision élément par élément. Tout ce qui est au dessus de la ligne, et surtout ton élément LCP, se charge en priorité, jamais en différé. C'est une règle simple, mais elle est violée des dizaines de fois par site.
Et il y a un effet de bord que peu mesurent. Le LCP est une métrique que Google regarde pour le classement. Donc un lazy loading mal placé sur ton image principale ne te coûte pas seulement la perception de ton visiteur, il abîme aussi un signal que le moteur de recherche prend en compte. Tu te tires deux balles dans le pied avec un seul mauvais réglage, l'expérience perçue et la visibilité.
Teardown : l'image de héros différée
Le cas le plus courant que je vois, et que j'ai dû surveiller sur mes propres produits, c'est l'image principale du haut de page mise en différé par réflexe.
- Ce qui se passe. L'image de héros est l'élément LCP, ce que le visiteur attend pour sentir que la page est là. En lazy loading, le navigateur la repousse derrière des ressources moins urgentes. Le LCP se dégrade, la page paraît lente au seul endroit où ça compte.
- Le correctif. Tu retires le lazy loading sur cet élément, et mieux, tu le précharges pour qu'il parte en tête de file. C'est exactement la logique que j'applique pour protéger le LCP, et c'est le pendant direct du travail d'optimisation des images, où chaque image au dessus de la ligne doit être servie tôt et dimensionnée.
La leçon, c'est que le lazy loading n'a de valeur que par contraste. Il accélère le chargement initial uniquement si tu l'appliques à ce qui n'est pas urgent. Appliqué à l'urgent, il ne fait que déplacer le retard vers le pire endroit possible.
À l'inverse, il y a des candidats parfaits qu'on oublie souvent de différer. Les contenus intégrés, par exemple, une vidéo, une carte, un widget de réseau social, un chat tiers. Ces éléments embarquent parfois des centaines de kilooctets et des scripts entiers, et ils sont presque toujours sous la ligne de flottaison ou même hors de la vue immédiate. Les charger au premier rendu, c'est faire payer à ton visiteur le poids d'un contenu qu'il n'a pas encore regardé, exactement le genre de JavaScript qu'il vaut mieux alléger quand il n'est pas vu. C'est là que le différé donne le plus, sur le lourd et le lointain, pas sur tes images de contenu déjà légères.
L'artefact : la liste de ce qu'il faut différer ou jamais
Range chaque ressource de ta page dans l'une des deux colonnes.
- À mettre en lazy loading. Les images sous la ligne de flottaison. Les iframes et les contenus intégrés, vidéos, cartes, widgets tiers. Les composants lourds que le visiteur n'atteint qu'en défilant. Les sections d'une page longue qui sont loin du premier écran.
- À ne jamais différer. Ton élément LCP, point final. Toutes les images visibles au premier écran. Le CSS critique qui peint le haut de page. Les scripts nécessaires à la première interaction. Tout ce que le visiteur voit ou touche dans les premières secondes.
La règle qui résume tout : différer ce qui est loin, servir en priorité ce qui est proche. Si tu hésites sur un élément, demande toi simplement s'il est visible au chargement. Si oui, il ne se diffère jamais.
Ce qu'il faut retenir
Le lazy loading est un excellent outil quand il vise ce qui n'est pas vu, et un sabotage quand il vise ce qui l'est. Appliqué par défaut sur tout, il retarde ta première impression au lieu de l'accélérer. Différe ce qui est sous la ligne de flottaison, ne diffère jamais ton élément LCP ni ce qui est visible au premier écran. Vérifie dès aujourd'hui que ton image de héros n'est pas en chargement différé par réflexe, c'est l'erreur la plus fréquente et la plus coûteuse. Au passage, repère tes contenus intégrés lourds qui se chargent trop tôt, ce sont eux que le différé devrait viser en priorité. Si tu veux savoir ce que ton site diffère à tort et ce qu'il charge trop tôt, c'est une des premières choses que je regarde dans un diagnostic.