El primer procesamiento de imagen con contenido (FCP) es una métrica importante centrada en el usuario para medir la velocidad de carga percibida. Marca el primer punto en el cronograma de carga de la página en el que el usuario puede ver todo lo que aparece en la pantalla. Un FCP rápido ayuda a asegurarle al usuario que algo está sucediendo.
El FCP mide el tiempo que transcurre desde que el usuario navega 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.
No se procesa todo el contenido cuando se renderiza el primer elemento de contenido. Esta es una distinción importante que se debe hacer entre FCP y el Procesamiento de imagen con contenido más grande (LCP), que mide 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 tener un FCP 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 cargas de páginas, segmentadas entre dispositivos móviles y 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
- Informe sobre la experiencia del usuario en Chrome
- Search Console (Informe de velocidad)
- Biblioteca JavaScript de
web-vitals
Herramientas del lab
Mide el FCP en JavaScript
Para medir el FCP en JavaScript, usa 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 este ejemplo, la entrada first-contentful-paint
registrada te indica 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 envía 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 el FCP. Los tiempos de la primera pintura se consideran solo 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 se debe medir el FCP en estos casos porque 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 debe medirse 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 siempre que sea posible (excepto en iframes):
import {onFCP} from 'web-vitals';
// Measure and log FCP as soon as it's available.
onFCP(console.log);
Consulta el código fuente de onFCP()
para obtener un ejemplo completo de la medición del FCP en JavaScript.
Cómo mejorar el FCP
Si quieres aprender a 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:
- Elimina los recursos que bloquean el procesamiento
- Minifica el CSS
- Quita el código CSS sin usar
- Quita el código JavaScript sin usar
- Conéctate previamente a los orígenes requeridos
- Reduce los tiempos de respuesta del servidor (TTFB)
- Evita los redireccionamientos de varias páginas
- Precarga las solicitudes de claves
- Evita las cargas útiles de red de gran tamaño
- Publica elementos 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 recuentos de solicitudes y tamaños de transferencia reducidos
Registro de cambios
Ocasionalmente, se detectan 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 se deben 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 se muestran en este Registro de cambios.
Si tienes comentarios sobre estas métricas, envíalos en el grupo de Google web-vitals-feedback.