First Contentful Paint (FCP): definición, umbrales y soluciones

¿Qué es First Contentful Paint (FCP)?

First Contentful Paint (FCP) mide el tiempo desde que una página empieza a cargar hasta que el navegador renderiza el primer contenido del DOM: texto, una imagen, un canvas o un SVG. Es el primer momento en que un visitante ve que algo ocurre, por lo que es una señal clave de la velocidad de carga percibida.

FCP es una métrica de Lighthouse y de datos de campo (CrUX). No es en sí un Core Web Vital, pero ayuda a diagnosticar el Core Web Vital de carga, Largest Contentful Paint (LCP): un FCP lento casi siempre implica un LCP lento.

Umbrales de FCP

Los datos de campo informan FCP en el percentil 75 de usuarios reales. Una página solo es buena si el 75% de las visitas pinta el primer contenido en 1,8s o menos.

Qué influye en el tiempo de FCP

• Time to First Byte (TTFB). Nada se renderiza hasta que el servidor responde.
• Recursos que bloquean el renderizado. El CSS y el JavaScript síncronos en el head deben descargarse y procesarse antes de pintar.
• Tiempo de carga de recursos. Los bundles de CSS grandes y las fuentes bloqueantes retrasan el primer pintado.
• Renderizado en el cliente. En las SPA el primer pintado espera al bundle de JavaScript.

Cómo mejorar FCP

1. Reduce el TTFB

Usa un CDN, cachea las respuestas y mantén bajos los tiempos de respuesta del origen.

2. Elimina los recursos que bloquean el renderizado

Aplaza el CSS no crítico y añade defer o async a los scripts.

3. Incrusta el CSS crítico en línea

Pon los estilos del primer pliegue en una etiqueta <style> en el head.

4. Haz preconnect a los orígenes necesarios

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

5. Minimiza y comprime

Minimiza el CSS y el JavaScript y sírvelos con Brotli o gzip.

6. Evita el texto bloqueado por fuentes

Usa font-display: swap para que el texto se pinte de inmediato con una fuente de reserva.

Preguntas frecuentes: First Contentful Paint

¿Qué es un buen valor de FCP?

1,8 segundos o menos en el percentil 75. De 1,8s a 3s necesita mejorar, y por encima de 3s es deficiente.

¿Es FCP un Core Web Vital?

No. Los Core Web Vitals son LCP, INP y CLS. FCP es una métrica de carga de apoyo.

¿En qué se diferencia FCP de LCP?

FCP marca el primer contenido de cualquier tamaño, a menudo un logo. LCP marca el elemento más grande, normalmente la imagen principal.

Mide el FCP desde regiones reales con LoadFocus

LoadFocus ejecuta auditorías Lighthouse desde más de 25 regiones y muestra datos de campo de usuarios reales. Regístrate gratis en loadfocus.com/signup.