First Contentful Paint (FCP)

First Contentful Paint (FCP) es una métrica que mide el tiempo desde que comienza a cargarse una página hasta que el navegador pinta el primer fragmento de contenido en la página.

Métrica FCP: la primera visualización de contenido en la página.

Se trata de una métrica de primer renderizado, situándose entre el tiempo del backend (métrica TTFB) y el tiempo de carga del elemento más grande (métrica LCP). A diferencia de estas métricas, FCP no forma parte de los Core Web Vitals.

En el contexto de la métrica FCP, "contenido" se refiere a texto, imágenes (incluidas las imágenes de fondo mediante CSS), elementos <svg> o elementos <canvas> que no sean blancos.

¿Por qué es importante el FCP?#

Medir el FCP es crucial, ya que la primera visualización de contenido en la página afecta la percepción inicial del usuario sobre la rapidez del sitio web.

Un FCP rápido indica que el sitio web está operativo y pronto comenzará a mostrar el contenido esperado, lo que aumenta la satisfacción del usuario y puede influir positivamente en el SEO.

¿Cuáles son los valores ideales de FCP?#

El valor ideal de FCP es inferior a 1,8 segundos.

Recomendamos mantener el valor de FCP lo más bajo posible, idealmente por debajo de 1,8 segundos en todos los tipos de páginas tanto para dispositivos móviles como de escritorio. Este valor también es recomendado por Google.

¿Cómo puedes medir el FCP?#

Existen varias formas de obtener la métrica FCP para tu sitio web o una página específica.

Extensión de Chrome «Web Vitals»#

Con la extensión directamente en el navegador, puedes obtener el valor de FCP para las páginas individuales de tu sitio web. En la consola, puedes encontrar más información sobre qué partes del FCP deben ser el foco de una posible optimización. En gran medida, el FCP está influenciado por la velocidad del backend (métrica TTFB).

La extensión Web Vitals devuelve al navegador información detallada.

Lee más sobre medir la velocidad directamente en el navegador.

Datos de los usuarios de Google (CrUX)#

Con nuestra prueba de velocidad web o la herramienta PageSpeed Insights, puedes obtener el valor de la métrica FCP para cada URL individual o obtener datos para todo el dominio.

Monitorización PageSpeed.ONE#

En monitorización PLUS, mostramos no solo el valor actual de FCP para URL individuales o el dominio completo, sino que también podemos representar gráficamente cómo ha cambiado la métrica a lo largo del tiempo.

Métrica FCP en pagespeed.one.

Tenemos datos tanto de usuarios (CrUX) como de mediciones sintéticas (synth). (Ver los diferentes tipos de medición de velocidad web.)

Con el Supervisor, mostramos el desarrollo continuo diario del valor sintético de FCP, así como otras métricas, y enviamos notificaciones.

¿Cómo optimizar el FCP?#

La optimización de la métrica FCP implica varios pasos clave. Siempre es esencial partir de los datos de las herramientas de medición. Veamos algunas de las oportunidades habituales para mejorar el FCP.

Reduce el tiempo de respuesta del servidor#

Optimiza el backend (métrica TTFB) para una descarga y procesamiento más rápidos del documento HTML. Cuanto más rápido pueda el navegador procesar el documento HTML, antes comenzará a descargar y procesar los recursos críticos para la primera visualización de contenido en la página.

Minimiza los recursos que bloquean el renderizado#

Reduce el número y el tamaño total de los archivos CSS, fuentes web y archivos JavaScript que son necesarios para el renderizado del primer contenido.

Divide el CSS en partes más pequeñas. En la página, carga idealmente solo los estilos CSS que sean necesarios.

Si el renderizado del primer contenido del sitio web no depende de JavaScript (en frameworks como Nuxt.js, Vue.js, React, Next.js, etc.), procesa todos los archivos JavaScript de forma asíncrona.

Usa la menor cantidad posible de estilos y tipos de fuentes web. Aplica la propiedad CSS font-display:swap para mostrar fuentes alternativas antes de cargar las principales.

Utiliza el renderizado del lado del servidor (SSR)#

Si tu sitio web utiliza alguno de los frameworks de JavaScript, siempre intenta tener el primer contenido ya en el documento HTML base. No tendrás que esperar a la descarga y procesamiento de JavaScript.

Usa carga diferida para posponer la descarga de recursos no críticos#

Pospón la descarga de imágenes o archivos JavaScript para elementos que no son visibles en el primer viewport. Para imágenes, utiliza lazyloading.

Para una comprensión más profunda de estas técnicas de optimización, recomendamos explorar las herramientas y guías disponibles, como las que se encuentran en web.dev, que proporcionan consejos y procedimientos específicos para mejorar la métrica FCP.