PageSpeed Insights et Lazy-loading : Booste-il votre score ?

Vous avez sans doute déjà tenté d’améliorer les performances de votre site web en suivant les conseils de PageSpeed Insights. Et il y a un point qui revient sans cesse : activer le Lazy-loading sur les images. L’outil insiste tellement dessus que l’on finit par croire qu’il n’existe aucune situation où cela pourrait être une mauvaise idée. Pourtant, la réalité est plus nuancée. Une petite ligne de code peut transformer votre site en fusée… ou au contraire provoquer une catastrophe sur votre Largest Contentful Paint.

• Comprendre comment PageSpeed Insights réagit réellement au Lazy-loading pour éviter de faire chuter votre score sans raison.
• Identifier les images qui doivent absolument se charger immédiatement afin d’améliorer l’affichage perçu et le Largest Contentful Paint.
• Apprendre à appliquer le Lazy-loading de manière ciblée pour obtenir un site plus rapide et une expérience utilisateur plus fluide.

Persuadé de bien faire, certain ajoute du Lazy-loading partout. Mais, après actualisation de PageSpeed Insights, les scores peuvent chuter. Comprendre le fonctionnement du Lazy-loading est indispensable avant de l’activer partout.

Dans ce chapitre, vous allez découvrir ce que PageSpeed Insights analyse réellement, ce qu’est le Lazy-loading, pourquoi il peut améliorer vos performances… mais aussi parfois faire tout l’inverse. Nous allons prendre le temps de démystifier tout cela ensemble.

Comprendre ce que mesure PageSpeed Insights

Avant de parler Lazy-loading, il faut saisir pourquoi cette notion affecte votre score PageSpeed Insights. L’outil de Google ne se contente pas de charger une page et de donner une note au hasard. Il analyse plusieurs métriques de performance que l’on regroupe sous Core Web Vitals. Ce sont surtout trois mesures qui comptent :

1. Le Largest Contentful Paint (LCP) : le temps nécessaire avant que l’élément principal de la page soit réellement visible. Cela peut être une grande image, un titre, une bannière, une vidéo.
2. Le First Input Delay (FID) ou son évolution le INP : le délai avant que la page réponde à une première interaction.
3. Le Cumulative Layout Shift (CLS) : les mouvements d’éléments gênants lors du chargement.

Quand vous optimisez un site, PageSpeed Insights vous affiche les valeurs en secondes. Si le LCP dépasse 2,5 secondes, le score commence déjà à dégringoler. Vous voyez donc que toute optimisation qui touche ce fameux “plus gros élément visible” est cruciale.

Et devinez quoi ? Le Lazy-loading touche directement ce point.

Le Lazy-loading : qu’est-ce que c’est vraiment ?

Le Lazy-loading consiste à ne charger une image qu’au moment où elle devient visible dans l’écran de l’utilisateur. Plutôt que de charger toutes les images de la page, le navigateur attend que vous descendiez pour charger ce qui se trouve plus bas.

Techniquement, cela s’ajoute sur une balise HTML, par exemple :

<img src="photo.jpg" loading="lazy" alt="Un chat mignon">

Devant ce comportement, on comprend rapidement pourquoi les webmasters l’adorent. Moins de ressources chargées au début, moins de poids, donc un affichage plus rapide. On peut même réduire drastiquement le temps de chargement initial pour toutes les pages qui contiennent des galeries, des articles de blog avec des images, ou des fiches produits.

En théorie, c’est gagnant-gagnant. Sauf que…

Quand une image importante pour le LCP est en Lazy-loading… elle ne se charge pas immédiatement. Résultat : le navigateur pense que la page n’est pas encore prête. Et donc votre score PageSpeed Insights plonge.

Quand le Lazy-loading améliore réellement votre score

Il existe tout de même de nombreux cas où le Lazy-loading est un véritable atout. Le bon usage consiste à l’appliquer sur les images situées en dessous de la ligne de flottaison, c’est-à-dire tout ce qui n’apparaît pas à l’écran avant que l’utilisateur ne scrolle.

Imaginons un long article de blog avec 30 images réparties dans le contenu. Si ces images sont chargées dès le début, même si l’utilisateur ne les verra peut-être jamais, cela bloque le chargement initial. Le navigateur gaspille son énergie et votre LCP grimpe.

Dans ce type de pages, activer le Lazy-loading permet au contraire de :

• réduire le nombre de requêtes réseau au démarrage
• diminuer le poids total initial à charger
• accélérer l’affichage du contenu visible au premier coup d’œil

PageSpeed Insights adore ce genre de configuration et vous récompense avec un score bien plus vert. Si vous avez un portfolio, une galerie Instagram intégrée, des vignettes produits à n’en plus finir, le Lazy-loading est une bénédiction.

Quand le Lazy-loading détruit votre Largest Contentful Paint

Le problème arrive lorsque l’on veut aller trop vite et que l’on met du Lazy-loading partout. L’automatisation des thèmes WordPress est un exemple très courant : certains thèmes activent le Lazy-loading sur toutes les images sans exception.

Mais Google ne voit pas cela du même œil…

Pourquoi ? Parce que dans 95 % des cas, l’élément qui sert au LCP est une image située en haut de la page. Une grande photo d’en-tête par exemple. Si vous retardez son chargement en la mettant en Lazy-loading, vous créez un embouteillage inutile. Le navigateur attend que le JavaScript observe l’apparition de l’image à l’écran pour la charger. Pendant ce temps, PageSpeed Insights continue de mesurer… et votre seconde précieuse s’envole.

Résultat : votre LCP explose et tombe dans le rouge.

Même si toute la partie basse de la page se charge plus tard, ce gain n’a aucune importance pour Google. Ce qui compte, c’est ce qu’il y a au-dessus du pli (ligne de flottaison).

Comment identifier l’image LCP que vous ne devez surtout pas lazy-loader

Si vous faites un test PageSpeed Insights, l’outil vous indique précisément quel élément est pris en compte pour le Largest Contentful Paint. Souvent, c’est :

• Une image dans une bannière
• Un hero header
• Une grande image de produit sur une boutique
• Un slider mis en avant
• Une illustration de présentation du site

La règle est simple : cette image doit se charger immédiatement, sans Lazy-loading.

Vous pouvez donc :

• retirer le loading="lazy" sur cette image
• utiliser loading="eager" pour forcer un chargement immédiat
• ou supprimer l’ajout automatique de Lazy-loading via votre thème ou un plugin

Ce simple changement suffit parfois à faire bondir votre LCP de plusieurs dizaines de points.

Les erreurs fréquentes avec WordPress et WooCommerce

La plupart des problèmes de Lazy-loading que l’on rencontre aujourd’hui viennent de WordPress. Le CMS a pris l’habitude d’ajouter automatiquement l’attribut loading="lazy" sur toutes les images depuis plusieurs versions. C’est pratique, mais cela revient à appliquer une règle générale sans réfléchir au contexte.

Sur un article classique, l’image mise en avant, souvent tout en haut, est une candidate parfaite pour devenir le LCP. Pourtant, elle se retrouve lazy-loadée. Résultat : vous scrollez à peine sur le site, mais l’image censée être visible dès la première seconde n’est pas chargée. L’écran montre un espace vide ou un contour flou, et PageSpeed Insights tire la sonnette d’alarme.

Sur WooCommerce, le souci est encore plus visible. Les images des produits sont le cœur de la page. Elles sont donc essentielles au LCP. Si vous appliquez automatiquement le Lazy-loading sur les miniatures et même sur l’image du produit principal, votre boutique semble se charger lentement, ce qui donne une mauvaise impression aux visiteurs et au robot d’audit.

Pour comprendre l’ampleur du problème, imaginons un utilisateur qui arrive sur votre fiche produit, impatient de découvrir le nouvel aspirateur connecté que vous vendez. Si l’image principale met deux ou trois secondes à s’afficher parce que Lazy-loading la retarde, vous perdez déjà une partie de la confiance du client.

Et dans les résultats PageSpeed Insights, ces quelques secondes coûtent très cher.

Le cas particulier des sliders : le piège classique

Les sliders en haut de page sont un grand classique en webdesign. Ils sont esthétiques, dynamiques, et donnent l’impression de richesse visuelle. Pourtant, du point de vue de la performance, c’est souvent une catastrophe.

Chaque slide contient une image en très grande résolution. Pire : certaines mises en page affichent directement le deuxième slide dans le DOM, même avant qu’un utilisateur clique. WordPress ou un thème ajoute du Lazy-loading sur ces images sans distinction, et le navigateur se retrouve à devoir charger… sans trop savoir quoi faire.

Dans un slider, c’est très souvent la première image qui joue le rôle de LCP. Si elle est lazy-loadée, le navigateur attend un événement de visibilité. Si un script prend du temps à s’exécuter, si le carrousel nécessite une initialisation… tout est retardé.

Et les slides suivants ? Eh bien eux ne devraient pas être lazy-loadés non plus, si l’on veut éviter un effet de vide lors de leur apparition. Au lieu d’un beau défilement, l’utilisateur voit des blocs gris qui se remplissent petit à petit. Pas très pro.

Vous comprenez alors qu’un slider doit être optimisé sur mesure, pas automatisé.

Les images de fond : attention à l’illusion du Lazy-loading

Autre piège très fréquent : les images de fond en CSS. Vous pouvez avoir une grande bannière avec une image en background dans votre feuille de style :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

.hero {
  background-image: url('belle-image.jpg');
}

Comme vous ne pouvez pas ajouter loading="lazy" sur un background CSS, certains se disent qu’ils ne risquent rien. Mais si cette image est le LCP de la page, elle doit se charger en priorité. Or, dans la plupart des frameworks ou des thèmes, cette image n’est pas pré-chargée avec un <link rel="preload">. Le navigateur ne la considère donc pas comme prioritaire.

Résultat : vous avez l’impression que le Lazy-loading ne s’applique pas, mais le comportement est le même que si l’image était chargée tardivement. Et PageSpeed Insights va vous le faire remarquer : “Évitez de retarder les éléments de LCP”.

Il faut donc apprendre à déclarer ces images fondamentales comme prioritaires, par exemple avec :

<link rel="preload" as="image" href="belle-image.jpg">

Cette petite attention peut faire gagner une seconde entière sur le LCP… et donc beaucoup de score en plus.

Comment combiner Lazy-loading et PageSpeed Insights de manière intelligente

On arrive à la partie la plus importante : comment utiliser le Lazy-loading sans détruire vos performances ? La clé est simple : distinguer les images essentielles des images secondaires.

Les images essentielles sont celles qui sont visibles immédiatement et servent au LCP. Ces images doivent :

• être en loading="eager" ou sans attribut
• être accompagnées d’un width et height définis pour éviter un CLS
• parfois être pré-chargées si elles sont vraiment critiques

Les images secondaires sont celles situées sous la ligne de flottaison. Celles-ci doivent être lazy-loadées pour alléger le travail initial du navigateur.

Vous voyez que l’optimisation n’est pas un tout ou rien. C’est un dosage, comme quand on cuisine une sauce : trop d’épices et tout devient immangeable, trop peu et c’est fade.

On pourrait résumer ainsi : Lazy-loading oui, mais jamais sur le LCP.

Exemple concret d’optimisation gagnante

Prenons un exemple simple pour illustrer la transformation possible.

Avant optimisation :

Une page WordPress affiche :

• une bannière avec une image de 300 Ko
• un article de blog avec 15 images
• un footer décoré

Toutes les images sont lazy-loadées automatiquement.

Résultats PageSpeed Insights :

• LCP : 3,4 secondes
• Score performance : 62

Après optimisation :

• La bannière ne dispose plus de Lazy-loading
• On a ajouté un preload sur la preuve visuelle du LCP
• Les 15 images de l’article en dessous restent en Lazy-loading
• Le footer aussi

Résultats PageSpeed Insights :

• LCP : 1,9 seconde
• Score performance : 92

Rien n’a changé dans le design. Le contenu est identique. Pourtant, la vitesse perçue est bien meilleure. Le secret n’était pas dans l’activation du Lazy-loading, mais dans sa juste utilisation.

Et croyez-moi, vos visiteurs s’en rendent compte instantanément.

Les doutes courants : faut-il tout tester à chaque changement ?

Quand on découvre ces subtilités entre Lazy-loading et PageSpeed Insights, on peut avoir la tentation de modifier toutes ses pages, puis de les retester une par une. Et là, on se retrouve à cliquer frénétiquement sur “Analyser” en espérant que le score augmente de cinq points à chaque fois. Cela peut vite devenir une obsession.

La vérité, c’est que chaque site a son propre contexte. Une optimisation miraculeuse sur un blog photo peut être catastrophique sur un site e-commerce, et inversement. Il faut donc aborder l’amélioration de performances comme une démarche d’enquête, un peu comme un détective qui cherche l’élément responsable du retard au chargement.

Dans certains cas, retirer le Lazy-loading sur une seule image suffit. Dans d’autres, il faut revoir la structure, la taille des fichiers, voire le code du slider. Heureusement, une fois que l’on a compris la logique du LCP, les résultats arrivent vite.

Le piège du gain artificiel de score

Vous avez peut-être déjà ressenti cette petite fierté quand PageSpeed Insights vous affiche 100. C’est humain. Cependant, il est essentiel de ne pas confondre optimisation technique et optimisation réelle perçue par l’utilisateur.

Un site peut obtenir un score parfait sur PageSpeed Insights tout en donnant une impression de lenteur… si ce score a été obtenu en retardant l’affichage d’éléments essentiels. Le Lazy-loading peut contribuer à ces illusions si l’on s’en sert mal.

Votre objectif n’est pas d’obtenir un 100/100 pour épater Google. Votre objectif, c’est de créer une expérience fluide et agréable pour vos visiteurs. PageSpeed Insights est un outil formidable, mais il reste un outil. C’est vous qui connaissez votre site, son public, son design.

Et si parfois une image critique doit être chargée tout de suite pour offrir un effet “waouh” visuel… alors il faut le faire, score ou pas score.

Ce qu’il faut retenir pour devenir maître du Lazy-loading

Il n’existe pas de règle universelle, mais le principe fondamental est immuable : tout ce qui contribue à l’affichage initial doit se charger immédiatement, et tout le reste doit être reporté.

Pour vérifier cela, le top est de faire un rapide audit sur vos pages importantes :

• Quelle est l’image qui sert au LCP ?
• Est-elle lazy-loadée ?
• A-t-elle un preload ?
• Son dimensions (width et height) sont-elles définies ?
• Se trouve-t-elle dans un slider ou un bloc qui s’initialise tard ?

Si vous répondez oui à l’un de ces points, vous avez trouvé une piste d’amélioration. À partir de là, vous pouvez corriger avec méthode et constater la progression en temps réel.

L’optimisation web est une science passionnante parce qu’elle récompense les petits détails. Un attribut retiré, un preload ajouté, et votre score PageSpeed Insights remonte d’un coup.

Le Lazy-loading est un outil, pas une solution magique

Il est très tentant de croire que Lazy-loading = vitesse. Après tout, Google le recommande, WordPress l’active par défaut, et beaucoup de tutoriels en parlent comme si c’était une évidence.

Mais comme souvent dans le développement web, la vraie réponse est : “Ça dépend”.

Utilisé avec discernement, le Lazy-loading est un allié puissant, capable d’alléger vos pages, d’améliorer votre temps de chargement et de faire grimper votre score PageSpeed Insights sans aucun sacrifice visuel. Utilisé aveuglément, c’est un adversaire redoutable, capable de retarder votre LCP, d’agacer vos visiteurs… et de ruiner votre optimisation en un instant.

Le secret n’est pas de tout changer plus tard, ni de tout charger immédiatement, mais de charger intelligemment. De comprendre ce que voit l’utilisateur dans la première seconde. De décider ce qui est essentiel et ce qui ne l’est pas.

Et c’est précisément en gardant cette idée en tête que vous ferez de votre site un espace aussi rapide que confortable, aussi beau que performant. Finalement, le Lazy-loading n’est pas là pour plaire à Google. Il est là pour servir vos visiteurs.

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr