¿Qué son las Core Web Vitals (métricas web principales)?

Las Core Web Vitals no son una nota de velocidad ni una puntuación de cien: son tres medidas de cómo vive una página la gente que la visita de verdad. Las define Google dentro de su iniciativa Web Vitals, que nació para que un propietario no tenga que ser experto en rendimiento para saber qué experiencia da su web.⁠^{[1]web.dev (Google, Philip Walton). Web Vitals} A una tienda le importan por dos lados. Por el de Google, que recomienda tener unas buenas Core Web Vitals para tener éxito en la Búsqueda y las usa en sus sistemas de clasificación.⁠^{[2]Google Search Central. Understanding page experience in Google Search results} Y por el del cliente, que abandona una ficha que tarda, que no responde al tocar una talla o que mueve el botón de compra justo cuando va a pulsarlo.

Cómo funciona

Son tres métricas, cada una sobre una parte de la experiencia:⁠^{[1]web.dev (Google, Philip Walton). Web Vitals}

• LCP (Largest Contentful Paint) mide la carga: el tiempo que tarda en pintarse el elemento más grande visible en pantalla, sea una imagen, un bloque de texto o un vídeo.⁠^{[3]web.dev (Google). Largest Contentful Paint (LCP)} Para una buena experiencia, 2,5 segundos o menos.
• INP (Interaction to Next Paint) mide la respuesta: observa todos los clics, toques y pulsaciones de teclado de la visita, y el valor final es la interacción más lenta, sin contar valores extremos.⁠^{[4]web.dev (Google). Interaction to Next Paint (INP)} Para una buena experiencia, 200 milisegundos o menos.
• CLS (Cumulative Layout Shift) mide la estabilidad visual: cuánto se desplaza de forma inesperada el contenido mientras la página está abierta.⁠^{[5]web.dev (Google). Cumulative Layout Shift (CLS)} Para una buena experiencia, 0,1 o menos.

Se aprueba con el 75 % de las visitas, no con la media. Google recomienda medir en el percentil 75 de las cargas de página, por separado en móvil y en escritorio, y da una página por buena cuando cumple los tres objetivos en ese percentil.⁠^{[1]web.dev (Google, Philip Walton). Web Vitals} Los datos salen del Chrome User Experience Report, que recoge mediciones anónimas de usuarios reales y alimenta PageSpeed Insights y el informe de Core Web Vitals de Search Console.⁠^{[1]web.dev (Google, Philip Walton). Web Vitals}

El informe de Search Console añade el escalón intermedio, con estos umbrales:⁠^{[6]Ayuda de Search Console. Core Web Vitals report}

El informe agrupa las URL que dan una experiencia parecida, calcula cada valor sobre el 75 % de las visitas de los últimos 28 días y da a cada grupo el estado de su peor métrica. Un grupo sin datos suficientes de LCP y CLS no aparece.⁠^{[6]Ayuda de Search Console. Core Web Vitals report}

El conjunto cambia, pero despacio. Las métricas pasan por tres fases, experimental, pendiente y estable, y una métrica estable no cambia más de una vez al año.⁠^{[1]web.dev (Google, Philip Walton). Web Vitals} El único cambio hasta ahora fue el de la respuesta: el 12 de marzo de 2024, INP sustituyó a FID (First Input Delay), que solo medía el retraso de la primera interacción, y Chrome dio de plazo hasta el 9 de septiembre de 2024 para dejar de usar FID en sus herramientas.⁠^{[7]web.dev (Google, Rick Viscomi). Interaction to Next Paint becomes a Core Web Vital on March 12}⁠^{[4]web.dev (Google). Interaction to Next Paint (INP)}

Lo que pesan en Google tiene matices que Google escribe. Las Core Web Vitals se usan en sus sistemas de clasificación, pero sacar buenos resultados en el informe no garantiza que tus páginas salgan arriba, y perseguir una puntuación perfecta solo por SEO quizá no sea el mejor uso de tu tiempo. La relevancia va primero: Google muestra el contenido más relevante aunque la experiencia sea peor, y una buena experiencia ayuda cuando hay muchas páginas útiles donde elegir.⁠^{[2]Google Search Central. Understanding page experience in Google Search results} En su documentación, Google redondea los umbrales como «menos de 200 milisegundos» y «menos de 0,1»;⁠^{[8]Google Search Central. Understanding Core Web Vitals and Google search results} web.dev y Search Console usan «o menos».

En una tienda

Una ficha de producto tiene las tres métricas a la vista. Un ejemplo ficticio de dónde suele estar cada una:

Las causas de la última columna son las que da web.dev. Una imagen cuenta como candidato a LCP;⁠^{[3]web.dev (Google). Largest Contentful Paint (LCP)} la respuesta de una interacción se retrasa por tareas largas en el hilo principal del navegador;⁠^{[4]web.dev (Google). Interaction to Next Paint (INP)} y los saltos de contenido suelen venir de recursos que cargan de forma asíncrona, de elementos que se añaden al DOM por encima de lo que ya había y de imágenes o vídeos sin dimensiones conocidas.⁠^{[5]web.dev (Google). Cumulative Layout Shift (CLS)} En una tienda, mucho de eso lo añaden las aplicaciones, y por eso el renderizado de JavaScript de una ficha pesa también en su INP.

Google publica casos de negocio. Entre los que recogió web.dev en 2021, Vodafone Italia mejoró su LCP un 31 % y vendió un 8 % más.⁠^{[9]web.dev (Google). The business impact of Core Web Vitals} Es un caso de una empresa en una fecha, no una previsión para tu catálogo.

Cómo comprobarlo

1. Abre el informe de Core Web Vitals de Search Console, primero en móvil. Corrige antes lo que está en «Mala» y, dentro de cada estado, lo que afecta a más URL o a las más importantes.⁠^{[6]Ayuda de Search Console. Core Web Vitals report}
2. Pulsa una URL de ejemplo y pásala por PageSpeed Insights. Ten en cuenta que el informe da valores por grupo de URL y PageSpeed Insights suele darlos por URL, así que pueden no coincidir.⁠^{[6]Ayuda de Search Console. Core Web Vitals report}
3. Si no hay datos, el sitio es nuevo en Search Console o el Chrome User Experience Report no tiene visitas suficientes para ese tipo de dispositivo.⁠^{[6]Ayuda de Search Console. Core Web Vitals report}
4. Diagnostica en el laboratorio, con Lighthouse o las herramientas de Chrome, y usa el Total Blocking Time como pista para INP: mejorarlo en el laboratorio puede mejorar INP con usuarios reales.⁠^{[1]web.dev (Google, Philip Walton). Web Vitals}
5. Mide en tu propia web. La biblioteca web-vitals de JavaScript mide las tres métricas como las calculan las herramientas de Google, y web.dev recomienda montar tu propia medición con usuarios reales para detectar a tiempo un empeoramiento.⁠^{[1]web.dev (Google, Philip Walton). Web Vitals}

Concepto cercano: experiencia en la página

La experiencia en la página (page experience) es más amplia. Google pregunta, además de por las Core Web Vitals, si la página se sirve de forma segura, si se ve bien en el móvil, si evita el exceso de anuncios y los intersticiales intrusivos y si se distingue bien el contenido principal. No es una única señal: sus sistemas miran varias, y de todos esos aspectos, solo las Core Web Vitals se usan directamente en la clasificación; el resto no ayuda a subir de forma directa, aunque hace la web más satisfactoria.⁠^{[2]Google Search Central. Understanding page experience in Google Search results} Las Core Web Vitals son la parte que se mide con números.

Para seguir, el término de renderizado del lado del servidor explica cómo llega el contenido de una ficha al navegador, y la ruta de lectura de este tema ordena el resto de términos.