C'est quoi le LCP de Google ?

LCP, non ce n'est pas qu'une chaîne de télé super ennuyante, c'est aussi une mesure de qualité d'un site web comme le FID et le CLS.

Le LCP, une mesure de la rapidité d'affichage d'une page web

LCP est l'acronyme de Largest Contentful Paint qu'on peut traduire par le "temps maximum d'affichage du plus gros bloc".

Plus précisément, le LCP est le temps pour afficher la plus grande image ou bloc de texte de la zone visible (viewport). Il est mesuré à partir de début de chargement de la page.

Il est considéré comme bon jusqu'à 2,5 secondes, à améliorer jusqu'à 4 secondes et mauvais s'il exède 4 secondes.

Pour améliorer votre LCP, vous devez travailler sur le chargement de la partie supérieure de votre page : lazy loading des images, optimisation du chargement des librairies tiers et aussi choisir un hébergeur performant !

 

Les Core Web Vitals

Le LCP mesure la rapidité d'affichage et fait partie, avec le FIP et le CLS, des 3 indicateurs introduits par Google en 2021 pour mesurer la qualité de l'expérience utilisateur sur une page web.

Le FIP, une mesure de l'interactivité

Le FIP est l'acronyme de First Input Delay qu'on peut traduire par "délai avant la première interaction" est le temps que l'utilisateur doit attendre pour pouvoir cliquer sur la page (ou toute autre interaction).

Il mesure donc la réactivité de la page au chargement qui se traduit chez l'utilisateur par une sensation de facilité et de rapidité.

Le FIP est considéré comme bon jusqu'à 100ms puis à améliorer jusqu'à 300ms et mauvais après.

Pour l'améliorer le FIP de votre site, vous pouvez compressez et optimiser vos scripts javascript. Vous pouvez également travailler sur la mise en cache.

 

Le CLS, une mesure de stabilité visuelle

Le CLS est l'acronyme de Cumulative Layout Shift soit le "décalage de l'agencement".Son calcul n'est pas évident (voir le détail ici)  mais on peut simplement retenir que cet indicateur vise les sites qui affichent les blocs un par un en décalant petit à petit les contenus vers le bas.

Le CLS est considéré comme bon jusqu'à 0,1 puis à améliorer jusqu'à 0,25 et mauvias après.

Pour l'améliorer  le CLS de votre site, vous pouvez fixer dans le html les tailles des images et des iframes, éviter les injections d'éléments en asynchrone, travailler le chargement de vos fonts pour éviter le décalage du texte.

 

 

Pourquoi faire attention à ces facteurs de qualité d'un site web ?

Ces trois facteurs sont en réalité des indicateurs techniques qui influent sur la qualité de l'expérience de l'utilisateur mais ils ne sont pas une mesure globale de l'UX. Alors pourquoi sont-ils importants ?

1) Ces indicateurs sont pertinents techniquement et ils donnent une bonne idée de la qualité technique d'un site web.

2) Bien entendu Google prend en compte ces 3 facteurs pour noter la qualité de vos pages et donc cela influe sur le référencement du site et donc son trafic organique.

3) Google fourni des bons outils pour suivre et améliorer ces indicateurs :

- vous pouvez mesurer ces indicateurs dans la console de recherche

- idem dans les outils de développement de Chrome (menu de Chrome >> Plus d'outils >> Outils de développement >> onglet Lighthouse), vous pouvez analyser ces indicateurs avec Lighthouse.

- il existe aussi une extension Chrome

- de plus en plus de services ont intégré ces mesures à leurs outils  (par exemple)

 4) Ces indicateurs sont bien adoptés par les développeurs. C'est donc un bon moyen de comparer les sites entre eux et de fixer des exigences de qualité à vos prestataires de développement.

D'ailleurs on vous a dit qu'on pouvait vous aider avec nos prestations d'accompagnement en développement web : prise de besoin, rédaction de cahier des charges, recette technique, formation et embarquement mais aussi nos audits de site web ?

 

Contactez nous !

 

Références : https://web.dev/vitals/

 

Merci à Veri Ivanova pour l'illustration !