Entres a la web d'un competidor i, durant un segon, només veus el fons del navegador: ni logo, ni menú, ni titular. Aquell primer instant en blanc condiciona si el visitant espera o abandona. El FCP (First Contentful Paint) mesura quan apareix el primer píxel útil —text, imatge o icona— a la pantalla. El 2026 continua sent un senyal clau en webs d'empresa, sobretot en mòbil i en campanyes de pagament on cada fracció de segon compta.
Aquest article explica què captura el FCP, quins llindars usar com referència, com es relaciona amb el TTFB, l'LCP, el CLS i l'INP, i quins canvis solen avançar la primera impressió visual sense renunciar al disseny de marca.
Què és el FCP i què mesura exactament
El FCP marca el moment en què el navegador pinta per primera vegada contingut del DOM que l'usuari pot veure: un titular, el logotip, un paràgraf del hero o una imatge de capçalera. No inclou el fons del document ni contingut fora del viewport si encara no s'ha renderitzat.
- Comença quan l'usuari sol·licita la URL (després de redireccions).
- Acaba quan qualsevol text, imatge, SVG o canvas visible es mostra a la pantalla.
- No mesura interactivitat (això és INP) ni l'element més gran (això és LCP).
- Depèn de l'HTML, el CSS crític, les fonts i del TTFB: sense HTML, no hi ha primer pintat.
La documentació de web.dev sobre FCP detalla quins elements compten com «contingut» i com encaixa en el desglossament de rendiment de Lighthouse.
Llindars orientatius el 2026
- Bon: 1,8 s o menys.
- A millorar: entre 1,8 s i 3,0 s.
- Dolent: per sobre de 3,0 s.
En CrUX, compara la home, les fitxes de producte i els formularis de contacte per separat. Un FCP acceptable en desktop pot ser dolent en 4G si el hero pesa massa o les fonts bloquegen el text.
FCP davant TTFB, LCP, CLS i INP
Els Core Web Vitals no competeixen entre si: s'encadenen. Un TTFB alt retarda la descàrrega de l'HTML i empenta el FCP endavant. Un FCP lent sol anticipar un LCP dolent si el bloc principal del hero és pesat. El CLS pot empitjorar si avances el FCP sense reservar espai per imatges o fonts.
Prioritza el FCP quan l'usuari percep «pantalla en blanc», quan el menú o el titular triguen després de l'spinner del navegador, o quan campanyes d'anuncis mostren alta taxa de rebot en mòbil tot i un LCP posteriorment acceptable.
Causes habituals en webs d'empresa
- CSS i JavaScript bloquejants al <head> que retarden el primer render.
- Fonts web sense estratègia que amaguen el text del hero.
- Imatges de capçalera sense optimitzar o sense dimensions.
- HTML generat tard per backend lent o APIs síncrones en plantilla.
- Massa recursos a la ruta crítica abans del primer pintat.
- Redireccions en cadena que sumen latència abans de qualsevol contingut.
Formats moderns com WebP i AVIF ajuden l'LCP, però el FCP millora sobretot reduint el que el navegador necessita abans de pintar la primera capa visible.
Com mesurar el FCP
- PageSpeed Insights / Lighthouse: mètrica «First Contentful Paint».
- Chrome DevTools → Performance: marca FCP a la línia de temps.
- Search Console → Experiència de pàgina: tendències per URL.
- WebPageTest: filmstrip amb el fotograma del primer contingut.
Mesura amb throttling mòbil i caché freda a la URL de l'HTML. Repeteix a la plantilla del blog i a la home.
Accions que solen millorar el FCP
CSS crític i ordre de recursos
Inline o prioritza el CSS necessari per la capçalera, el titular i el fons del hero. Retarda estils de mòduls inferiors. Aplica la mateixa disciplina que en la minificació de CSS i JS.
Fonts i text visible
Usa font-display: swap o subconjunts que cobrin el hero. Evita amagar tot el text fins carregar la família completa.
Servidor i caché del document
Retalla el TTFB amb caché de pàgina en rutes públiques. Complementa amb una CDN a prop dels usuaris.
Imatges above the fold
Comprime el logo i el hero, define width/height i evita el lazy loading en el que l'usuari veu primer. Usa preload només per un o dos recursos realment crítics.
Scripts de tercers
No carreguis xat, mapes o analítica abans del primer pintat. Segueix les pautes de scripts de tercers.
Errors que mantenen el FCP alt
- Optimitzar només el vídeo del hero quan el retard està en CSS o fonts.
- Spinners a pantalla completa que retarden la percepció de contingut real.
- Preload de massa fitxers saturant la connexió inicial.
- Ignorar redireccions que consumeu temps abans de l'HTML.
Checklist abans de tancar una millora
- ¿El FCP ha millorat en Lighthouse amb throttling mòbil?
- ¿El filmstrip de WebPageTest mostra text o logo abans?
- ¿LCP i CLS a les mateixes pàgines no han empitjorat?
- ¿La marca segueix coherent després d'inline de CSS crític?
Conclusió
El FCP respon a una pregunta directa: «Quan veu el visitant que la web ha començat a carregar de debò?». En una web d'empresa, avançar aquell moment redueix el rebot, reforça la confiança i prepara un bon LCP i INP. Mesura a les URL que més converteixen, ataca la ruta crítica del primer pantallazo i valida l'impacte amb la resta de mètriques.
Si vols un pla prioritzat de velocitat i Core Web Vitals amb canvis acotats al teu stack, a AATSOFT auditem plantilles, origen i recursos crítics i proposem millores amb impacte mesurable en conversió.
