First Contentful Paint (FCP)
¿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 #
Medir FCP en JavaScript #
- Chrome 60, Supported 60
- Firefox 84, Supported 84
- Edge 79, Supported 79
- Safari 14.1, Supported 14.1
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});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-paintpara 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-paintcuando 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 {onFCP} from 'web-vitals';
// Measure and log FCP as soon as it's available.
onFCP(console.log);Puede consultar el código fuente de onFCP() para obtener un ejemplo completo de cómo medir FCP en JavaScript.
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
CHANGELOG #
Occasionally, bugs are discovered in the APIs used to measure metrics, and sometimes in the definitions of the metrics themselves. As a result, changes must sometimes be made, and these changes can show up as improvements or regressions in your internal reports and dashboards.
To help you manage this, all changes to either the implementation or definition of these metrics will be surfaced in this CHANGELOG.
If you have feedback for these metrics, you can provide it in the web-vitals-feedback Google group.