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

¿Qué es First Contentful Paint (FCP)?

First Contentful Paint (FCP) es el tiempo desde que empieza la navegación hasta que el navegador pinta por primera vez algún contenido de la página: texto, una imagen (también de fondo), un SVG o un canvas que no sea blanco. Es la primera señal para el visitante de que la página está cargando, y por eso es un buen indicador de la velocidad de carga percibida.

FCP no es uno de los Core Web Vitals, que son LCP, INP y CLS. web.dev lo incluye entre las métricas de apoyo, útiles para diagnosticar un Largest Contentful Paint lento: el elemento más grande no puede pintarse antes que el primer contenido.

Umbrales de FCP

web.dev recomienda evaluar el percentil 75 de las cargas de página, por separado en móvil y en escritorio. Una página es "buena" cuando al menos el 75 % de las visitas pintan su primer contenido en 1,8 segundos o menos.

Ejemplo

Una página de producto está hecha como aplicación de una sola página. El servidor responde rápido, pero el HTML es un contenedor vacío, así que el visitante ve una pantalla en blanco hasta que se descarga y ejecuta un paquete grande de JavaScript. FCP espera a todo eso. Si se renderiza la estructura de la página en el servidor, o se incrusta el CSS crítico y se difiere el paquete, el primer texto aparece mucho antes de que termine el paquete.

Qué influye en el FCP

• Respuesta del servidor. No se pinta nada antes del primer byte, así que un TTFB lento y las redirecciones marcan un suelo para el FCP.
• Recursos que bloquean el renderizado. El CSS y el JavaScript síncrono del head deben cargarse antes de que el navegador pinte.
• Renderizado pesado en el cliente. El primer contenido espera a que el JavaScript se descargue, analice y ejecute.
• Fuentes web que ocultan el texto. El texto es invisible hasta que llega la fuente.
• Cargas grandes y cadenas largas de peticiones. La falta de preconnect, una caché débil y muchas peticiones suman retraso.

Cómo medir el FCP

En campo, la Performance API expone el FCP como una entrada de pintado:

new PerformanceObserver((list) => {
  for (const entry of list.getEntriesByName('first-contentful-paint')) {
    console.log('FCP:', entry.startTime);
  }
}).observe({ type: 'paint', buffered: true });

En laboratorio lo informan Lighthouse y el panel Performance de Chrome DevTools. Para datos de campo, PageSpeed Insights muestra los valores del Chrome UX Report, o puede recogerlos usted con la biblioteca web-vitals. Los valores de laboratorio y de campo suelen diferir, porque las pruebas de laboratorio usan un dispositivo y una red fijos.

Cómo mejorar el FCP

1. Reducir el tiempo de respuesta del servidor con caché y CDN, y eliminar redirecciones.
2. Diferir el CSS no crítico y añadir defer o async a los scripts que no hacen falta para el primer pintado.
3. Incrustar el CSS crítico de la parte visible.
4. Hacer preconnect a los orígenes que se necesitan pronto, como se muestra abajo.
5. Minificar y comprimir CSS y JavaScript.
6. Usar font-display: swap para que el texto se vea con una fuente alternativa mientras carga la fuente web.

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

Errores comunes

• Tratar el FCP como la meta. Un logo pequeño se pinta pronto mientras la imagen principal tarda segundos. Compruebe también el LCP.
• Probar solo en un escritorio rápido. Evalúe móvil y escritorio por separado, como recomienda web.dev.
• Comparar directamente laboratorio y campo. Una buena nota en Lighthouse no garantiza buenos datos de campo.
• Ignorar lo que ocurre antes del renderizado. Redirecciones, establecimiento de conexión y TTFB cuentan para el FCP.

Preguntas frecuentes: First Contentful Paint

¿Qué es un buen valor de FCP?

1,8 segundos o menos en el percentil 75 de las cargas de página. Entre 1,8 y 3,0 segundos necesita mejorar, y por encima de 3,0 segundos es malo.

¿FCP es un Core Web Vital?

No. Los Core Web Vitals son LCP, INP y CLS. FCP es una métrica de apoyo que ayuda a diagnosticar cargas lentas.

¿En qué se diferencia FCP de LCP?

FCP marca el primer contenido de cualquier tamaño, a menudo texto o un logo. LCP marca cuándo se ha renderizado el elemento visible más grande, a menudo una imagen principal o un titular.

¿Por qué mi FCP es lento?

Las causas habituales son una respuesta lenta del servidor, redirecciones, CSS o JavaScript que bloquean el renderizado, renderizado en el cliente y fuentes web que ocultan el texto. PageSpeed Insights o un informe de Lighthouse muestra cuál pesa más.

¿Puede el FCP ser rápido y la página sentirse lenta?

Sí. FCP solo dice que algo apareció. Un LCP lento, retraso en la entrada o saltos de diseño pueden hacer que la página siga pareciendo lenta, por eso se lee junto a los Core Web Vitals.

Siga el FCP en el tiempo con LoadFocus

Use el verificador gratuito de Core Web Vitals para una lectura rápida, o la monitorización de velocidad de página para seguir sus páginas con Lighthouse desde varias ubicaciones en la nube y recibir alertas cuando se vuelvan lentas. La guía para monitorizar los Core Web Vitals con alertas e informes muestra la configuración. Regístrese gratis para empezar.