Web vitals ecommerce: qué medir y cómo priorizar mejoras
Para que una tienda online pase Core Web Vitals hoy debe lograr LCP ≤2,5 s, INP ≤200 ms y CLS ≤0,1, medidos al percentil 75. La prioridad práctica está clara: arregla primero el LCP en las fichas de producto y estabiliza el INP en páginas con filtros y en el checkout. Mide siempre en campo, con Search Console y CrUX, y complementa con datos RUM para detectar diferencias por dispositivo y red.
En resumen:
- La optimización del LCP en fichas de producto genera el mayor impacto en el retorno de inversión por su alto tráfico transaccional.
- El INP en filtros y checkout se ve afectado por cargas largas de JavaScript y aplicaciones de terceros sin priorización ni auditoría periódica.
- El CLS se evoca por banners, widgets y cambios de precio dinámico que no reservan espacio fijo en la carga inicial.
- La medición en campo con Search Console, Web Vitals y RUM proporciona datos reales y esenciales para definir prioridades de mejora.
- La revisión periódica, automatización y control de resultados son fundamentales para mantener avances en Core Web Vitals a largo plazo.
Tabla de contenidos
- Qué son LCP, INP y CLS y por qué importan en ecommerce
- Causas típicas por métrica en plantillas ecommerce: PDP, PLP y checkout
- Cómo medir tus Core Web Vitals: flujo de diagnóstico paso a paso
- Optimización de LCP en páginas de producto y categoría
- Optimización de INP en filtros, carrito y checkout
- Optimización de CLS: evitar saltos por merchandising y widgets
- Benchmarks y ROI: cómo cuantificar el impacto de mejorar las web vitals
- Errores frecuentes en tiendas online que impiden mejoras sostenibles
- Herramientas y monitoreo continuo para no perder lo ganado
- Conclusiones y plan de 30, 60 y 90 días para equipos ecommerce
- Lo que aprendimos auditando Core Web Vitals en tiendas reales
- Automatiza el diagnóstico de tus Core Web Vitals con LG DataOne
- Fuentes
- Preguntas frecuentes
Qué son LCP, INP y CLS y por qué importan en ecommerce
Las Core Web Vitals son tres métricas que Google usa para evaluar la experiencia real de carga, interacción y estabilidad visual de una página. En una tienda online no son un ejercicio técnico abstracto: cada una está ligada a un momento concreto del recorrido de compra.
El LCP (Largest Contentful Paint) mide cuánto tarda en pintarse el elemento visual más grande de la pantalla. En una ficha de producto suele ser la imagen principal o el título H1; si tarda en aparecer, el comprador duda antes incluso de ver el precio.
El INP (Interaction to Next Paint) mide la latencia entre una acción del usuario y la respuesta visual del navegador. Es la métrica que explica por qué un filtro de categoría “se queda pegado” o por qué el botón de añadir al carrito tarda en reaccionar.
El CLS (Cumulative Layout Shift) mide cuánto se mueven los elementos de la página mientras carga. Los saltos provocados por banners emergentes, valoraciones cargadas tarde o cambios de precio dinámico son la causa más frecuente en ecommerce.
Los umbrales oficiales de Google exigen que las tres métricas estén en verde al mismo tiempo: basta con que una falle para que la URL se clasifique como deficiente.
- LCP: la imagen hero o el título principal del producto
- INP: la respuesta a clics en filtros, variantes o botones de compra
- CLS: los movimientos causados por banners, reseñas y precios dinámicos
Conviene distinguir entre datos de laboratorio (una prueba puntual en un entorno controlado) y datos de campo (lo que experimentan los compradores reales). Ambos importan, pero solo el campo determina si Google considera tu tienda “aprobada”.
Causas típicas por métrica en plantillas ecommerce: PDP, PLP y checkout
Cada plantilla de una tienda online tiene un patrón de fallo distinto. Conocerlo ahorra semanas de diagnóstico a ciegas.
En la ficha de producto (PDP), el LCP suele fallar por tres motivos combinados: un tiempo hasta el primer byte (TTFB) alto por hosting o caché deficiente, imágenes hero sin preload que compiten con otros recursos, y lazy-loading aplicado por defecto al propio elemento LCP, lo que retrasa justo la imagen que Google mide. Esta última práctica es paradójicamente muy habitual: muchas plataformas aplican carga diferida a todas las imágenes sin excepción, incluida la que aparece primero en pantalla.
En la página de categoría o listado (PLP), el problema dominante es el INP. Los filtros dinámicos, los selectores de orden y las vistas de cuadrícula suelen ejecutar tareas largas de JavaScript que bloquean el hilo principal. Añade a eso scripts de terceros (chat, recomendadores, píxeles de publicidad) que se disparan justo cuando el usuario interactúa, y el resultado es una interfaz que responde con retraso perceptible.
En el checkout, el INP vuelve a ser crítico, pero por otro motivo: validaciones de formulario mal optimizadas, cálculos de envío que bloquean la interfaz y un DOM sobrecargado con widgets de pago, cupones y trust badges. Cada campo que valida en cada pulsación de tecla suma latencia acumulada.
El CLS aparece de forma transversal en las tres plantillas:
- Banners de cookies o promociones que se inyectan después de la carga inicial
- Widgets de reseñas y valoraciones que reservan espacio insuficiente
- Precios que cambian dinámicamente según stock, cupones o geolocalización
- Fuentes web que sustituyen a las del sistema y desplazan el texto
Web priorizar la eliminación de tareas largas y el recargado de recursos críticos como las dos palancas más efectivas para atacar LCP e INP a la vez.
Consejo profesional: Antes de tocar código, exporta el informe de Search Console por grupo de URLs y cruza cada plantilla fallida con su volumen de tráfico e ingresos. Así evitas optimizar una página de categoría poco visitada mientras tu PDP más vendida sigue en rojo.
Cómo medir tus Core Web Vitals: flujo de diagnóstico paso a paso
Diagnosticar bien exige combinar tres fuentes de datos, cada una con un propósito distinto.
- Revisa el informe de Core Web Vitals en Search Console. Este informe usa datos reales del Chrome UX Report (CrUX) y agrupa tus URLs por plantilla y estado (correcta, necesita mejora, deficiente) usando el percentil 75. Empieza aquí porque te dice qué plantillas fallan de verdad para usuarios reales, no en un test aislado.
- Reproduce el problema en laboratorio con PageSpeed Insights y Chrome DevTools. Una vez identificada la plantilla problemática, carga una URL representativa y observa qué recurso retrasa el LCP o qué script bloquea el hilo principal. Ten en cuenta que Lighthouse no mide INP directamente: usa el Total Blocking Time (TBT) como propia aproximado en laboratorio, según explica la guía de Web Vitals.
- Implementa medición en campo con la librería web-vitals. Instalar este script JS y enviar los datos a tu herramienta de analítica o a un sistema RUM te permite ver cómo varían las métricas según dispositivo, tipo de conexión y ubicación geográfica, algo que ni Search Console ni Lighthouse muestran con ese detalle.
Optimización de LCP en páginas de producto y categoría
Reducir el LCP en una PDP es, en la mayoría de los casos, el cambio con mayor retorno por hora invertida, porque afecta a la plantilla que más tráfico transaccional recibe.
- Marca la imagen hero con el atributo
fetchpriority="high"o recárgala con una etiqueta<link rel="preload">para que el navegador la descargue antes que recursos secundarios. - Sirve las imágenes en formatos modernos como WebP o AVIF, con tamaños responsive mediante
srcset, para evitar descargar una imagen de escritorio en un móvil. - Reduce el TTFB con una red de distribución de contenidos (CDN), caché de servidor bien configurada y un alojamiento dimensionado para picos de tráfico en campañas.
- Excluye explícitamente la imagen LCP de cualquier lazy-loading automático: es la práctica óptima cuando el sistema de la tienda aplica carga diferida por defecto a todas las imágenes.
Consejo profesional: Comprueba en las herramientas de desarrollador del navegador qué recurso marca Chrome como “elemento LCP” en tu PDP. Si es un banner promocional en lugar de la imagen del producto, el problema no es de rendimiento sino de arquitectura de la plantilla.
Optimización de INP en filtros, carrito y checkout
El INP suele ser la métrica más difícil de dominar en ecommerce porque depende directamente de cuánto JavaScript ejecuta el navegador y de cuántas aplicaciones de terceros compiten por el mismo hilo principal.
- Divide el código en fragmentos más pequeños (code-splitting) para que las tareas largas no bloqueen la respuesta a un clic.
- Usa
requestIdleCallbackyrequestAnimationFramepara posponer trabajo no urgente hasta que el navegador tenga capacidad libre. - Audita las aplicaciones y etiquetas instaladas cada trimestre y elimina las que no aportan retorno claro: varias herramientas “ligeras” acumuladas pueden sumar una pérdida de conversión apreciable, como advierte el análisis de Shopify sobre velocidad y ventas.
- Aplica debounce a la validación de formularios de checkout y muestra feedback visual inmediato al pulsar “añadir al carrito”, aunque la confirmación del servidor tarde unos milisegundos más.
Consejo profesional: Antes de sumar una nueva app de recomendaciones o de chat, pregúntale a tu equipo técnico cuántos milisegundos de INP añade en móvil. Si nadie lo sabe, ese es ya el primer problema a corregir.
Optimización de CLS: evitar saltos por merchandising y widgets
Los saltos visuales dañan la confianza del comprador de una forma que rara vez se documenta: un botón de pago que se desplaza justo cuando el usuario iba a pulsarlo genera fricción y, en el peor caso, un clic erróneo.
- Asigna siempre
width,heightoaspect-ratioa imágenes y contenedores que cargan contenido dinámico. - Reserva espacio fijo para banners promocionales, widgets de reseñas y botones de pago antes de que se inyecten.
- Evita animaciones que alteren el flujo del documento; usa propiedades como
transformuopacity, que no provocan recalculo de layout. - Define el espacio del cambio de precio dinámico (por cupón o stock) para que no desplace el resto de la ficha.
Benchmarks y ROI: cómo cuantificar el impacto de mejorar las web vitals
Los umbrales de Google no son orientativos: exigen que LCP, INP y CLS estén en verde en el percentil 75 de las visitas, lo que significa que tres de cada cuatro sesiones deben cumplir el objetivo, no solo la mediana.
El dato que mueve presupuestos: el análisis de Shopify sobre velocidad y conversión muestra que cada 100 milisegundos adicionales de carga se asocian, en promedio, a una caída en la tasa de conversión de la tienda.
Esa cifra convierte la optimización de rendimiento en un argumento de negocio, no solo técnico: como explica el análisis de Boost SEO and conversions with faster website speed, una mejora de medio segundo en el LCP de tu PDP más vendida puede pesar más en ingresos que una campaña de anuncios completa. Arreglar el CLS de una página institucional aporta poco si tu checkout sigue perdiendo pedidos por lentitud. Una guía práctica sobre cómo mejorar la tasa de conversión en ecommerce profundiza en cómo cruzar estos datos con el resto del embudo.
Errores frecuentes en tiendas online que impiden mejoras sostenibles
Muchos equipos arreglan sus Core Web Vitals una vez y luego ven cómo se degradan en la siguiente campaña. Estos son los fallos que provocan esa regresión:
- Aplicar lazy-loading por defecto a todas las imágenes, incluida la que actúa como elemento LCP.
- Acumular apps de terceros (chat, recomendadores, reseñas, píxeles) sin auditar su coste real en rendimiento frente a su aportación a la conversión.
- Lanzar banners o módulos de merchandising sin definir de antemano el espacio que ocuparán en pantalla.
- Tratar la optimización como un proyecto puntual en vez de un proceso que se revisa en cada despliegue, algo que web.dev señala como condición necesaria para mantener resultados a largo plazo.
Herramientas y monitoreo continuo para no perder lo ganado
Mantener buenos resultados exige un proceso, no una intervención aislada.
- Instala la librería web-vitals en producción y envía los datos a tu sistema de analítica o a una plataforma RUM propia, segmentando por tipo de dispositivo y velocidad de conexión.
- Configura alertas en Search Console para detectar cuándo una plantilla pasa de “correcta” a “necesita mejora”, y añade comprobaciones de rendimiento en tu pipeline de integración continua para bloquear despliegues que degraden el LCP o el CLS.
- Mide cada cambio con un test A/B cuando el volumen de tráfico lo permita: comparar variantes con y sin la optimización aplicada es la única forma fiable de atribuir una mejora de conversión al cambio técnico y no a otra variable de la campaña. La sección de optimizar el checkout para ecommerce detalla cómo estructurar estas pruebas en el proceso de pago.
Consejo profesional: Guarda un registro histórico del INP y el LCP por plantilla antes y después de cada lanzamiento de campaña. Sin esa referencia, es imposible saber si una caída de conversión viene del rendimiento o de otro factor.
Conclusiones y plan de 30, 60 y 90 días para equipos ecommerce
La primera fase, entre los días 1 y 30, se centra en el diagnóstico: identificar las PDPs con más ingresos que fallan en Search Console y desplegar la librería web-vitals para tener datos de campo propios. Entre los días 30 y 60 toca actuar sobre el LCP de esas fichas críticas y auditar las aplicaciones de terceros que afectan al INP. De los 60 a los 90 días, el foco pasa a consolidar: alertas automáticas, revisión trimestral de apps y gobernanza compartida entre producto, marketing y tecnología para que ningún banner nuevo rompa el CLS ya conseguido.
| Fase | Objetivo principal | Métrica prioritaria |
|---|---|---|
| Días 1 a 30 | Diagnóstico y medición de campo | Identificar plantillas en rojo (LCP/INP/CLS) |
| Días 30 a 60 | Corrección en PDP y auditoría de apps | LCP en fichas críticas, INP en filtros |
| Días 60 a 90 | Gobernanza y monitorización continua | Mantener CLS estable tras campañas |
Lo que aprendimos auditando Core Web Vitals en tiendas reales
Juan lleva años dentro de los equipos de analítica y CRO de Lester Grow, revisando auditorías de GA4, GTM y rendimiento en implementaciones reales de ecommerce. Una lección se repite en casi todos los casos: el INP rara vez se rompe por un solo culpable, sino por la suma de aplicaciones que nadie ha vuelto a revisar desde su instalación.
La conclusión práctica no es perseguir la perfección en laboratorio, sino automatizar la auditoría y priorizar por impacto real en ingresos. Esa disciplina, más que cualquier ajuste técnico aislado, es lo que separa a las tiendas que mantienen sus métricas en verde de las que las pierden en cada campaña.
— Juan
Automatiza el diagnóstico de tus Core Web Vitals con LG DataOne
Auditar manualmente cada plantilla, cada app de terceros y cada despliegue consume horas que un equipo de ecommerce no siempre tiene. Existen herramientas que automatizan la auditoría de configuraciones como GA4, Google Tag Manager y Consent Mode, integran monitorización de rendimiento web y priorizan las mejoras por impacto real en conversión, evitando la revisión manual plantilla por plantilla.
Algunas plataformas centralizan informes de rendimiento junto con mapas de calor, grabaciones de usuario y propuestas de test A/B basadas en inteligencia artificial, facilitando que la decisión de qué optimizar primero se apoye en datos y no en intuición. Puedes revisar los planes disponibles (Standard, desde 9,95 €/mes; Business, desde 69,95 €/mes; y Premium, desde 99,95 €/mes) en la página de planes y precios, o empezar directamente con la prueba gratuita de 14 días en Lgdataone para ver qué plantillas de tu tienda necesitan atención hoy.
Para seguir profundizando: consulta este artículo relacionado y visita la funcionalidad de LG DataOne vinculada a esta guía.
Tutorial práctico: auditar el rendimiento WPO con LG DataOne
En este videotutorial puedes conocer cómo revisar la velocidad de una página y las métricas de rendimiento con LG DataOne.
Fuentes
Para verificar umbrales y metodología, consulta la documentación de Google Developers sobre Core Web Vitals y la guía de técnicas de optimización de web.dev. El informe de Search Console explica cómo interpretar los grupos de URLs por estado, y HTTP Archive ofrece datos de referencia sobre el estado del rendimiento web a nivel sectorial.
- Core Web Vitals thresholds — Google Developers
- Web
- Core Web Vitals report – Search Console Help
- Store speed and conversion: What the data shows (2026) – Shopify
Preguntas frecuentes
¿Cuáles son los umbrales actuales de Core Web Vitals?
Google exige LCP ≤2,5 segundos, INP ≤200 milisegundos y CLS ≤0,1, todos medidos al percentil 75 de las visitas en móvil y escritorio por separado.
¿Qué métrica debo priorizar primero en una tienda online?
El LCP suele ser la prioridad en fichas de producto, mientras el INP domina en páginas de categoría con filtros y en el checkout; identifica cuál falla en tu informe de Search Console antes de decidir.
¿Cómo mido el INP si Lighthouse no lo calcula directamente?
Lighthouse usa el Total Blocking Time como aproximación en laboratorio; para un dato real de INP necesitas medición de campo con la librería web-vitals o el informe de Search Console.
¿Cuánto afecta la velocidad de carga a las ventas?
Según el análisis de Shopify sobre velocidad y conversión, cada 100 milisegundos adicionales de carga se asocian, en promedio, a una caída en la tasa de conversión.
¿LG DataOne ayuda a mejorar las Core Web Vitals?
LG DataOne audita la configuración de analítica y rendimiento de tu tienda y prioriza mejoras por impacto en conversión; los precios de sus planes están disponibles en su página de planes y precios.
