Qu'est-ce le Largest Contentful Paint (LCP) et comment l'optimiser ?

Dans nos précédents articles, nous avons mis l'accent sur l'importance de l'expérience utilisateur (UX) et celle des facteurs comme la vitesse de chargement et le design responsive qui sont des éléments essentiels au moment de créer votre site web.

L'un des facteurs les plus importants qui influencent l'expérience utilisateur est le temps nécessaire au chargement du contenu de la première page rendue. On appelle cela le First Contentful Paint (FCP), un facteur mesurant le temps nécessaire au rendu du contenu initial.

De son côté, l'affichage du contenu le plus grand nommé Largest Contentful Paint (LCP) est une autre métrique basée uniquement sur l'élément le plus grand de l'écran d'affichage.

Aujourd'hui, sur le blog SiteW, nous allons vous expliquer tout ce que vous devez savoir sur le Largest Contentful Paint. Qu'est-ce que c'est ? Comment se mesure-t-il ? Quel est son impact sur le SEO de votre site ?

Largest Contentful Paint (LCP) : Qu'est-ce que c'est ?

Le LCP est une métrique de Google, faisant partie des indicateurs Core Web Vitals, qui mesure le temps nécessaire à l'élément de contenu le plus grand pour s'afficher sur l'écran. Pour faire simple, il s'agit de l'élément positionné en haut du site et qui est visible sans avoir besoin de se déplacer sur la page.

Bien que le LCP soit une métrique de Google, il prend uniquement en compte le temps de chargement qui est pertinent pour l'expérience utilisateur. Il s'agit des images, des tags des images, des miniatures vidéo, des images d'arrière-plan, des paragraphes, des listes, des en-têtes et d'autres éléments texte qui permettent à l'utilisateur d'interagir avec le site.

Comment mesure-t-on le LCP ?

En théorie, il y a 2 formes de mesure du LCP : avec les outils Field utilisés directement sur le site ou en simulant le chargement d’une page dans un environnement cohérent et contrôlé ; c'est-à-dire avec des outils Lab. Dans les 2 cas, on utilise des outils pour avoir une mesure précise. Lisez ce qui suit car nous allons tout vous expliquer.

Outils Field

Les données Field viennent des utilisateurs qui naviguent sur le site et de l'expérience qu'ils ont eu. Les outils de mesure de ces données sont les suivants :

Chrome User Experience Report

Aussi connu sous le nom de rapport crUX, il désigne un ensemble de données publiques obtenues à partir de données réelles sur l'expérience utilisateur.

Ces données sont récoltées sur des millions de sites web. Pensez donc au LCP et aux autres mesures de la Core Web Vitals comme le First Input Delay (FID), le Cumulative Layout Shift (CLS), des métriques de diagnostic comme le Time to First Byte (TTFB) et le First Contentful Paint (FCP).

Cet ensemble de données contient des informations de qualité sur l'expérience utilisateur, les dispositifs de navigation et le type de connexion. Elles permettent de creuser les informations récoltées.

PageSpeed Insights

Cet outil de Google montre le temps de chargement des ressources d'un site, ainsi que les éléments qui peuvent ralentir le chargement complet.

De plus, il offre un rapport détaillé sur les erreurs détectées pour les corriger et optimiser la page.

Google Search Console

La console de recherche de Google est un autre outil qui fait un rapport sur l'UX avec les données Core Web Vitals. Ce rapport n'offre pas de données concrètes sur une URL, mais sur les performances générales du site et sur de possibles problèmes sur diverses pages.

Outils Lab

Les données Lab sont récoltées grâce à des outils qui collectent les informations d'un environnement simulé. Voici une présentation de ces outils :

Chrome DevTools

Ces outils pour développeurs viennent aussi de Google et sont intégrés dans le navigateur Google Chrome. Leur fonction est d'inspecter le code HTML, le rendu, l'activité de réseau des pages, le JavaScript, les éléments de téléchargement et leurs durées, la performance du chargement, entre autres.

Lighthouse

Cet outil est une extension de Google Chrome qui évalue la qualité d'un site en termes de performance, de chargement des premières images et contenus, de l'accessibilité, etc.

WebPageTest

Cet outil mesure le temps de chargement d'un site web, de la première demande jusqu'à ce que le navigateur affiche tout le contenu. Pour résumer, WebPageTest évalue le temps qu'un utilisateur doit attendre avant de pouvoir utiliser la page.

Quelles sont les bonnes valeurs du LCP ?

Généralement, les bonnes valeurs du LCP sont mesurées en un temps de chargement de 2,5 secondes, tandis qu'une mauvaise note est supérieure à 4 secondes.

Comment optimiser le LCP ?

En général, les causes les plus fréquentes d'une mauvaise évaluation du LCP sont le temps de réponse long de la part du service, des erreurs de Javascript et l'usage incorrect des fichiers d'images.

De ce fait, voici quelques conseils pour optimiser le LCP :

• Optimiser le temps de réponse du service. Vous pouvez, par exemple, diriger les utilisateurs vers un CDN proche.

• Opter pour des images comprimées et de la bonne taille pour éviter qu'elles pèsent trop au moment de les télécharger.

• Utiliser un service CDN pour que les images se chargent plus rapidement.

• Éviter l'usage de JavaScript pour charger des images.

• Choisir un bon hébergeur.

Opter pour la facilité en créant son site avec SiteW

Nous espérons que vous avez trouvé tous les renseignements nécessaires dans cet article.

Si vous souhaitez esquiver tous les problèmes liés à l'analyse et à l'optimisation de ces facteurs, créez votre site avec SiteW.

Vous n'avez qu'à vous inscrire, choisir votre formule et construire votre site comme vous le désirez. SiteW se charge de toute la partie technique, de l'optimisation SEO, du design responsive et de tous ces facteurs qui influencent l'expérience utilisateur. 🥳