Idées reçues sur l’optimisation du LCP

Améliorer le LCP (Largest Contentful Paint) d’une page est rarement simple : plusieurs éléments entrent en jeu, avec des compromis. Sur la plupart des pages, l’élément LCP est une image, d’où le conseil le plus répandu depuis cinq ans : réduisez le poids de vos images. Bien dimensionner et compresser ses images reste utile, et beaucoup de sites diffusent encore des fichiers inutilement lourds.

Mais quand on observe les données réelles des utilisateurs de Chrome, le temps de téléchargement de l’image n’est presque jamais le goulot d’étranglement. C’est une information capitale pour le SEO : le LCP fait partie des Core Web Vitals évalués par Google, et concentrer ses efforts au mauvais endroit revient à dépenser de l’énergie pour des gains marginaux ; pour la méthode complète, voyez comment optimiser le LCP.

Pour savoir où agir, il faut décomposer le temps écoulé avant le LCP. Quel que soit le framework, ce délai se répartit en quatre sous-parties : le temps avant le premier octet, le délai avant le chargement de la ressource, la durée de chargement de cette ressource, puis le délai d’affichage de l’élément.

Visualiser ces quatre segments change la perspective : on cesse de regarder uniquement le poids de l’image pour examiner toute la chaîne, du clic jusqu’à l’affichage complet.

Le temps avant le premier octet (TTFB) pèse lourd. Pour au moins la moitié des origines au LCP médiocre, un TTFB de l’ordre de 2 270 millisecondes interdit presque mécaniquement de passer sous le seuil de 2,5 secondes. On ne défie pas les lois de la physique, mais un CDN qui rapproche les contenus des utilisateurs aide nettement ; pour aller plus loin, voyez comment optimiser le TTFB.

Le délai de chargement de la ressource est le coupable le plus méconnu : c’est le temps perdu entre la réception du HTML et le moment où le navigateur lance enfin le téléchargement de l’image. Le site médian au LCP faible attend près de quatre fois plus longtemps qu’il ne télécharge réellement l’image. Les chaînes de dépendances (une feuille de style qui définit une image de fond, par exemple) en sont la cause fréquente.

Le délai d’affichage correspond au temps qui s’écoule une fois l’image prête, avant qu’elle n’apparaisse. Pour une page typique, il offre peu de marge, mais l’optimisation peut le faire ressurgir : si l’on précharge l’image alors que la page n’est pas prête à l’afficher (gros CSS bloquant, rendu côté client), le temps gagné réapparaît sous forme de délai d’affichage. D’où l’avantage du rendu côté serveur ou du HTML statique.

La leçon est claire : pour optimiser le LCP efficacement, il faut examiner le chargement de la page dans son ensemble, et cocher chaque sous-partie plutôt que de se focaliser sur la seule compression des images. Encore faut-il bien mesurer le LCP pour situer chacune d’elles.