Corriger le LCP : accélérer la seule chose que ton visiteur attend vraiment

Tu peux avoir un site qui charge "vite" dans tes outils et lent dans la tête de ton visiteur. C'est le piège du LCP, le Largest Contentful Paint, la métrique qui mesure le moment où le plus gros élément visible de ta page apparaît enfin. Pas la fin du chargement, pas le moment où tout est prêt en coulisses. Le moment précis où l'oeil voit la chose qu'il attendait.

Et c'est là tout l'enjeu. Optimiser le LCP, ce n'est pas accélérer toute ta page. C'est accélérer la seule chose que ton visiteur attend vraiment, pendant qu'il décide en quelques secondes s'il reste ou s'il part. Le seuil de référence est clair, un bon LCP se situe sous 2,5 secondes au 75e centile. Voici pourquoi cette métrique pèse plus lourd que ton score global, et comment trouver puis corriger l'élément coupable.

Le cerveau juge la vitesse à ce qu'il voit, et Copyboost en a fait les frais

Ton visiteur ne perçoit pas la vitesse comme une machine. Il ne compte pas les requêtes réseau ni les kilooctets transférés. Il attend un signal visuel qui lui dit "la page est là, je peux commencer". Ce signal, c'est presque toujours le plus gros élément au dessus de la ligne de flottaison, un titre, une image de héros, un bloc principal. Tant que cet élément n'est pas peint, le cerveau considère que rien ne s'est passé, même si la moitié de la page est déjà chargée techniquement.

C'est pour ça que le LCP est une métrique de perception avant d'être une métrique technique. Tu peux avoir un First Contentful Paint rapide, un petit texte qui apparaît tôt, et quand même un LCP catastrophique parce que l'élément qui compte arrive en retard. Le visiteur ne se sent pas servi par les petits éléments périphériques. Il se sent servi quand la chose principale est là.

Le corollaire est libérateur. Tu n'as pas à tout accélérer pour que ton site paraisse rapide. Tu dois accélérer un seul élément, le bon. C'est une cible étroite, identifiable, et donc corrigeable. La plupart des gens s'épuisent à optimiser partout au lieu de viser ce point unique.

Cette leçon, je ne l'ai pas apprise dans une doc, je l'ai apprise sur mon propre produit. Sur Copyboost, le LCP était plombé par deux choses que je ne voyais pas, parce que mon site chargeait vite chez moi, en local, sur ma machine de dev.

• Le coupable polices. Le titre principal, qui était l'élément LCP, attendait le chargement d'une police web avant de s'afficher. Neuf polices étaient chargées sans préchargement, donc le navigateur découvrait tard celle dont il avait besoin tout de suite. Le texte restait invisible le temps que la police arrive.
• Le correctif. En préchargeant la police critique et en séparant les routes pour n'envoyer que le nécessaire, le titre est apparu bien plus tôt. C'est une partie de ce qui a fait passer le Lighthouse de Copyboost de 57 à plus de 75. Le gain n'était pas réparti partout, il était concentré sur l'élément que l'oeil attendait.

La leçon, c'est que mon élément LCP n'était pas lent à cause de sa propre taille. Il était lent parce qu'il dépendait d'une ressource, la police, qui arrivait en retard. Le coupable LCP est souvent une dépendance cachée, pas l'élément lui même, et les polices sont une cause si fréquente que j'ai détaillé à part le coût caché des polices sur ta vitesse.

Quand le LCP est une image plutôt qu'un titre, le piège est différent mais la logique est la même. Une image de héros lourde, non dimensionnée, parfois même chargée en différé par réflexe, et tu retardes pile l'élément que le visiteur attend. J'ai traité ce sujet à part pour les images, mais le principe se résume ici : l'élément LCP est le seul que tu sers en priorité absolue, jamais celui que tu repousses. Tout ce qui le précède dans la file de chargement doit être justifié, sinon ça passe derrière lui.

Ton score global ne veut presque rien dire, ton LCP si

Je vais être direct. Le score de performance global, le chiffre unique sur cent que crachent les outils, est une moyenne qui cache l'essentiel. Deux sites avec le même score peuvent offrir une expérience perçue radicalement différente, parce que l'un peint son élément principal en une seconde et l'autre en quatre. Le score les classe pareil, ton visiteur non.

Le LCP, lui, mesure exactement ce qui décide de la première impression. C'est la métrique que je regarde en premier sur n'importe quel site, avant le score, avant le reste. Si ton LCP est mauvais, ton visiteur a l'impression d'attendre, point. Et un visiteur qui attend est un visiteur qui doute, puis qui part. Optimise le LCP avant de toucher à quoi que ce soit d'autre, c'est tout le sens de la vitesse comme premier levier CRO.

La checklist pour trouver et corriger ton LCP

Quatre étapes, dans l'ordre.

1. Identifie ton élément LCP. Ouvre l'onglet Performance de Chrome ou PageSpeed Insights, et regarde quel élément est marqué comme LCP. Ne devine pas, mesure. C'est presque toujours une image de héros ou un titre au dessus de la ligne de flottaison.
2. Vérifie ses dépendances. Est ce qu'il attend une police ? Une requête réseau ? Un script ? Le plus souvent, le LCP n'est pas lent en soi, il attend quelque chose. Précharge cette dépendance critique.
3. Ne le diffère jamais. Si ton élément LCP est une image, retire tout lazy loading dessus. Tu veux que le navigateur la cherche immédiatement, pas qu'il la repousse. Le lazy loading sur l'élément LCP est l'erreur la plus fréquente.
4. Sers le tôt. Rends le côté serveur, donne lui la priorité de chargement, précharge le. Tout ce qui le fait apparaître plus tôt joue directement sur la perception de vitesse.

Où tu mesures le vrai gain : compare ton LCP au 75e centile sur le terrain, pas en labo, parce que c'est ce que vivent tes vrais visiteurs sur leurs vrais appareils.

Ce qu'il faut retenir

Le LCP n'est pas la vitesse de ta page, c'est le moment où ton visiteur voit enfin la chose qu'il attendait. C'est la métrique qui décide de la première impression, bien plus que ton score global. Il n'est d'ailleurs que le premier des trois Core Web Vitals, aux côtés de l'autre métrique visuelle, le CLS, et de la réactivité aux clics, l'INP. Identifie ton élément LCP, traque la dépendance cachée qui le retarde, ne le diffère jamais, et sers le le plus tôt possible. Ouvre PageSpeed Insights sur ta page la plus importante aujourd'hui, repère ton élément LCP, et tu sauras exactement où porter ton premier effort. Tu seras surpris de voir que ce n'est presque jamais là où tu pensais perdre du temps, et que le correctif tient souvent en une ou deux lignes, un préchargement, un lazy loading retiré au bon endroit. C'est le meilleur rapport effort sur impact de toute ta performance. Si tu veux que je le fasse pour toi et que je te dise ce qui retarde ta première impression, c'est tout l'objet d'un diagnostic.