Core Web Vitals en ecommerce: LCP, INP y CLS en una ficha de producto

Las Core Web Vitals son tres métricas con las que Google mide la experiencia de carga de una página. Influyen en el posicionamiento, pero sobre todo reflejan algo que afecta directamente a las ventas: si la página se ve y responde rápido.

LCP: el elemento más grande

Largest Contentful Paint mide cuánto tarda en pintarse el elemento más grande de la pantalla inicial. En una ficha de producto casi siempre es la imagen principal. Objetivo: menos de 2,5 s.

• No uses carga diferida en la imagen principal.
• Añade fetchpriority="high" a esa imagen.
• Sírvela en WebP o AVIF y al tamaño en que se muestra.
• Reduce el tiempo de respuesta del servidor (ver nuestro artículo sobre diagnóstico de lentitud).

INP: la respuesta a la interacción

Interaction to Next Paint sustituyó a FID en 2024. Mide cuánto tarda la página en reaccionar cuando el cliente hace clic o toca algo, por ejemplo al elegir una talla o pulsar «Añadir al carrito». Objetivo: menos de 200 ms.

• El enemigo es el JavaScript pesado: chats, píxeles, carruseles.
• Retrasa los scripts de terceros hasta la primera interacción o hasta después del consentimiento.
• Evita módulos que recalculan precios con muchas peticiones al cambiar una combinación.

CLS: los saltos de la página

Cumulative Layout Shift mide cuánto se mueven los elementos mientras carga. Ese momento en que vas a pulsar un botón y baja porque ha aparecido un banner. Objetivo: menos de 0,1.

• Pon siempre width y height a las imágenes.
• Reserva espacio para los avisos de cookies, banners y bloques que llegan por AJAX.
• Fuentes: usa font-display: swap y fuentes autoalojadas.

Dónde medir

En Google Search Console, informe «Métricas web principales», con datos reales de tus visitantes agrupados por tipo de página. Es mejor guía que una sola prueba en PageSpeed, porque refleja móviles reales con conexiones reales.