First Contentful Paint (FCP)
Posted on 19/12/2021, 08:28 By

First Contentful Paint (FCP)

First Contentful Paint: Primer despliegue de contenido (FCP) es una métrica importante, centrada en el usuario, para medir la velocidad de carga percibida porque marca el primer punto en la línea de tiempo de carga de la página en el que el usuario puede ver algo en la pantalla: una FCP rápida ayuda a tranquilizar al usuario de que algo está ocurriendo.

 

¿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.

Línea de tiempo de FCP de google.com

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.

Los buenos valores de FCP son 1,8 segundos o menos, los valores malos son superiores a 3,0 segundos y cualquier cosa intermedia necesita mejora

¿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

Herramientas de laboratorio

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:

About

Categories: Web Etiquetas: ,