Largest Contentful Paint (LCP) - Docs de MetricSpot

Què comprova aquesta auditoria

Llegeix l’LCP de Google PageSpeed Insights (que executa Lighthouse contra la teva URL). El valor és el temps, en segons, fins que l’element above-the-fold més gran acaba de renderitzar-se: típicament una imatge hero, el pòster d’un vídeo o un titular gran.

Valor LCP	Veredicte
≤ 2,5 s	Bo
2,5–4,0 s	Cal millorar
> 4,0 s	Pobre

Per què importa

L’LCP és un dels tres Core Web Vitals de Google. Un LCP pobre no només fa baixar el posicionament una mica, té un efecte cascada en cada embut de conversió del teu lloc. Les dades del mateix Google mostren que les pàgines amb LCP sota 2,5 s tenen un 25% menys de rebot que les pàgines per sobre de 4 s.

L’LCP està dominat per com de ràpid carrega l’element LCP, no per com de ràpid s’executa el teu JavaScript. L’element LCP gairebé sempre és una imatge. Així que el 80% de les solucions d’LCP són sobre lliurament d’imatges.

Com solucionar-ho

Per ordre aproximat d’impacte:

1. Precarrega la imatge LCP. Al teu <head>:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

Això inicia la descàrrega de la imatge abans que el navegador hagi acabat de parsejar la resta de l’HTML.

2. Serveix formats moderns. AVIF o WebP, amb fallback a JPEG per a navegadors antics:

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="..." width="1200" height="600" fetchpriority="high" />
</picture>

3. Estableix dimensions explícites al <img> (atributs width + height). Els navegadors reserven l’espai sense esperar que la imatge carregui.

4. Redimensiona per al viewport. No serveixis una imatge hero de 4000×3000 a un viewport mòbil. Fes servir srcset amb múltiples resolucions.

5. Auto-allotja les fonts o fes servir font-display: swap. Una webfont que bloqueja el renderitzat endarrereix l’element titular com a LCP.

6. Treu la imatge LCP del lazy-loading. Si la teva llibreria d’imatges fa lazy-load de tot, la imatge hero ha de fer opt-out explícit (loading="eager", fetchpriority="high").

Preguntes freqüents

El meu element LCP és text, no una imatge. Què faig?

Ja estàs en bona forma: el text es renderitza ràpid. La solució sol ser sobre recursos que bloquegen el renderitzat: difereix el JS no crític, posa el CSS crític inline, elimina les webfonts que bloquegen el renderitzat.

Per què el meu LCP difereix entre PageSpeed i el meu navegador?

PageSpeed simula una connexió 4G lenta en un dispositiu Android de gamma mitjana. La teva màquina de desenvolupament està en fibra. Confia sempre en les dades de camp (CrUX), no en les teves DevTools locals.

La CDN ajuda amb l’LCP?

Sí, una CDN redueix el temps de round-trip al teu servidor d’origen, cosa que retalla directament el temps per iniciar la descàrrega de la imatge. Cloudflare, Bunny i Fastly són opcions habituals.