Comment améliorer la plus grande peinture de contenu (LCP) sur WordPress

Mesurer l'expérience utilisateur (UX) d'un site Web peut être un défi difficile. Mais c'est ce que Google tente de faire avec les métriques Core Web Vitals. Et il est important d'obtenir un bon score sur ces derniers, car Google évalue l'expérience utilisateur lors de la détermination du classement des moteurs de recherche.

Il existe plusieurs mesures qui font partie de Core Web Vitals, et elles peuvent sembler un peu intimidantes. La bonne nouvelle est qu'il existe plusieurs outils qui facilitent la compréhension de votre score et la manière de vous améliorer.

Dans cet article, nous examinerons une métrique particulière : la plus grande peinture de contenu (LCP). Cela mesure le temps qu'il faut à votre site Web pour charger le plus grand élément que vous voyez à l'écran.

Nous discuterons de son impact sur l'expérience utilisateur et des causes d'un mauvais score LCP. Ensuite, nous vous montrerons comment l'améliorer.

Qu'est-ce que la plus grande peinture de contenu (LCP) ?

LCP est une métrique qui mesure le temps nécessaire au chargement du plus grand élément d'une page. Pour la plupart des pages, le plus grand élément est une grande image ou une section héros en haut de l'écran.

En soi, un score LCP vous aide à comprendre à quelle vitesse votre site charge les éléments visuels. Votre page peut continuer à charger des scripts en arrière-plan sans impact sur cette métrique. En un mot, les scores LCP ne concernent que les médias et le texte sur une page donnée.

LCP est l'un des trois Core Web Vitals que Google utilise pour mesurer l'UX d'une page. Les deux autres sont :

1. Premier délai d'entrée (FID) : le FID mesure le temps qu'il faut entre le moment où un visiteur effectue sa première action (cliquer sur un lien, par exemple) et le moment où le site répond.
2. Cumulative Layout Shift (CLS) : cette métrique mesure efficacement le degré de changement de votre site lors du chargement. Le texte peut apparaître en premier, puis sauter vers le bas de l'écran lorsqu'une image se charge, ce qui fait perdre aux visiteurs leur place.

En règle générale, vous voulez que les trois scores Core Web Vitals soient aussi bas que possible. Des scores faibles signifient qu'une page se charge rapidement et en douceur.

En termes de chiffres, voici ce que Google considère comme des scores Core Web Vital bons, acceptables et médiocres :

Gardez à l'esprit que mesurer les temps de chargement des pages n'est pas la même chose que vérifier les Core Web Vitals de votre site Web. Votre site peut se charger relativement rapidement, mais il peut avoir de mauvais scores CLS ou FID. Idéalement, vous mesurerez à la fois les temps de chargement globaux et les Core Web Vitals pour obtenir une évaluation précise des performances de votre site.

Comment LCP impacte-t-il l'expérience utilisateur sur un site WordPress ?

Un mauvais score de peinture de contenu le plus élevé signifie que vos pages peuvent prendre trop de temps à charger. Gardez à l'esprit que vous devez mesurer Core Web Vitals page par page. Alors qu'une page peut avoir un mauvais score LCP, d'autres peuvent être très bien.

Mais généralement, un site verra une tendance dans ses scores LCP car les résultats sont souvent liés à des pratiques d'optimisation mises en œuvre à l'échelle du site. Si un site a été créé sans tenir compte des meilleures pratiques, chaque page aura probablement un score bas. Si un site a été soigneusement optimisé, la plupart des pages obtiendront généralement de bons résultats. Les développeurs réfléchis identifieront les pages qui obtiennent un score inférieur à la moyenne et apporteront des ajustements spécifiques pour améliorer les performances de cette page.

Dans l'ensemble, un mauvais score LCP signifie que les visiteurs devront peut-être attendre trop longtemps pour que vos pages se chargent complètement visuellement, et les visiteurs n'aiment pas attendre. Si vos pages prennent plus de deux ou trois secondes à se charger, vous pouvez commencer à attirer beaucoup de visiteurs.

Il convient également de noter que Core Web Vitals est un facteur de classement dans Google. De mauvais scores LCP peuvent diminuer le classement dans les pages de résultats des moteurs de recherche (SERP), ce qui signifie que vous obtiendrez moins de trafic organique.

Comment mesurer les scores LCP

Il existe plusieurs outils que vous pouvez utiliser pour mesurer les scores LCP. Le plus simple est PageSpeed ​​Insights. Avec ce service, vous pouvez entrer l'URL de n'importe quelle page et obtenir un rapport complet sur ses performances globales en quelques secondes.

Une fois que vous avez entré une URL et cliqué sur Analyser , PageSpeed ​​Insights générera deux rapports pour cette page, l'un pour les mobiles et l'autre pour les performances des ordinateurs de bureau. Vous pouvez voir vos scores Core Web Vitals, y compris LCP, en haut du rapport.

Si vous faites défiler vers le bas, le rapport affiche également les améliorations de performances potentielles que vous pouvez apporter à votre site Web. Pour chaque amélioration suggérée, PageSpeed ​​Insights vous donne une estimation des temps de chargement qui peuvent être économisés.

Si vous utilisez Google Search Console, vous pouvez accéder aux rapports PageSpeed ​​Insights sans quitter la plateforme. Et certains plugins WordPress comme Site Kit vous permettent d'afficher les scores Core Web Vitals directement dans le tableau de bord.

Qu'est-ce qui cause un mauvais score LCP ?

Il existe de nombreuses causes potentielles d'un mauvais score LCP et de longs temps de chargement. Habituellement, cela se résume à des problèmes avec votre serveur ou à un manque d'optimisation sur votre site Web. Passons en revue chaque cause potentielle :

1. Temps de réponse du serveur lent. Si votre hébergeur n'offre pas de bonnes performances au niveau du serveur, vous ne pouvez pas faire grand-chose pour diminuer vos scores LCP. Les temps de réponse lents du serveur signifient de longues attentes pour les visiteurs, même si votre site est correctement optimisé. Dans ce cas, vous voudrez peut-être envisager de passer à un autre fournisseur d'hébergement WordPress.
2. JavaScript et CSS bloquant le rendu. Dans certains cas, les scripts JavaScript et CSS peuvent empêcher le rendu d'autres éléments d'une page tant qu'ils n'ont pas été chargés. C'est ce qu'on appelle le "blocage du rendu" et cela peut augmenter vos temps de chargement globaux.
3. Fichiers et images lourds. Si vous utilisez des images avec des fichiers de grande taille, leur chargement peut prendre un certain temps. Idéalement, vous devriez compresser et optimiser les images que vous téléchargez sur votre site.
4. Ne pas tirer parti de la mise en cache du navigateur. La mise en cache du navigateur enregistre une copie du contenu statique de votre site dans les navigateurs des visiteurs afin d'accélérer votre temps de chargement pour les visites futures. Si vous n'utilisez pas la mise en cache du navigateur, les utilisateurs devront recharger complètement les pages à chaque fois qu'ils s'y rendent.
5. Ne pas utiliser la compression GZIP. Il s'agit d'une application logicielle qui compresse les requêtes HTTP et les fichiers au niveau du serveur. La plupart des hébergeurs Web réputés devraient offrir la compression GZIP dès la sortie de la boîte.

Comment améliorer la plus grande peinture de contenu dans WordPress

Il existe plusieurs façons de réduire le score LCP de votre site Web WordPress et d'améliorer ses performances globales. Voyons ensemble les méthodes les plus efficaces.

1. Utilisez un plugin conçu pour aider à améliorer Core Web Vitals dans WordPress

Il existe plusieurs plugins conçus pour vous aider à améliorer vos scores Core Web Vitals. L'une des solutions les plus puissantes est Jetpack Boost.

Jetpack Boost peut vous aider à mettre en œuvre plusieurs optimisations de performances simplement en basculant les paramètres correspondants. Vous pouvez différer le JavaScript bloquant le rendu, activer le chargement différé et optimiser le code CSS de votre site Web.

Bien que l'utilisation de Jetpack Boost vous aide à améliorer vos scores LCP, cela ne signifie pas que vous devez lésiner sur d'autres optimisations de performances. Après avoir activé le plugin, nous vous recommandons également de mettre en œuvre d'autres stratégies pour améliorer encore plus vos Core Web Vitals.

2. Minifiez le CSS de votre site Web

Lorsque vous travaillez avec du code, il est recommandé de le formater d'une manière facile à comprendre pour les autres. Cela signifie utiliser des espaces, répartir le code sur plusieurs lignes et le structurer de manière à le rendre plus facile à lire.

Le problème avec cette approche est que chaque espace et caractère occupe de l'espace disque supplémentaire. Si nous ne parlons que de quelques lignes de code, cela n'a pas beaucoup d'impact. Mais lorsque vous avez affaire à des dizaines ou des centaines de fichiers CSS, chacun contenant des centaines de lignes de code, ces scripts peuvent affecter les temps de chargement et les scores LCP de votre site Web.

Une façon de minimiser l'impact du CSS est de "minifier" le code. Cela implique de supprimer les caractères inutiles et les espaces blancs pour réduire la taille du fichier. Pour voir comment cela fonctionne, voici un exemple de code CSS pour styliser plusieurs éléments div :

 div{ border: 3px solid currentColor; } #div1{ color: green; } #div2{ color: blue; }

Maintenant, voici à quoi ressemble ce code après l'avoir minifié :

 div{border:3px solid currentColor}#div1{color:green}#div2{color:#00f}

Selon l'outil de minification que vous utilisez, il peut également remplacer les valeurs par des alternatives optimisées. Nous mentionnons les outils de minification car le formatage manuel du code prend trop de temps et peut entraîner des erreurs.

Il existe de nombreux outils de minification gratuits que vous pouvez utiliser sur le Web, y compris des options comme le minificateur CSS de Toptal.

Il existe également des plugins de minification WordPress que vous pouvez utiliser pour optimiser le code de votre site Web. La plupart de ces plugins ne se contentent pas de minifier le CSS, mais ils incluent également d'autres fonctionnalités telles que le report du JavaScript et du CSS bloquant le rendu. Nous parlerons de ce que cela signifie dans la section suivante.

3. Reportez JavaScript et CSS qui bloquent le rendu

Lorsque vous visitez un site Web, il se peut qu'il ne charge pas les ressources de manière à réduire autant que possible les temps de chargement. Dans certains cas, les fichiers JavaScript peuvent amener votre navigateur à attendre que ces scripts aient fini de se charger avant de continuer à afficher d'autres éléments.

Ce code bloquant le rendu augmente le score LCP de votre page. Il existe deux manières de traiter ce problème :

1. Éliminer les scripts bloquant le rendu.
2. Différez les scripts bloquant le rendu jusqu'à ce que les autres éléments aient fini de se charger.

La deuxième option est idéale si vous gérez le code dont votre site Web a besoin pour les fonctionnalités critiques. En différant les scripts nécessaires, les pages termineront leur rendu visuel puis le code se chargera en arrière-plan. En ce qui concerne les utilisateurs, tout se chargera plus rapidement.

Le moyen le plus simple de déterminer quels scripts bloquent le rendu consiste à utiliser PageSpeed ​​Insights. Chaque rapport PageSpeed ​​Insights comprend une section qui couvre les ajustements de performances recommandés.

Après avoir exécuté un test, regardez sous l'onglet qui dit Supprimer les ressources bloquant le rendu . À l'intérieur, vous verrez une liste de scripts JavaScript et CSS qui bloquent le rendu. Cette section vous donnera également une estimation du temps de chargement que vous pouvez réduire en différant chacun.

Vous pouvez utiliser l'outil web.dev si cela ne vous dérange pas de modifier le code. Alternativement, vous pouvez à nouveau vous tourner vers Jetpack Boost pour différer les scripts de blocage du rendu. Il gère simultanément plusieurs éléments d'amélioration des éléments vitaux du Web de base.

Il existe également plusieurs plugins autonomes qui diffèrent les scripts de blocage du rendu et les minifient. Ceux-ci inclus:

1. Autoptimize : vous pouvez différer le JavaScript et le CSS qui bloquent le rendu et activer le chargement différé des images pour votre site Web.
2. Fast Velocity Minify : ce plugin peut différer, minifier et combiner les fichiers JavaScript et CSS sur votre site web.
3. Hummingbird : ce plugin WPMU DEV vous permet de tirer parti de la mise en cache du navigateur, de différer les scripts de blocage du rendu et de minifier JavaScript et CSS.  

Lorsque vous traitez avec des plugins qui peuvent minifier le code de votre site Web, nous vous recommandons de sauvegarder entièrement votre site WordPress avant de les activer. De cette façon, si le processus de minification casse une fonctionnalité de base de votre site Web, vous pouvez revenir à une version antérieure sans perdre de données.

4. Optimisez les images de votre site

Les fichiers image volumineux sont l'un des principaux responsables des mauvais scores LCP dans WordPress. Les images haute résolution sont superbes, mais elles occupent également beaucoup d'espace de stockage. Si vous avez affaire à des fichiers non compressés et que vous avez plusieurs images sur une seule page, les temps de chargement peuvent rapidement devenir incontrôlables.

La meilleure façon de résoudre ce problème est d'optimiser vos images. Vous pouvez le faire avant ou après les avoir téléchargés sur WordPress.

Optimiser les images signifie les compresser. Selon l'outil de compression que vous utilisez, le processus devrait avoir un impact minimal sur la qualité de l'image, mais il peut réduire considérablement la taille des fichiers et les temps de chargement globaux.

Si vous souhaitez optimiser les images avant de les télécharger sur WordPress, vous pouvez utiliser des outils en ligne gratuits comme TinyPNG.

Avec TinyPNG, vous pouvez télécharger et optimiser manuellement les fichiers JPG et PNG. Le service compresse les images et vous permet ensuite de les télécharger sur votre ordinateur. Ensuite, vous pouvez procéder au téléchargement des images compressées sur WordPress.

Jetpack CDN est une excellente option pour optimiser vos images directement dans WordPress. Il redimensionne également automatiquement les images pour les appareils mobiles, accélérant ainsi votre site à tous les niveaux. En parlant des avantages d'un CDN…

5. Utilisez un réseau de diffusion de contenu (CDN)

Un CDN est un service qui vous donne accès à des centres de données répartis dans des régions stratégiques. Ces centres de données stockent des copies en cache de votre site Web et interceptent les connexions des personnes qui souhaitent le visiter.

Un CDN achemine automatiquement ces connexions vers le centre de données le plus proche de chaque visiteur. Étant donné que le contenu du site a moins de distance à parcourir, la page se chargera plus rapidement.

De plus, les CDN sont conçus pour répondre aux demandes le plus rapidement possible. Cela signifie qu'ils chargent généralement le contenu beaucoup plus rapidement que les serveurs gérés par votre fournisseur d'hébergement.

Des services comme Cloudflare offrent des plans CDN gratuits limités qui peuvent mettre en cache quelques-unes des pages de votre site. Certains hébergeurs WordPress gérés proposent des intégrations CDN intégrées, vous n'avez donc pas à payer pour un service séparé. Mais si vous utilisez Jetpack, vous avez également accès à un CDN gratuit, spécifique à WordPress, que vous pouvez utiliser pour accélérer les images et les fichiers de sites Web.

Foire aux questions sur la plus grande peinture de contenu dans WordPress

Si vous avez encore des questions sur la façon de mesurer et d'optimiser votre score LCP, cette section y répondra.

Comment mesurer le score LCP de mon site WordPress ?

Étant donné que les scores LCP font partie des métriques Core Web Vitals, vous devez utiliser les outils Google pour les mesurer. Google propose trois méthodes pour mesurer votre score LCP :

1. PageSpeed ​​Insights : vous pouvez utiliser ce service en ligne pour mesurer à la demande les Core Web Vitals de n'importe quelle page. Lorsque vous analysez une page, PageSpeed ​​Insights renverra également des suggestions pour améliorer les performances et l'expérience utilisateur globale.
2. Google Search Console : Ce service vous permet de surveiller l'optimisation des moteurs de recherche (SEO) et la santé globale de votre site Web. Google Search Console comprend également des recommandations et des scores intégrés de PageSpeed ​​Insights.
3. Lighthouse : vous pouvez utiliser cette extension Chrome pour accéder à des fonctionnalités avancées lors de l'utilisation des outils de développement du navigateur.

Google propose également un plugin officiel appelé Site Kit que vous pouvez utiliser pour accéder à plusieurs de ses services depuis WordPress. Avec Site Kit, vous pouvez accéder aux rapports PageSpeed ​​Insights, y compris les scores LCP, sans quitter le tableau de bord.

Qu'est-ce qu'un bon score LCP ?

Selon Google, tout ce qui est inférieur à 2,5 secondes est un bon score LCP. Même si votre site Web répond à ces critères, cela ne signifie pas que vous ne devriez pas l'optimiser davantage.

Idéalement, vous souhaiterez réduire autant que possible les temps de chargement du site Web. Si vous pouvez viser des temps de chargement globaux inférieurs à une ou deux secondes, vous pouvez offrir une bien meilleure expérience utilisateur.

Comment puis-je optimiser facilement mon score LCP sur WordPress ?

Le moyen le plus simple et le plus rapide d'optimiser votre score LCP sur WordPress est d'installer Jetpack Boost. Ce plugin vous aidera également à améliorer vos autres scores Core Web Vitals, y compris le premier délai d'entrée et le changement de mise en page cumulé.

Commencez par installer et activer Jetpack Boost sur votre site :

Ensuite, accédez à Jetpack → Boost dans votre tableau de bord. Ici, vous verrez des options pour optimiser le chargement CSS, différer le JavaScript non essentiel et activer le chargement d'image paresseux. Nous vous recommandons d'activer les trois options.

L'activation du chargement différé est un excellent moyen d'améliorer les scores LCP de votre site Web. WordPress inclut le chargement paresseux en tant que fonctionnalité intégrée à partir de la version 5.5, mais vous devrez activer le paramètre manuellement pour les images que vous souhaitez optimiser.

Avec Jetpack Boost, vous pouvez activer le chargement paresseux pour toutes les images de votre site Web à la fois. En reportant les éléments les plus volumineux sur chaque page, votre score LCP devrait s'améliorer immédiatement.

Améliorez les Core Web Vitals de votre site Web

L'amélioration des Core Web Vitals de votre site Web peut vous aider à offrir une meilleure expérience utilisateur. Les scores LCP, en particulier, affectent considérablement la satisfaction des visiteurs vis-à-vis des performances de votre site. Un score faible signifie que votre site Web se charge rapidement, et un site Web à chargement rapide signifie moins de visiteurs frustrés.

Récapitulons les méthodes les plus efficaces que vous pouvez utiliser pour améliorer votre score LCP dans WordPress :

1. Utilisez un plugin conçu pour aider à améliorer Core Web Vitals.
2. Minifiez votre CSS.
3. Reportez JavaScript et CSS bloquant le rendu.
4. Optimisez les images de votre site Web.
5. Utilisez un réseau de distribution de contenu.

Avec Jetpack Boost, vous pouvez rapidement optimiser les Core Web Vitals de votre site Web, y compris ses scores LCP. Jetpack Boost vous permet de mettre en œuvre plusieurs optimisations de performances simplement en basculant leurs paramètres correspondants. De plus, il est gratuit et fonctionne de manière transparente avec le reste de la famille d'outils Jetpack.