Mettre en place le chargement différé des images via un CMS

Le chargement différé (lazy loading) consiste à ne télécharger une image qu’au moment où elle s’approche de la fenêtre d’affichage, plutôt que de tout charger d’emblée. Depuis que l’attribut loading fait partie de la norme HTML du WHATWG et qu’il est largement pris en charge, il n’est plus nécessaire de passer par une solution JavaScript : le navigateur s’en charge nativement, comme l’explique notre tutoriel sur le chargement différé natif des images. Les CMS, qui propulsent environ 60 % des sites web, jouent un rôle clé dans la diffusion de cette bonne pratique à grande échelle.

Pour le SEO, l’intérêt est double. Différer les images situées plus bas dans la page allège le chargement initial, économise des ressources réseau et améliore la vitesse perçue, donc les Core Web Vitals. Mieux encore : sur les réseaux 4G, les tests de Chrome montrent que la différence d’expérience entre une image chargée par anticipation et une image différée n’est que de 0,1 %, ce qui rend l’adoption très sûre.

L’attribut loading s’ajoute directement aux balises img et iframe, comme détaillé dans notre guide pour différer images et iframes. La valeur lazy demande au navigateur de différer le chargement jusqu’à l’approche du viewport. Les navigateurs qui ne connaissent pas encore l’attribut l’ignorent simplement, sans effet négatif. Pour limiter les décalages de mise en page, chaque image différée doit aussi porter ses attributs de dimension width et height.

L’expérience d’ajout de cette fonctionnalité à WordPress, Joomla, Drupal et TYPO3 dégage des règles claires. La fonctionnalité gagne à être activée par défaut, mais uniquement pour les éléments qui possèdent des attributs de dimension, et de préférence pour ceux qui apparaissent sous la ligne de flottaison. Il reste indispensable de pouvoir déroger image par image, par une interface ou par une API destinée aux développeurs, afin de ne pas différer une image essentielle.

Deux approches coexistent : enregistrer l’attribut dans la base de données depuis l’éditeur, ou l’ajouter à la volée au moment d’afficher le contenu. La seconde est recommandée, car elle fait bénéficier tout le contenu déjà publié du chargement différé, et non les seuls articles récents, dans le prolongement des bonnes pratiques pour optimiser les images. L’ajout à la volée doit toutefois respecter un attribut loading déjà présent sur un élément et le laisser prévaloir, pour éviter les doublons. Côté serveur, la performance compte : on privilégie une expression régulière unique qui collecte toutes les balises img et iframe plutôt qu’une exploration complète du DOM, plus coûteuse.