Load your… Qué es FCP [First Contentful Paint]

¿Qué es FCP?

La métrica «First Contentful Paint» (FCP) mide el tiempo que transcurre desde que la página comienza a cargarse hasta que cualquier parte del contenido de la página se representa en la pantalla. Para esta métrica, el «contenido» se refiere al texto, las imágenes (incluidas las imágenes que están en segundo plano), los elementos <svg> o los elementos <canvas> que no están en blanco.

En la carga anterior de la línea de tiempo, FCP ocurre en el segundo marco, ya que es cuando los primeros elementos de texto e imagen se renderizan en la pantalla.

Notará que, aunque se ha renderizado parte del contenido, no se ha renderizado todo. Esta es una distinción importante que se debe hacer entre First Contentful Paint (FCP) y Largest Contentful Paint (LCP), cuyo objetivo es medir cuándo se terminó de cargar el contenido principal de la página.

¿Qué es una buena puntuación FCP?

Para brindar una buena experiencia de usuario, los sitios deberían esforzarse por tener una First Contentful Paint de 1.8 segundos o menos. Para asegurarse de que está alcanzando este objetivo para la mayoría de sus usuarios, un buen umbral para medir es el percentil 75 de cargas de páginas, segmentado en dispositivos móviles y equipos de escritorio.

Cómo medir FCP

FCP se puede medir en el laboratorio o en el campo y está disponible en las siguientes herramientas:

Herramientas de campo #

• PageSpeed Insights
• Chrome User Experience Report
• Search Console (informe de velocidad)
• Biblioteca de JavaScript web-vitals

Herramientas de laboratorio 

• Lighthouse
• Chrome DevTools
• PageSpeed Insights

Medir FCP en JavaScript

Para medir FCP en JavaScript, puede utilizar la API de Paint Timing. En el siguiente ejemplo se muestra cómo crear un PerformanceObserver que capta una entrada de paint con el nombre first-contentful-paint y la registra en la consola.

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

Advertencia

En este código se muestra cómo registrar la entrada first-contentful-paint en la consola, pero medir FCP en JavaScript es más complicado. Vea a continuación los detalles:

En el ejemplo anterior, la entrada registrada first-contentful-paint le indicará cuándo se desplegó el primer elemento de contenido. Sin embargo, en algunos casos esta entrada no es válida para medir FCP.

En la siguiente sección se enumeran las diferencias entre lo que reporta la API y cómo se calcula la métrica.

Diferencias entre la métrica y la API

• La API enviará una entrada first-contentful-paint para las páginas cargadas en una pestaña de segundo plano, pero esas páginas deben ser ignoradas cuando se calcule el FCP (los tiempos del primer despliegue solo deben considerarse si la página estuvo en primer plano todo el tiempo).
• La API no reporta first-contentful-paint cuando la página se restaura desde la caché de retroceso/avance, pero LCP debe medirse en estos casos, ya que los usuarios las experimentan como visitas de página distintas.
• Es posible que la API no reporte los tiempos de despliegue de los iframes de origen cruzado, pero para medir correctamente el FCP, debe considerar todos los marcos. Los sub-marcos pueden usar la API para reportar sus tiempos de despliegue al marco principal para su incorporación.

En vez de memorizar todas estas diferencias sutiles, los desarrolladores pueden utilizar la Biblioteca de JavaScript web-vitals para medir FCP, que maneja estas diferencias por usted (cuando sea posible):

import {getFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
getFCP(console.log);

Puede consultar el código fuente de getFCP() para obtener un ejemplo completo de cómo medir FCP en JavaScript.

En algunos casos (como los iframes de origen cruzado) no es posible medir LCP en JavaScript. Consulte la sección de limitaciones web-vitals para obtener más información.

Cómo mejorar FCP

Para aprender a mejorar FCP para un sitio específico, puede ejecutar una auditoría de desempeño Lighthouse y prestar atención a cualquier oportunidad específica que sugiera la auditoría.

Para saber cómo mejorar la FCP en general (para cualquier sitio), consulte las siguientes normas de rendimiento:

• Eliminar los recursos que bloquean el renderizado
• Minificar CSS
• Eliminar CSS no utilizado
• Preconectar a los orígenes requeridos
• Reducir los tiempos de respuesta del servidor (TTFB)
• Evitar los redireccionamientos de varias páginas
• Precargar solicitudes clave
• Evitar cargas útiles de red enormes
• Publicar activos estáticos con una política de caché eficiente
• Evitar un tamaño de DOM excesivo
• Minimizar la profundidad de la solicitud crítica
• Asegurarse de que el texto permanezca visible durante la carga de la fuente web
• Mantener la cantidad de solicitudes bajas y los tamaños de transferencia reducidos