Si la teva web triga a mostrar la imatge principal, el titular o el bloc hero, el visitant percep lentitud abans de llegir una sola línia. LCP (Largest Contentful Paint) mesura exactament aquest moment: quan apareix l'element visual més gran de la pantalla. En una web d'empresa —inici, landing de servei o fitxa de producte— un LCP alt sol traduir-se en menys confiança i més abandonaments.
Aquest article explica què mesura el LCP, com es relaciona amb l'INP i el CLS, quins llindars vigilar el 2026 i quins canvis solen millorar la pintura del contingut principal sense renunciar al disseny.
Què és el LCP i quins elements compta
El LCP registra el temps fins que el navegador pinta l'element de contingut visible més gran dins del viewport. Sovint és:
- Una imatge o vídeo de capçalera.
- Un bloc de text gran (titular H1 o paràgraf destacat).
- Un fons carregat mitjançant CSS amb imatge.
No mesura tot el document: només l'element dominant a la primera pantalla. La guia de web.dev sobre LCP detalla quins elements entren en el càlcul i quan deixa d'actualitzar-se la mètrica.
Llindars: quan la teva web està en zona verda
Com referència de Core Web Vitals, molts equips utilitzen:
- Bon: 2,5 segons o menys.
- A millorar: entre 2,5 i 4 segons.
- Dolent: per sobre de 4 segons.
Avalua el percentil 75 d'usuaris reals (CrUX, Search Console o Analytics amb Web Vitals). Una prova puntual a PageSpeed ajuda a depurar, però no substitueix dades de camp si el trànsit és estable.
LCP davant INP i CLS
Els Core Web Vitals cobren tres fronts: LCP (càrrega percebuda), CLS (estabilitat visual) i INP (resposta a interaccions). Optimitzar només un deixa buits: una home pot pintar ràpid el hero i tot i així frustrar en obrir el menú mòbil.
Prioritza el LCP quan la queixa és «triga a carregar la pàgina» o quan l'informe assenyala la imatge principal com element LCP al mòbil.
Causes habituals en webs d'empresa
- Imatges hero massa pesades sense compressió ni formats moderns.
- Temps de resposta del servidor (TTFB) alt en hosting compartit o sense memòria cau.
- CSS o fonts que bloquegen el render abans de pintar el titular.
- JavaScript que retarda la càrrega de la imatge principal (lazy mal aplicat al hero).
- CDN o memòria cau mal configurats a la primera visita.
Els formats WebP i AVIF i un CDN ben triat solen reduir el pes de l'element LCP sense canviar el disseny.
Com mesurar el LCP amb eines accessibles
- PageSpeed Insights: identifica l'element LCP en laboratori i suggereix millores.
- Chrome DevTools → Performance: línia de temps amb marca LCP.
- Search Console (Experiència de pàgina): tendència per URL en dades reals.
- Extensions o RUM: útils per comparar abans i després en rutes crítiques (inici, contacte, producte estrella).
Define una URL crítica per objectiu de negoci i mesura al mòbil amb xarxa limitada: allà sol empitjorar el LCP encara que en escriptori sembli correcte.
Accions que solen millorar el LCP
Optimitzar la imatge o el bloc hero
Serveix el hero en la mida real de pantalla, no en 4000 px d'ample. Fes servir fetchpriority="high" a la imatge LCP, evita loading="lazy" en aquest recurs i aplica compressió. L'optimització d'imatges és el primer pas amb més retorn.
Reduir TTFB i fer servir memòria cau
Un HTML lent retarda tot el demés. Revisa hosting, memòria cau de pàgina, capçaleres de memòria cau i compressió Brotli/Gzip.
Avançar recursos crítics
Preload de la imatge LCP, preconnect a l'origen de fonts o CDN, i reduir CSS bloquejant a la part superior. La minificació ajuda, però eliminar CSS no usat a la home sol impactar més.
Controlar scripts de tercers
Etiquetes de màrqueting i widgets al <head> competeixen amb el hero. Retarda el no essencial amb la mateixa disciplina que en scripts de tercers.
Errors que empitjoren el LCP sense que ho notis
- Aplicar lazy loading a la imatge above the fold.
- Carregar un slider amb tres imatges quan només una és visible.
- Fer servir vídeo de fons sense pòster lleuger.
- Dependre d'una font web externa sense
font-display: swap.
Checklist abans de donar per tancada una millora
- L'element LCP al mòbil és el que esperes (hero i no un logotip petit)?
- Has comparat el percentil 75 a CrUX o Search Console després de dues setmanes?
- La home segueix complint CLS i INP en les mateixes rutes?
- Has provat en 4G simulat i en un dispositiu de gamma mitjana?
Conclusió
El LCP respon a una pregunta directa: «Quan veig el que importa d'aquesta pàgina?». El 2026, amb més trànsit mòbil i heroes visuals en webs corporatives, ignorar-lo és regalar segons de dubte a qui ja ha arribat des de Google o un anunci. Mesura en les teves URLs crítiques, optimitza el recurs que define el LCP i alinea servidor, memòria cau i imatges amb el mateix rigor que dediques al copy del hero.
Si vols prioritzar millores de Core Web Vitals amb impacte mesurable en conversió, a AATSOFT auditem inici i landings clau i proposem canvis acotats al teu stack actual.
