First Contentful Paint (FCP)

Philip Walton

¿Qué es FCP?

El primer procesamiento de imagen con contenido (FCP) mide el tiempo que transcurre desde que el usuario navega a una página por primera vez hasta que se renderiza en la pantalla cualquier parte del contenido de la página. Para esta métrica, "contenido" hace referencia al texto, las imágenes (incluidas las de fondo), los elementos <svg> o los elementos <canvas> que no son blancos.

En el cronograma de carga que se muestra en la imagen anterior, el FCP ocurre en el segundo fotograma, ya que es entonces cuando se renderizan en la pantalla los primeros elementos de imagen y texto.

Notarás que, aunque parte del contenido se renderizó, no todo el contenido. Esta es una distinción importante que se debe hacer entre el primer procesamiento de imagen con contenido y el Procesamiento de imagen con contenido más grande (LCP). Su objetivo es medir cuándo terminó de cargarse el contenido principal de la página.

¿Qué es una buena puntuación FCP?

Para proporcionar una buena experiencia del usuario, los sitios deben esforzarse por tener un primer procesamiento de imagen con contenido de 1.8 segundos o menos. Para asegurarte de alcanzar este objetivo para la mayoría de los usuarios, un buen umbral para medir es el percentil 75 de las cargas de páginas, segmentadas en dispositivos móviles y computadoras de escritorio.

Cómo medir el FCP

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

Herramientas de campo

• PageSpeed Insights
• Experiencia del usuario en Chrome Informe
• Search Console (Velocidad informe)
• Biblioteca JavaScript web-vitals

Herramientas del lab

• Faro
• Herramientas para desarrolladores de Chrome
• PageSpeed Insights

Cómo medir el FCP en JavaScript

Para medir el FCP en JavaScript, puedes usar la API de Paint Timing. En el siguiente ejemplo, se muestra cómo crear un PerformanceObserver que escuche una entrada paint con el nombre first-contentful-paint y la registre 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});

En el fragmento de código anterior, la entrada first-contentful-paint registrada te indicará cuándo se pintó el primer elemento con contenido. Sin embargo, en algunos casos, esta entrada no es válida para medir el FCP.

En la siguiente sección, se indican las diferencias entre lo que informa 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 en segundo plano, pero esas páginas se deben ignorar cuando se calcula la FCP (los tiempos de la primera pintura solo se deben considerar si la página estuvo en primer plano todo el tiempo).
• La API no informa las entradas de first-contentful-paint cuando la página se restablece desde la memoria caché atrás/adelante, pero el FCP se debe medir en estos casos, ya que los usuarios las experimentan como visitas distintas a la página.
• Es posible que la API no informe los tiempos de procesamiento de iframes de origen cruzado, pero para medir correctamente el FCP, debes considerar todos los fotogramas. Los submarcos pueden usar la API para informar sus tiempos de pintura al marco superior para la agregación.
• La API mide el FCP desde el inicio de la navegación, pero para las páginas renderizadas previamente, el FCP debe medirse desde activationStart, ya que corresponde al tiempo de FCP que experimenta el usuario.

En lugar de memorizar todas estas diferencias sutiles, los desarrolladores pueden usar la biblioteca de JavaScript web-vitals para medir la FCP, que se encarga de estas diferencias por ti (cuando es posible, ten en cuenta que no se aborda el problema del iframe):

import {onFCP} from 'web-vitals';

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

Puedes consultar el código fuente de onFCP() para ver un ejemplo completo de cómo medir la FCP en JavaScript.

Cómo mejorar el FCP

Si quieres obtener información para mejorar el FCP de un sitio específico, puedes ejecutar una auditoría de rendimiento de Lighthouse y prestar atención a cualquier oportunidad o diagnóstico específica que sugiera la auditoría.

Si quieres obtener información para mejorar el FCP en general (de cualquier sitio), consulta las siguientes guías de rendimiento:

• Elimina los recursos de bloqueo de renderización
• Reduce el uso de CSS
• Quita el CSS que no se usa
• Quita el código JavaScript que no se usa
• Conéctate previamente a los orígenes necesarios
• Reduce los tiempos de respuesta del servidor (TTFB)
• Evita redireccionamientos de página múltiples
• Precarga las solicitudes de claves
• Evita cargas útiles de red de gran tamaño
• Publica recursos estáticos con una política de caché eficiente
• Evita un tamaño excesivo de DOM
• Minimiza la profundidad de las solicitudes críticas
• Asegúrate de que el texto permanezca visible mientras se carga la fuente para sitios web
• Mantén bajos los recuentos de solicitudes y los tamaños de transferencia

Registro de cambios

En ocasiones, se descubren errores en las APIs que se usan para medir las métricas y, a veces, en las definiciones de las métricas. Como resultado, es necesario realizar cambios a veces, y estos pueden aparecer como mejoras o regresiones en tus informes y paneles internos.

Para ayudarte a administrar esto, todos los cambios que realices en la implementación o definición de estas métricas se mostrarán en este Registro de cambios.

Si tienes comentarios sobre estas métricas, puedes enviarlos al grupo de Google web-vitals-feedback.