Core Web Vitals : focus sur le LCP

Le projet « Page Experience » et ses trois KPI (LCP, FID et CLS) nommés « Core Web Vitals » arrivent et seront pris en compte par Google en mai 2021. Aussi, il nous a semblé intéressant de consacrer, avant ce lancement, une suite d'articles à ce sujet. Après la revue d'effectif globale du mois dernier, place au premier de ces indicateurs : le LCP (Largest Contentful Paint).

Dans la continuité de l’article du mois dernier qui présentait les Core Web Vitals, ainsi que l’arrivée des Page experience signals en Mai 2021, nous allons détailler dans cet article l’un de ces Core Web Vitals (les autres suivront dans les prochains numéros de Réacteur), à savoir le LCP : Largest  Contentful Paint.

Cet indicateur orienté utilisateur peut augmenter en fonctions de différents facteurs. Quel est son fonctionnement, sa méthode de calcul, ainsi que les différents éléments qui peuvent augmenter le LCP et nuire à une bonne expérience utilisateur ? Nous allons aborder tout ces sujets dans cet article qui lui est dédié.

Principe du LCP

Deux métriques un peu similaires étaient utilisées auparavant : le FCP (First Contentful Paint), et le FMP (First Meaningful Paint) qui se rapproche le plus du LCP. Cette dernière qui avait amené à des résultats incohérents a poussé Google à ne plus l’utiliser depuis LightHouse 6, afin de s’orienter vers ce nouvel indicateur, le LCP.

Le principe du LCP est de mesurer le chargement de l’élément le plus important dans la partie visible de la fenêtre d’un navigateur (également appelé viewport). Cette métrique User-centric a pour objectif d’être au plus proche du ressenti utilisateur. Un LCP est considéré comme bon quand la peinture du plus grand élément dans la page intervient moins de 2,5 secondes depuis le début du chargement de la page :

Figure 1 - Echelle de mesure du score LCP

L’élément le plus important est en général une image, une vidéo ou un bloc de texte (titre, paragraphe). Même si cet élément s’étend à l’extérieur de la partie visible de la fenêtre du navigateur, c’est uniquement la partie visible de l’élément à l’écran qui sera prise en compte dans le calcul du LCP. Concernant les images qui sont redimensionnées à partir de leur taille intrinsèque à l’affichage, c’est la dimension affichée qui entrera en ligne de compte. Les images étirées ou agrandies à une taille supérieure ne rapporteront que leur taille intrinsèque.

Aymeric Bouillat, Consultant SEO senior chez Novalem (https://www.novalem.fr/)