¿Qué es la primera pintura con contenido? (FCP)? Una guía completa para 2026 - ES

Sus visitantes no esperarán por un sitio lento. La investigación de Google muestra que a medida que el tiempo de carga de la página pasa de 1 a 3 segundos, la probabilidad de rebote aumenta en 32%. First Contentful Paint captura el momento crítico cuando los usuarios ven por primera vez algo más que una pantalla en blanco.

respuesta rapida: Primera pintura con contenido (FCP) es una métrica de rendimiento que mide cuánto tiempo hasta el primer texto, imagen, o SVG aparece en la pantalla. Un buen FCP es 1.8 segundos o menos. Si bien el FCP no es un factor directo de clasificación en Google, Afecta la percepción del usuario y se correlaciona con LCP., lo que impacta las clasificaciones.

Última revisión: febrero 2026. Información verificada con la documentación actual de web.dev.

Lo que realmente mide la primera pintura con contenido

FCP rastrea el tiempo desde el inicio de la navegación hasta el momento en que el navegador muestra el primer contenido visible. Eso podría ser texto, una imagen, un SVG, o un elemento de lienzo que no sea blanco. Los colores de fondo no cuentan. Tampoco lo hacen los hilanderos de carga en blanco.

Piénsalo de esta manera: antes de que FCP dispare, su visitante mira fijamente una pantalla blanca preguntándose si algo está roto. Después del FCP, Saben que la página se está cargando y es más probable que esperen..

Esto es lo que sucede antes de que FCP pueda disparar:

Búsqueda de DNS → Conexión TCP → Protocolo de enlace SSL → Respuesta del servidor (TTFB) → Descargar HTML → Análisis CSS → Primera pintura

Cada paso suma tiempo. Es por eso que el FCP varía entre pruebas de laboratorio y usuarios reales.. Su entorno de prueba evita la complicada realidad de las búsquedas de DNS, redes móviles lentas, y servidores bajo carga.

lo que cuenta como “Contenido” para FCP

• Texto renderizado a partir de HTML o fuentes web
• Imágenes (incluyendo imágenes de fondo CSS)
• Elementos SVG con contenido visual
• Elementos de lienzo que no son blancos (cartas, dibujos)

Lo que no cuenta

• Lienzos blancos o en blanco
• Colores de fondo del marcador de posición
• marcos (miden su propio FCP)
• Elementos de la interfaz de usuario del navegador

Por qué es importante el FCP (Aunque no es un factor de clasificación)

FCP no es uno de los Core Web Vitals de Google. Las señales de clasificación reales son LCP. (Pintura contenta más grande), EN P (Interacción con la siguiente pintura), y CLS (Cambio de diseño acumulativo). Entonces, ¿por qué preocuparse por FCP??

1. FCP es el piso para LCP. LCP nunca puede ser más rápido que FCP. Si su FCP es 3 segundos, tu PCC (la señal de clasificación real) es al menos 3 segundos. La solución de problemas de FCP normalmente también soluciona los problemas de LCP.

2. FCP afecta la velocidad percibida. Los usuarios juzgan su sitio por lo rápido que se siente, no por lo que dicen tus métricas. Una página que muestra contenido en 1 segundo y termina en 3 segundos se sienten más rápidos que uno que no muestra nada hasta 2.5 segundos, incluso si el tiempo total de carga es similar.

3. FCP afecta las tasas de rebote. Esa pantalla blanca en blanco es cuando los usuarios deciden quedarse o irse. Cuanto más dura, Cuantas más personas presionen el botón Atrás antes de que aparezca tu contenido.

4. FCP representa 10% de tu puntuación de Lighthouse. Si bien las puntuaciones de Lighthouse no afectan directamente las clasificaciones, Se utilizan en muchas auditorías e informes de desempeño..

Umbrales de puntuación FCP

Google define tres tramos de rendimiento:

• Bueno: 1.8 segundos o menos
• Necesita mejorar: 1.8 a 3.0 segundos
• Pobre: Mas que 3.0 segundos

Esto es lo que importa: necesitas 75% de cargas de página golpear el “bueno” límite. Una carga rápida en Internet de fibra no compensa cien cargas lentas en el móvil.

Para contexto, el FCP medio en la web es de aproximadamente 2.5 segundos en el móvil según datos de HTTP Archive. Eso significa que la mayoría de los sitios están en el “necesita mejorar” zona. Paliza 1.8 segundos te ponen por delante de la mayoría.

Las puntuaciones de dispositivos móviles y de escritorio difieren enormemente. Los dispositivos móviles tienen procesadores más lentos, y las redes celulares añaden latencia. Un sitio de puntuación “bueno” en el escritorio puede fallar en el móvil. Siempre revisa ambos.

FCP frente a LCP: Cual es la diferencia?

Ambas métricas miden el tiempo de pintura., pero en diferentes momentos:

FCP: Cuando aparece cualquier contenido por primera vez (incluso solo tu texto de navegación).

LCP: Cuando el elemento de contenido más grande termina de cargarse (normalmente tu imagen principal o título principal).

FCP dispara primero. Si el texto del menú de navegación se muestra en 0.8 segundos, eso es FCP. Cuando la imagen de tu héroe termine de cargarse en 2.5 segundos, eso es lcp.

La diferencia de SEO: LCP es un Core Web Vital y afecta las clasificaciones. FCP es una métrica de diagnóstico que no. Pero como comparten muchas causas, mejorar el FCP generalmente mejora el LCP.

Los umbrales actuales de Core Web Vitals:

• LCP: Bueno bajo 2.5 segundos
• EN P: Bueno bajo 200 milisegundos
• CLS: Bueno bajo 0.1

Cómo medir el FCP

Necesitas ambos datos de laboratorio. (pruebas controladas) y datos de campo (usuarios reales). Cuentan diferentes historias.

Herramientas de prueba de laboratorio

Google PageSpeed ​​Insights: Ingrese cualquier URL y obtenga puntajes FCP para datos de laboratorio y de campo. los “Oportunidades” La sección le dice exactamente qué está frenando las cosas.. Gratis, no se necesita configuración.

Faro (DevTools de Chrome): Haga clic derecho en cualquier página, seleccione Inspeccionar, ir a la pestaña Faro. Más control sobre las condiciones de prueba que PageSpeed ​​Insights. Muestra un desglose detallado de lo que bloquea el renderizado..

Prueba de página web: Pruebas avanzadas desde múltiples ubicaciones y velocidades de conexión. Útil para diagnosticar problemas específicos de la ubicación.

Datos de campo (Usuarios reales)

Informe de experiencia del usuario de Chrome (Quid): Datos reales de los usuarios de Chrome que visitan su sitio. Aparece en PageSpeed ​​Insights si tienes suficiente tráfico. Esto es lo que Google realmente utiliza para clasificar las señales.

Biblioteca JavaScript de vitales web: Agregue esto a su sitio para recopilar datos FCP de cada visitante:

importar {en FCP} de 'web-vitals';

en FCP(metric => {
  // Enviar a Google Analytics 4
  etiqueta('evento', 'web_vitals', {
    nombre_métrica: 'FCP',
    valor_métrico: valor.metrico,
    calificación_métrica: calificación.métrica
  });
});

Panel de rendimiento de Chrome DevTools

Para depurar, grabar una carga de página en el panel Rendimiento. Verás FCP marcado en la línea de tiempo con exactamente lo que se representó.. Esto muestra si su FCP es contenido significativo o simplemente un control giratorio de carga..

Victorias rápidas: los 80/20 de optimización FCP

Antes de llegar a la guía de optimización completa, Aquí hay cambios que dan el mayor impacto con el menor esfuerzo.:

1. Habilitar la compresión de texto. Si su servidor no envía respuestas comprimidas Gzip o Brotli, permitirle. Suele ser un único cambio en la configuración del servidor que puede reducir el tamaño de las transferencias en 70%+.

2. Agregar visualización de fuente: cambia a tus fuentes. Esta propiedad CSS evita el texto invisible mientras se cargan las fuentes. Los usuarios ven las fuentes del sistema inmediatamente, luego tus fuentes personalizadas se intercambian.

3. Aplazar JavaScript no crítico. Añadir defer a cualquier etiqueta de script que no necesite ejecutarse inmediatamente. Esto evita que JavaScript bloquee la primera pintura..

4. Comprueba tu alojamiento. Si tu TTFB (Tiempo hasta el primer byte) es más de 600 ms consistentemente, ninguna optimización del front-end le permitirá conseguir un buen FCP. Su servidor necesita responder más rápido. Considerar Alojamiento VPS si estás en alojamiento compartido, o agregar una CDN.

5. Ejecute PageSpeed ​​Insights y solucione el primero “Oportunidad.” Google te dice exactamente qué está bloqueando tu pintura. Comience con lo que tenga los mayores ahorros estimados..

Guía de optimización completa

FCP depende de una cadena: DNS → Conexión → Respuesta del servidor → Descarga HTML → Análisis CSS → Pintura. Aquí se explica cómo acelerar cada parte..

Reduzca el tiempo de respuesta del servidor (TTFB)

El tiempo hasta el primer byte suele ser el mayor factor que contribuye al FCP. Si su servidor toma 2 segundos para responder, su FCP no puede estar por debajo 2 segundos.

• Utilice una CDN (Red de entrega de contenidos) para servir desde ubicaciones más cercanas a los usuarios
• Habilite el almacenamiento en caché del lado del servidor para consultas de bases de datos y HTML
• Reducir las redirecciones (cada uno suma un viaje completo de ida y vuelta)
• Actualice el alojamiento si su proveedor no puede ofrecer TTFB por debajo de 200 ms

Si estás en alojamiento compartido con TTFB lento, la solución más barata es a menudo alojamiento en la nube con CDN incorporado.

Elimina los recursos que bloquean el renderizado

CSS y JavaScript en el encabezado del documento bloquean la representación hasta que se descargan y ejecutan.

• CSS crítico en línea (estilos para contenido en la mitad superior de la página) directamente en HTML
• Cargar CSS no crítico de forma asincrónica
• Añadir async o defer a JavaScript no esencial
• Mueva JavaScript al final de su HTML cuando sea posible

Optimizar la entrega de CSS

El navegador debe descargar y analizar todo el CSS antes de pintar el contenido al que el CSS podría afectar..

• Minificar CSS (eliminar espacios en blanco y comentarios)
• Elimine CSS no utilizado con herramientas como PurgeCSS
• Evite CSS @import (cada uno suma un viaje de ida y vuelta a la red)
• Divida CSS por tipo de medio usando atributos de medios

Optimizar fuentes web

Las fuentes personalizadas pueden bloquear la representación del texto por completo hasta que se descarguen.

• Usar font-display: swap en las reglas de @font-face
• Precargar fuentes críticas: <link rel="preload" href="font.woff2" as="font" crossorigin>
• Limitar las variantes de fuente (cada peso es un archivo separado)
• Considere las fuentes del sistema para el cuerpo del texto

Comprimir y minimizar todo

• Habilite la compresión Gzip o Brotli en su servidor
• Minify HTML, CSS, y JavaScript
• Optimizar imágenes (WebP o AVIF, dimensiones apropiadas)

Utilice sugerencias de recursos

Preconectar a dominios de terceros necesitarás:

<enlace rel ="preconectar" href ="https://fonts.googleapis.com">

Precarga recursos críticos:

<enlace rel ="precargar" href ="crítico.css" como ="estilo">

Usar con moderación. La conexión previa a demasiados dominios desperdicia recursos.

Simplifica tu DOM

Grande, HTML profundamente anidado tarda más en analizarse. Mantenga su estructura plana, Evite divs de envoltura excesivos, y carga diferida de contenido en la mitad inferior de la página.

Solución de problemas comunes de FCP

FCP varía entre pruebas

Las condiciones de la red y los tiempos de respuesta del servidor fluctúan. Ejecute varias pruebas y utilice la mediana. Para datos de campo, comprobar si segmentos específicos (usuarios móviles, ciertas regiones) mostrar peores puntuaciones.

Buenos puntajes de laboratorio, Datos de campo deficientes

Las pruebas de laboratorio se realizan en condiciones ideales.. Los usuarios reales tienen conexiones lentas, telefonos viejos, y redes congestionadas. Confíe en los datos de campo sobre los datos de laboratorio. Prueba con la aceleración habilitada en DevTools.

FCP mejoró pero LCP siguió siendo malo

Tu primer contenido puede ser menor (texto de navegación, logo) mientras que tu contenido principal (imagen de héroe) todavía es lento. Compruebe qué se está procesando realmente en el momento FCP. Enfoque la optimización en su contenido principal.

Scripts de terceros que bloquean Paint

Analítica, widgets de chat, y los guiones publicitarios a menudo bloquean la renderización. Auditarlos. Aplazar o eliminar cualquier cosa que no sea esencial. Considere cargar algunos scripts solo después de la interacción del usuario..

Preguntas frecuentes

¿Es FCP un factor de clasificación de Google??

No, FCP no afecta directamente las clasificaciones. Los Core Web Vitals que impactan el SEO son LCP, EN P, y CLS. sin embargo, Los problemas de FCP generalmente también significan problemas de LCP, ya que comparten causas.. Arreglar FCP a menudo mejora tus señales de clasificación reales.

¿Qué causa un FCP alto??

Las causas más comunes son la respuesta lenta del servidor. (TTFB), CSS y JavaScript que bloquean el procesamiento, fuentes no optimizadas, y grandes recursos sin comprimir. Ejecute PageSpeed ​​Insights para ver exactamente qué está bloqueando su sitio.

¿Qué es una buena puntuación FCP para dispositivos móviles??

Mismo umbral: debajo 1.8 segundos es bueno, 1.8 a 3 segundos necesita mejorar, terminado 3 segundos es pobre. Los dispositivos móviles generalmente obtienen peores puntajes que los de escritorio debido a la latencia de la red y la potencia de procesamiento del dispositivo.. Verifique el móvil por separado en PageSpeed ​​Insights.

¿Cómo encuentro qué está bloqueando FCP??

Utilice PageSpeed ​​Insights y observe el “Oportunidades” sección. Para un análisis más profundo, El panel de rendimiento de Chrome DevTools muestra una línea de tiempo de exactamente lo que sucede antes de que se active FCP. Lighthouse también señala recursos específicos que bloquean el procesamiento.

¿El alojamiento afecta al FCP??

si. Su hosting determina TTFB, que suele ser la mayor parte del tiempo del FCP. La respuesta lenta del servidor significa un FCP lento, período. servicios CDN puede ayudar ofreciendo contenido desde ubicaciones más cercanas a sus usuarios.

¿Debo centrarme en FCP o LCP??

Concéntrate en LCP si solo puedes elegir uno, ya que es la señal de clasificación real.. Pero la mayoría de las optimizaciones mejoran ambas métricas.. Si su FCP es bueno pero su LCP es malo, el problema es tu contenido principal (Imágenes de heroe grande, secciones de carga lenta) no renderizado inicial.

¿Cómo se relaciona FCP con Core Web Vitals??

FCP es una métrica de diagnóstico, no es un núcleo web vital. Ayuda a identificar problemas pero no influye en los cálculos de clasificación de Google.. Los tres Core Web Vitals son LCP (cargando), EN P (interactividad), y CLS (estabilidad visual).

Qué hacer a continuación

Comience con la medición. Ejecute su sitio a través de PageSpeed ​​Insights ahora mismo y anote su puntuación FCP tanto para dispositivos móviles como para computadoras de escritorio.. Mira el “Oportunidades” sección para recomendaciones específicas.

Si tu TTFB es alto (más de 500 ms), alojamiento de dirección primero. Ninguna optimización del front-end ayuda si su servidor es lento. Compara opciones en nuestro guía de alojamiento SSD o considerar alojamiento en la nube con CDN integrado.

Si TTFB está bien pero FCP sigue siendo lento, trabajar a través de las victorias rápidas: habilitar la compresión, agregar visualización de fuente: intercambiar, diferir JavaScript no crítico. Estos cambios por sí solos a menudo reducen el FCP en 30-50%.

Para un seguimiento continuo, agregue la biblioteca web-vitals para rastrear el FCP del usuario real a lo largo del tiempo. Los datos de campo le indican cómo los visitantes reales experimentan su sitio., no solo cómo se desempeña en pruebas controladas.