Nous allons voir en détail dans cet article comment ameliorer l’indicateur LCP – Largest Contentful Paint sur un site WordPress.
- Qu’est-ce que l’indicateur Largest Contentful Paint – LCP ?
- Comment tester les pages de son site pour connaitre son indicateur LCP ?
- Comment améliorer l’indicateur LCP aussi bien sur ordinateur que sur mobile ?
Qu’est que l’indicateur Largest Contentful Paint – LCP ?
Le Largest Contentful Paint (LCP) est une des mesures principales des Core WEB Vitals (Signaux WEB Essentiel) de Google. Il compte pour 25 % de la note globale de performance d’une page.
Pour rappel, le Core WEB Vitals est un ensemble d’outil de mesure introduit en 2021 par Google après la mise à jour de son algorithme pour déterminer l’expérience utilisateur d’un site Web.
Ces différentes mesures jouent aujourd’hui un rôle majeur dans le référencement. C’est pourquoi de nombreux sites affichant une mauvaise expérience utilisateur (selon le Core WEB Vital) se sont vus déclassé par Google, occasionnant ainsi une chute parfois vertigineuse de leur trafic.
Le LCP mesure le temps de chargement du plus gros élément se trouvant dans la fenêtre d’affichage. La plupart du temps, l’élément est un texte ou une image, mais peut aussi être une vidéo ou une animation. Cet élément est de temps en temps diffèrent selon qu’on consulte la page sur ordinateur ou sur un écran mobile.
Comment tester les pages de son site pour connaitre leur indicateur LCP ?
PageSpeed Insight
Le meilleur moyen pour tester le LCP d’une page et de se rendre sur PageSpeed Insight, l’outil gratuit de Google qui mesure les performances des sites web.
Rentrez l’adresse de la page que vous souhaitez tester et cliquez sur Analyser, après quelques secondes les scores des différentes mesures s’affichent accompagné des recommandations nécessaires pour les améliorer. Vous pouvez consulter les mesures à la fois pour les ordinateurs et les écrans mobiles.
Les premières mesures concernent les données collectes sur les 28 derniers jours.
Les secondes mesures affichent les scores de performances au moment où vous avez testé votre page.
Le rapport se termine par le compte rendu des différentes recommandations pour améliorer votre score. Pour le Largest Contentful Paint cliquez sur LCP.
Search Console
Vous pouvez aussi évaluer les performances de l’ensemble de votre site et détecter les problèmes éventuels grâce au rapport Signaux Web Essentiel qui se trouve dans Search Console.
Le rapport divise les pages en groupe selon les améliorations à apporter sur chacune d’entre elle. Dans l’exemple ci-dessous, on peut voir que 83 pages (URL) ont besoin d’être améliorées, car leur LCP est au-dessus de la valeur maximale préconisée de 2,5 secondes.
En cliquant sur Problème LCP, puis sur le groupe d’URL concerné, on accède à la liste de toutes les pages du site qui présente ce problème.
Dans la nouvelle fenêtre qui s’ouvre, on peut cliquer sur l’une de ces URL et sélectionner Ressources pour les développeurs pour lancer Page Speed Insight et lancer le rapport détaillé que l’on a vu précédemment.
Outils de développement (Web tools) de Google Chrome
Vous pouvez aussi tester vos pages directement depuis Google chrome.
- Lancer une navigation privée pour éviter qu’une de vos extensions ne viennent fausser le résultat.
- Cliquez sur les trois petits points verticaux en haut à gauche du navigateur.
- Sélectionner Plus d’outils et cliquez sur Outils de développement.
- Cliquez sur Lighthouse.
- Sélectionnez Mobile ou Bureau puis Analyser le chargement de la page.
Comment améliorer l’indicateur Largest Contentful Paint (LCP) d’un site WordPress ?
3 facteurs sont déterminants dans l’amélioration du Largest Contentful Paint (LCP).
- Désactiver le lazyload sur l’image spécifique au LCP.
- Le temps de réponse initial du serveur.
- Les ressources qui bloquent le rendu.
- Le travail du thread principal.
Pour améliorer le LCP de votre site WordPress, vous aurez besoin d’un plugin de cache. S’il en existe plusieurs, le numéro un dans ce domaine est WP Rocket (voir notre avis sur WP Rocket), car il est à la fois le plus efficace, le plus complet et le plus facile à prendre en main.
Je vais donc me servir pour illustrer ce tutoriel, néanmoins les autres plugins de cache fonctionne sur le même principe.
Désactiver le lazyload sur l'image spécifique au LCP
Le LazyLoad consiste à retarder le chargement des images, pour laisser la place a d’autre ressource plus importante, ce qui est en soit une bonne pratique. Mais si l’élément LCP est une image, cela peut parfois avoir un effet négatif sur cet indicateur.
Dans ce cas, il vous faut identifier l’image qui pose un problème et l’exclure du LazyLoading.
Voici la procédure à suivre pour identifier l’image LCP :
- Allez dans le rapport de la page fournie par PageSpeed Insight.
- Cliquez sur l’onglet LCP.
- Cliquez sur Élément identifié comme « Largest Contentful Paint« .
Voici la procédure à suivre pour exclure l’image LCP du LazyLoad avec WP Rocket :
- Allez sur le tableau de bord de WordPress ⇾ Réglages ⇾ WP Rocket ⇾ Media.
- Dans le champ Images ou iframes exclues rentrez n’importe quel mot clé de la balise d’image, tel que :
- Nom du fichier.
- Classe CSS.
- N’importe quel attribut ou nom de domaine (pour les images hébergées en externe).
- Cliquez sur Enregistrer.
Exemple:
img src= »http://www.example.org/wp-content/uploads/daniele-riggi-635135-unsplash.jpg » class= »attachment-full size-full » data-imgsrc= »http://www.example.org/wp-content/uploads/daniele-riggi-635135-unsplash.jpg » alt= »unsplash image » title= »image title »/> »
- Nom du fichier: exclut toutes les images avec le nom daniele-riggi-635135-unsplash.jpg.
- Classe CSS: attachment-full size-full – exclut toutes les images qui possèdent ces deux classes CSS.
- Classe CSS: attachment-full or size-full – exclut toutes les images qui possèdent l’une ou l’autre de ces classes CSS.
- -unsplash : exclut toutes les images dont le nom de fichier contient -unsplash.
- unsplash image : exclut toutes les images avec l’attribut alt= »unsplash image« .
- image title : exclut toutes les images avec l’attribut title= »image title« .
- data-imgsrc : exclut toutes les images avec la propriété data-imgsrc.
Réduire le temps de réponse initial du serveur (server response times) avec WP Rocket
Le temps de réponse initial du serveur est le temps que met le serveur pour répondre aux requêtes envoyées par le navigateur. Plus ce laps de temps est long, plus le navigateur mettra du temps à afficher la page demandée.
L’audit échoue lorsque le temps de réponse du serveur est supérieur à 600 millisecondes.
La mise en cache du site.
La première étape, pour réduire le temps de réponse initial du serveur, consiste à mettre en cache votre site, voir notre article sur l’importance de la mise en cache d’un site WordPress.
La mise en cache des pages est essentielle pour réduire le temps de réponse initial du serveur. Elle va permettre de sauvegarder l’ensemble les fichiers nécessaires à l’affichage d’une page et convertir le tout, en un fichier HTML statique.
Le processus de mise en cache de votre site avec WP Rocket se fait automatiquement dès l’activation du plugin. Néanmoins, le plugin propose des options plus complémentaires que je vous conseille de sélectionner en vous rendant sur son panneau d’administration.
- Activer la mise en cache pour les appareils mobile.
- Optimiser et nettoyer la base de données.
- WP Rocket > Réglages > Base de données, cochés toutes les cases sauf celle de Planifier le nettoyage automatique, cliquez sur Sauvegarder et Optimiser.
- Compression GZIP
- La compression est appliquée. Automatiquement par WP Rocket, lorsque le site Apache/LiteSpeed. Elle permet de compresser le contenu HTML, CSS et JavaScript.
Choisir un hébergeur de qualité.
Si vous avez un budget serré et souhaiter prendre un hébergement mutualisé, je vous conseille o2switch qui offre de bonnes performances et un support technique rapide et efficace.
Ceux qui disposent de moyen plus important, peuvent se tourner vers des Hébergeurs spécialisés WordPress qui mettent à votre disposition un serveur dédié ou VPS. Ils s’occupent d’installer ou de transférer votre ou vos sites et prennent en charge la configuration et la maintenance technique de votre serveur en intégralité.
Les meilleurs hébergeurs WordPress actuels :
Éliminez les ressources qui bloquent le rendu (Render-blocking JavaScript and CSS)
Les ressources sont les fichiers indispensables à l’affichage d’une page. Il s’agit le plus souvent de fichier CSS ou JavaScript. Ces fichiers peuvent parfois mettre du temps à se charger, ce qui a pour conséquence de bloquer le chargement de la page pendant un délai plus ou moins long.
Ce paramètre peut affecter considérablement le LCP de la page.
Pour réduire au maximum le temps de chargement des ressources, il nous faut tenter de réduire celles qui bloquent l’affichage de la page.
Différer le chargement des fichiers JavaScript
En différant l’exécution des fichiers JavaScript, on fait en sorte qu’ils ne bloquent pas le chargement des autres ressources. Ce qui améliore le temps de chargement la page.
Vous pouvez activer cette option avec WP Rocket, en allant dans WP Rocket → Réglages → Optimisation des fichiers → Charger le JavaScript en différé.
Supprimer les ressources CSS inutilisées
En différant l’exécution des fichiers JavaScript, on fait en sorte qu’ils ne bloquent pas le chargement des autres ressources. Ce qui améliore le temps de chargement la page.
Vous pouvez activer cette option avec WP Rocket, en allant dans WP Rocket → Optimisation des fichiers → Optimiser le chargement du CSS → Supprimer les ressources CSS inutilisées.
Réduire le travail du thread principal
Le thread principal traite toutes les instructions nécessaires à l’affichage d’une page Web, le fichier HTML, les feuilles de styles CSS et les fichiers JavaScript.
Si certaines parties d’une page demandent une charge de travail trop importante, elles peuvent bloquer le thread principal. Les instructions suivantes doivent alors attendre que le thread principal se débloque pour pouvoir être interprétées à leur tour.
PageSpeed Insight signale les pages qui bloquent le thread principal pendant plus de 4 secondes et dresse la liste de toutes les ressources, accompagnées leur temps de chargement. Dans la majorité des cas, le fichier demandant le plus de ressource et un fichier JavaScript (Script Evaluation).
Minifier et Combiner les fichiers CSS
La minification d’un fichier CSS va supprimer les espaces blancs et les commentaires qui se trouvent dans le code. Cela permet de réduire la taille du fichier et donc de le télécharger plus rapidement. La minification seule ne réduit pas le nombre de requêtes HTTP sur votre site.
La combinaison des fichiers va combiner tous les fichiers CSS dans un seul fichier, ce qui va réduire le nombre de requêtes HTTP sur votre site. Cette combinaison n’est pas nécessaire lorsque vous utilisez le protocole HTTP/2.
Si vous ne savez si votre site utilise le code HTTP/2 aller sur le site keycdn, rentrez l’adresse de votre site et cliquez sur test. Si le resultat est http/2 protocol is supported, c’est que votre site utilise bien ce protocole, auquel cas, vous ne devez pas sélectionner l’option Combiner les fichiers CSS.
Vous pouvez sélectionner ces options avec WP Rocket, en allant dans WP Rocket → Optimisation des fichiers → Fichier CSS → Minifier les fichiers CSS.
Minifier et Combiner les fichiers JavaScript
La minification et Combinaison des fichiers JavaScript fonctionne sur le même principe que celui des fichiers CSS. Là encore, la combinaison des fichiers JavaScript n’est pas recommandée si votre site utilise le protocole HTTP/2.
Vous pouvez sélectionner ces options avec WP Rocket, en allant dans WP Rocket → Optimisation des fichiers → Fichier JavaScript → Minifier les fichiers JS.
Reporter l’exécution du JavaScript
Le report de l’exécution des fichiers JavaScript est une fonctionnalité très puissante qui permet, comme son nom l’indique, de reporter l’exécution du JavaScript jusqu’à que le lecteur interagisse avec la page.
Cette interaction peut survenir sous différentes formes, déplacement de la souris sur la page, défilement de la page, touche sur un écran tactile, etc.
Pour reporter l’exécution du JavaScript avec WP Rocket, allez dans WP Rocket → Optimisation des fichiers → Fichier JavaScript → reporter l’exécution JavaScript en différé.
Fichier JavaScript exclus.
Reporter l’exécution du JavaScript peut poser des problèmes avec certains thèmes et plugin. WP Rocket en fournit une liste accompagnée du code à placer dans le champ Fichier JavaScript exclus.
Par exemple, si vous utilisez le constructeur de page Elementor, vous devrez placer le code suivant.
/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/elementor/
/elementor-pro/
/wp-includes/js/imagesloaded.min.js
ElementorProFrontendConfig
elementorFrontendConfig
Résumé des actions à entreprendre pour améliorer le LCP
- Tester son site sur :
- Pagespeed Insight.
- Search Console.
- L’outil de développement (Web tools) de Google Chrome.
- Réduire le temps de réponse initial du serveur.
- Mise en cache du site avec un plugin de cache.
- Choisir un hébergeur de qualité.
- Éliminez les ressources qui bloquent le rendu.
- Différer le chargement des fichiers JavaScript.
- Supprimer les ressources CSS inutilisées.
- Réduire le travail du thread principal.
- Minifier et Combiner les fichiers CSS.
- Minifier et Combiner les fichiers JavaScript.
- Reporter l’exécution du JavaScript.
