Aprender
First Contentful Paint: qué significa FCP y cómo mejorarlo
FCP mide cuándo el usuario ve el primer contenido real. Esta guía explica qué lo ralentiza y qué mejoras hacen que la página se vea antes.
Ejecuta una auditoría nueva en DomainLens y usa el informe como lista de prioridades.
Qué mide FCP
First Contentful Paint (FCP) marca el momento en que el navegador renderiza el primer contenido real de la página: texto, imagen, SVG o canvas. No es la carga completa ni el elemento hero principal, pero muestra cuánto tiempo mira el usuario una pantalla en blanco.
Un FCP rápido da confianza en que la página funciona. Un FCP lento hace que el sitio parezca roto aunque luego cargue todo. Por eso pertenece a una auditoría de rendimiento, aunque los Core Web Vitals se centren más en LCP, INP y CLS.
Qué suele ralentizar FCP
- Respuesta lenta del servidor antes de que el navegador reciba el primer HTML.
- CSS que bloquea el renderizado y debe descargarse y analizarse antes de mostrar algo.
- JavaScript síncrono en el head que bloquea el parsing.
- Fuentes web que retrasan el texto visible o lo dejan invisible mientras cargan.
- HTML pesado, tag managers o scripts de terceros cargados antes del contenido crítico.
Cómo mejorar FCP
Empieza por el inicio de la petición. Mejora TTFB con caché, un origen más rápido, menos consultas de base de datos y CDN para assets estáticos. El navegador no puede pintar contenido que aún no recibió.
Después reduce el trabajo que bloquea el renderizado. Inserta el CSS crítico mínimo, carga el resto de forma asíncrona cuando sea seguro, difiere JavaScript no crítico y simplifica el HTML above the fold. Para fuentes, precarga la fuente principal y usa font-display: swap.
Errores que evitar
- Optimizar solo imágenes mientras CSS y JavaScript siguen bloqueando el primer pintado.
- Cargar analytics, chat y anuncios antes de renderizar la página.
- Usar fuentes personalizadas sin preload ni fallback visible.
- Medir solo desktop, donde un primer pintado lento se oculta más fácil.
- Confundir FCP con LCP y arreglar la imagen hero mientras sigue el retraso de pantalla en blanco.
Cómo validar la mejora
Ejecuta Lighthouse o PageSpeed Insights antes y después del cambio y compara FCP, TTFB, recursos que bloquean renderizado y trabajo del main thread. Una mejora real de FCP hace aparecer antes el primer texto o estructura visible, no solo sube la puntuación.
Tras desplegar, vuelve a ejecutar DomainLens y revisa primero móvil. Si hay datos de campo, confirma que usuarios en dispositivos y redes más lentas también ven un render inicial más rápido.