First Contentful Paint (FCP)

Navegadores compatibles

  • 60
  • 79
  • 84
  • 14.1

Origen

¿Qué es el FCP?

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

Cronograma del FCP de google.com

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

Notarás que, aunque se renderizó una parte del contenido, no todo se renderizó. Esta es una distinción importante que debes hacer entre el Primer procesamiento de imagen con contenido (FCP) y el Procesamiento de imagen con contenido más grande (LCP), que busca medir cuándo termina 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 una primera pintura 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 entre dispositivos móviles y computadoras de escritorio.

Los valores de FCP correctos son de 1.8 segundos o menos, los valores deficientes son superiores a 3.0 segundos y cualquier otro valor debe mejorarse

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

Herramientas del lab

Mide 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 ejemplo 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 enumeran 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 calcule el FCP (los tiempos de la primera pintura solo se deben considerar si la página estuvo en primer plano durante todo el tiempo).
  • La API no informa entradas 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 pintura 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 se debe medir desde activationStart, ya que corresponde a la hora 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 el FCP, que se encarga de estas diferencias por ti (cuando sea posible, ten en cuenta que no se trata el problema de 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 obtener un ejemplo completo de la medición del FCP en JavaScript.

Cómo mejorar el FCP

Para obtener información sobre cómo mejorar el FCP para un sitio específico, puedes ejecutar una auditoría de rendimiento de Lighthouse y prestar atención a las oportunidades o los diagnósticos específicos que sugiera la auditoría.

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

Registro de cambios

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

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

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