Table des matières
Pourquoi PageSpeed Insights vous suggère de différer le chargement des images hors écran
L’analyseur de performances de Google, PageSpeed Insights, qui mesure les Core Web Vitals, formule souvent ce reproche :
Différez le chargement des images hors écran
Envisagez de charger des images masquées ou hors écran après le chargement de toutes les ressources essentielles afin de réduire le délai avant interactivité. Découvrez comment différer les images hors écran. LCP. FCP
WordPress
Installez un plug-in WordPress de chargement différé pour différer le chargement des images qui ne sont pas à l’écran, ou remplacez le thème par un autre qui offre cette fonctionnalité. Vous pouvez également envisager d’utiliser le plug-in AMP.
Ce message de PageSpeed n’est pas clair. Et les conseils qu’il donne ne sont pas forcément les meilleures solutions au problème qu’il signale.
Que signifie « les images hors écran » ?
Déjà, il faut éclaircir un point. PageSpeed parle des « images hors écran« .
Il parle là des images qui ne s’affichent pas dans le premier rendu graphique d’une page web.
Il s’agit tout simplement d’images qui sont placées plus bas dans la page. Par exemple, dans le contenu de l’article. Ou, les images à la une des « articles sur le même thème ». Ou, des images placées en pied de page.
Ces images apparaitront bel et bien dans l’écran ! Ce qui fait que l’expression « images hors de l’écran » sonne peu claire.
PageSpeed a néanmoins raison de signaler un problème d’optimisation.
Chronologie du chargement
Si on fait la chronologie du chargement d’une page web, ça donne ceci :
- un internaute demande à voir une page web
- le navigateur contacte donc le serveur, qui envoie le code HTML de la page
- ce code HTML appelle souvent des dizaines d’autres fichiers : images, CSS, JS
- ces fichiers mettent du temps à charger – à être envoyés par le serveur, reçus, lus et traités par le navigateur
- or, l’opération a un enjeu urgent : afficher le haut de la page à l’écran le plus vite possible !
Donc, le code HTML demande souvent au navigateur de charger des images qui ne sont pas visibles dans le premier écran. Et ce, alors que ce premier écran n’est pas encore affiché. Cela retarde donc le rendu graphique du haut de la page web.
Et c’est la cause du problème qui fait dire à PageSpeed : « Différez le chargement des images hors écran« .
En effet, si on dit au navigateur :
- charge d’abord tout ce qui est nécessaire au premier rendu du haut de la page
- charge tout le reste après
là on obtient un chargement rapide.
FCP et LCP
Dans son message, PageSpeed évoque les concepts de FCP et LCP :
- Le FCP mesure le temps mis à afficher le premier contenu.
- Le LCP est le temps mis à afficher le plus contenu qui prend le plus de place dans l’écran.
Ces deux mesures ont un impact sur la note globale que donne PageSpeed à une page. Et cette note a probablement un impact sur le référencement et le trafic de cette page depuis Google.
Il faut donc régler le problème !
Les solutions pour différer le chargement des images
Les solutions qu’évoque PageSpeed dans son message sont peu précises, pas forcément pertinentes et pas complètes.
C’est ironique mais l’outil PageSpeed, qui nous critique, est lui-même un outil mal conçu et mal documenté. Plein de charabia et de lacunes.
Le lazy-load (chargement différé des images)
PageSpeed parle de chargement différé des images. C’est correct, c’est bien la principale solution du problème.
Mais techniquement, on appelle ça lazy-load. Qui signifie « chargement paresseux ».
C’est ce terme qu’utilisent les plugins d’optimisation le plus souvent.
Le principe du lazy-load est :
- si une image doit s’afficher dès le premier écran, on la charge normalement
- si une image ne s’affiche que plus tard, on la met en lazy-load
- elle ne sera alors chargée que quand on s’en approche… voire jamais, si on quitte la page avant
- on évite ainsi des chargements inutiles
Pour mettre en oeuvre le lazy-load sur un site WordPress, vous pouvez utiliser des plugins comme :
- LiteSpeed Cache, mon plugin d’opti préféré
- WP Rocket
- W3 Total Cache
- ou d’autres plugins qui ne font que le lazy-load, donc cherchez ce terme dans « Ajouter une extension«
Concrètement, ces plugins vont modifier le code HTML et ajouter une classe CSS « lazyload » aux images qui ont la balise img. En lisant cette classe, le navigateur saura qu’il faut différer le chargement.
Les images de substitution VPI de LiteSpeed
Une solution que n’évoque pas PageSpeed est la fonctionnalité VPI de LiteSpeed.
VPI signifie « viewport images« . Viewport est le nom technique d’un écran, tout simplement.
Le principe du VPI de LiteSpeed est de créer des images alternatives, très légères, aux dimensions exactes des images affichées dans le premier écran.
Si on active cette fonctionnalité, LiteSpeed Cache va modifier le code HTML des pages. Il va identifier les images qui apparaissent dans le « viewport« , sur mobile ou sur ordinateur. Il va ajouter un appel aux images de substitution, qui seront chargées en priorité et permettront au premier rendu de se faire plus vite.
Puis, les vraies images seront chargées. Quand ils les aura reçues, il remplacera les images VPI par les vraies images.
Le VPI est donc bel et bien une autre forme de chargement différé.
AMP ? Non !
Avec cynisme, Google PageSpeed conseille d’installer un plugin AMP.
Cynisme, car sans le dire, Google conseille ainsi d’utiliser sa propre technologie. AMP est en effet une création de Google pour accélérer le trafic mobile dans les années 2010.
Or, cette solution a périclité, parce qu’elle appauvrit le web. Elle impose des changements massifs. Elle changerait totalement le design de votre site sur mobile, et ferait bugguer de nombreuses fonctionnalités e-commerce. (Parce que sur AMP, le JS est tout simplement exclu !) Elle est aussi peu compatible avec des constructeurs de pages populaires comme Elementor.
Bref, n’écoutez pas ce conseil, n’installez pas AMP. Ce serait une galère sans fin pour régler un petit problème qu’on peut régler de manière bien plus simple.
Remplacez le thème ? Non !
PageSpeed vous suggère aussi de remplacer votre thème.
Ce conseil est lunaire. Ce changement prendrait des heures ou des dizaines d’heures, nécessitant une refonte graphique complète. Tout ça pour régler un problème qu’un plugin gratuit peut régler, voire quelques lignes de code JS écrites à la main. C’est vraiment prendre un bulldozer pour priver de vie une mouche.
Que faire quand le chargement différé semble impossible ?
Soucieux d’optimiser mes sites, j’ai fait une drôle d’expérience. J’ai passé des heures à paramétrer correctement LiteSpeed Cache. J’ai intégré à la fois le lazy-load et les images VPI.
Or, PageSpeed me signalait toujours le problème « Différez le chargement des images hors écran » sur quelques images.
Je me suis arraché les cheveux pour comprendre d’où venait le problème.
J’ai cru le régler en gérant le lazy-load au niveau du serveur avec le module PageSpeed de mes serveurs O2Switch. Avant de m’apercevoir qu’en rajoutant une couche de traitement lors de tout chargement, ce module plombait mes notes au lieu de les améliorer. (Quelle ironie !)
J’ai fini par comprendre que ces images qui refusaient le chargement différé, étaient des images appelées par mon thème Astra, dans son module « related posts / articles sur le même thème ».
Comme ces images ne sont pas dans le bloc HTML du contenu, LiteSpeed ne les traite pas correctement.
J’ai donc dû régler ça à la main, en ajoutant un peu de code JS au fichier header.php de mon thème. Pour cela, j’ai dû identifier quelle classe CSS s’appliquait à ces images, et leur ajouter systématiquement un attribut « loading=lazy ». Comme ceci :
<script>
document.addEventListener("DOMContentLoaded", function () {
const images = document.querySelectorAll('.ast-related-post img');
images.forEach(img => {
if (!img.hasAttribute('loading')) {
img.setAttribute('loading', 'lazy');
}
if (!img.hasAttribute('decoding')) {
img.setAttribute('decoding', 'async');
}
});
});
</script>
Ce code a fini de régler le problème.
Besoin d’aide ?
Voilà donc comment différer le chargement des images pour éviter qu’elles ralentissent l’affichage du premier écran.
Si tout cela reste peu compréhensible mais que vous voulez avoir de bonnes notes PageSpeed, je peux vous aider à optimiser vos images :
Service d’optimisation des performances
