Qué es FCP: definición y guía completa SEO
FCP (First Contentful Paint): Métrica de rendimiento web que mide el tiempo desde que el usuario navega a una página hasta que el navegador renderiza el primer elemento de contenido: texto, imagen, SVG o canvas no-blanco. Es la primera señal visual de que la página está respondiendo y forma parte de las métricas de laboratorio de Lighthouse.
Qué mide exactamente el FCP y por qué importa
El FCP marca el momento en que el usuario ve por primera vez que algo está ocurriendo en la página: el primer contenido visible, sea una línea de texto, un logo o una imagen parcial. Es diferente del LCP (que mide el elemento más grande) y del TTFB (que mide el tiempo del servidor). Los umbrales de Google: bueno ≤ 1.8s, necesita mejoras entre 1.8-3s, lento > 3s. Un FCP lento hace que el usuario perciba la página como no responsiva durante esos primeros segundos, lo que aumenta la tasa de abandono antes de que el contenido principal cargue.
Factores que ralentizan el FCP
El render-blocking resources es la causa más frecuente: hojas de estilo CSS y scripts JavaScript en el head del HTML que bloquean el renderizado hasta que el navegador los descarga y procesa. Las fuentes web que se cargan antes de mostrar texto (font-display: block) retrasan el FCP hasta que la fuente está disponible. Un TTFB alto (servidor lento) impacta directamente en el FCP porque el navegador no puede empezar a renderizar hasta recibir el HTML. Finalmente, un HTML inicial muy pesado (páginas con mucho markup o scripts inline extensos) también retrasa el primer paint.
Técnicas para mejorar el FCP por orden de impacto
Eliminar o aplazar los recursos que bloquean el renderizado es la palanca de mayor impacto: mover CSS no crítico a la carga diferida y añadir async o defer a los scripts JS del head. El inline de CSS crítico (above-the-fold CSS) en el head permite al navegador renderizar el contenido visible sin esperar a la hoja de estilos completa. Mejorar el TTFB (con caché de página, CDN y optimización del servidor) reduce el tiempo hasta el primer byte del HTML. Usar font-display: optional o font-display: optional evita que las fuentes bloqueen el FCP. La compresión Gzip o Brotli del HTML, CSS y JS reduce su tamaño y acelera su descarga.
FCP vs LCP: diferencias y cuál priorizar para SEO
El FCP y el LCP son métricas relacionadas pero distintas: el FCP es el primero en ocurrir (primer contenido visible) y el LCP es el más relevante para el usuario (el elemento principal de la página). Para Core Web Vitals y el ranking de Google, el LCP es el que cuenta (es una de las tres métricas oficiales), mientras que el FCP es una métrica de laboratorio que no forma parte directamente del ranking. Sin embargo, mejorar el FCP generalmente mejora también el LCP, ya que ambos comparten muchas causas raíz. Priorizar LCP es lo correcto para SEO, pero optimizar el FCP es un paso necesario en ese camino.
Preguntas frecuentes
¿El FCP forma parte de los Core Web Vitals?
No. Los Core Web Vitals oficiales son LCP, INP y CLS. El FCP es una métrica de Lighthouse y de diagnóstico de rendimiento importante, pero Google no la usa directamente como factor de ranking. Dicho esto, un FCP lento suele correlacionar con un LCP lento, así que mejorar el FCP tiene un impacto indirecto en los Core Web Vitals.
¿El FCP se mide en todos los dispositivos por igual?
No. El FCP en móvil es significativamente peor que en escritorio para la mayoría de sitios: la menor potencia de procesamiento y las conexiones más lentas (4G vs fibra) retrasan el renderizado. Lighthouse simula un dispositivo móvil de gama media con conexión 4G lenta por defecto, lo que explica por qué las puntuaciones de móvil en PageSpeed Insights suelen ser mucho peores que las de escritorio.