Velocidad de carga y Core Web Vitals en ecommerce: cómo medirlos y mejorarlos para vender más
Compartir
Un usuario entra desde Instagram a la ficha de un producto, en el celular, con datos móviles. La página tarda en mostrar la foto, los botones saltan mientras carga y, cuando por fin toca "Agregar al carrito", la respuesta demora. Probablemente no compre. Y no va a contarte por qué: simplemente se va.
La velocidad y la estabilidad de la experiencia son parte de la conversión. Google las mide a través de las Core Web Vitals, un conjunto de métricas que evalúan la experiencia real de los usuarios y que forman parte de las señales de experiencia de página que Google considera.
Esta guía está pensada para quienes ya tienen experiencia en ecommerce y quieren entender y mejorar estos indicadores.
Qué son las Core Web Vitals
Son tres métricas que miden aspectos concretos de la experiencia:
| Métrica | Qué mide | Bueno | Necesita mejorar | Malo |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Cuánto tarda en mostrarse el elemento principal visible (en ecommerce, casi siempre la imagen del producto o del banner) | ≤ 2,5 s | 2,5 – 4 s | > 4 s |
| INP (Interaction to Next Paint) | Cuánto tarda la página en responder visualmente a las interacciones del usuario (clics, toques, teclas) | ≤ 200 ms | 200 – 500 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | Cuánto se "mueve" el contenido mientras carga | ≤ 0,1 | 0,1 – 0,25 | > 0,25 |
Google evalúa estas métricas en el percentil 75 de las visitas reales: es decir, para considerar que una página está en "bueno", al menos el 75 % de las visitas tiene que cumplir el umbral.
INP reemplazó a FID (First Input Delay) como métrica de interactividad en 2024, y mide la respuesta a lo largo de toda la visita, no solo la primera interacción.
Datos de laboratorio vs. datos de campo
Es clave entender la diferencia:
- Datos de campo (field data): vienen de usuarios reales, por ejemplo del Chrome User Experience Report (CrUX). Son los que Google usa para evaluar tu sitio.
- Datos de laboratorio (lab data): vienen de una simulación, por ejemplo con Lighthouse. Son útiles para diagnosticar y probar cambios, pero no reflejan necesariamente la experiencia real.
Una página puede tener un buen puntaje en Lighthouse y malos datos de campo (o al revés), porque tus usuarios reales usan otros dispositivos y conexiones.
Cómo medir
- PageSpeed Insights: muestra datos de campo (si hay suficientes visitas) y un diagnóstico de laboratorio para una URL.
- Google Search Console, informe de Core Web Vitals: agrupa las URLs de tu sitio por estado y tipo de problema, con datos de campo.
- Lighthouse (en las herramientas para desarrolladores del navegador): diagnóstico detallado en laboratorio.
- Medición de usuarios reales (RUM): con librerías como web-vitals podés enviar las métricas de tus visitantes a tu herramienta de analítica.
Priorizá las plantillas de mayor tráfico y conversión: home, categorías, fichas de producto y checkout. En ecommerce, mejorar una plantilla mejora cientos o miles de URLs a la vez.
Cómo mejorar LCP
En una tienda, el elemento LCP suele ser la imagen principal del producto o el banner de la home.
- Optimizá las imágenes: formatos modernos (WebP o AVIF), compresión adecuada y tamaños acordes a la pantalla (imágenes responsivas con
srcset). - No uses carga diferida (lazy loading) en la imagen principal: la imagen que define el LCP tiene que cargarse lo antes posible. Usá lazy loading para las imágenes que están más abajo.
- Priorizá la imagen principal, por ejemplo con
fetchpriority="high"o precargándola. - Reducí el tiempo de respuesta del servidor (TTFB): buen hosting, caché y CDN.
- Evitá recursos que bloqueen el renderizado: CSS y JavaScript innecesarios en la carga inicial.
- Cuidado con los carruseles y sliders en la parte superior: suelen retrasar el LCP.
Cómo mejorar INP
El INP suele verse afectado por el exceso de JavaScript, algo muy común en ecommerce por la cantidad de apps y scripts de terceros.
- Auditá los scripts de terceros: chats, pop-ups, reseñas, píxeles, heatmaps. Cada uno suma trabajo al navegador. Eliminá los que no aportan.
- Cargá los scripts no críticos de forma diferida o después de la interacción.
- Dividí tareas largas de JavaScript para que el navegador pueda responder entre ellas.
- Revisá las interacciones clave: seleccionar variante, agregar al carrito, abrir el menú, aplicar filtros. Tienen que responder de inmediato, aunque sea con un estado visual de "cargando".
Cómo mejorar CLS
El CLS mide los saltos de contenido. En ecommerce, las causas típicas son:
- Imágenes sin dimensiones definidas: definí
widthyheight(o una relación de aspecto) para reservar el espacio. - Banners, avisos o barras de promoción que se insertan arriba del contenido después de cargar.
- Fuentes web que cambian el tamaño del texto al cargar: usá estrategias de carga de fuentes adecuadas.
- Bloques dinámicos (reseñas, productos relacionados, precios en cuotas) que aparecen sin espacio reservado.
Impacto en el negocio
La velocidad no es solo una métrica técnica:
- Conversión: las demoras en fichas de producto y checkout aumentan el abandono.
- SEO: las Core Web Vitals forman parte de las señales de experiencia de página. No reemplazan la relevancia del contenido, pero suman.
- Publicidad: una landing lenta desperdicia parte del presupuesto, porque muchos usuarios se van antes de que cargue.
Para medir el impacto, compará la tasa de conversión antes y después de cada mejora, segmentando por dispositivo. Te puede servir repasar qué es la tasa de conversión y por qué es la métrica más importante y las fricciones de UX que más ventas cuestan.
Ejemplo práctico: una tienda de indumentaria
Una tienda de indumentaria con la mayoría de su tráfico desde celulares tenía sus fichas de producto en estado "malo" en el informe de Core Web Vitals: LCP cercano a 5 segundos y CLS alto.
El diagnóstico mostró:
- Imágenes de producto de más de 2 MB, sin formato moderno.
- Lazy loading aplicado también a la imagen principal.
- Seis scripts de terceros cargando al inicio (dos de ellos sin uso).
- Una barra de promoción que se insertaba arriba después de cargar.
Las acciones:
- Compresión y conversión de imágenes a WebP, con tamaños responsivos.
- Carga prioritaria de la imagen principal y lazy loading solo en las demás.
- Eliminación de los scripts sin uso y carga diferida del resto.
- Espacio reservado para la barra de promoción.
Después de las mejoras, las fichas pasaron a estado "bueno" en los datos de campo en las semanas siguientes, y la tasa de conversión móvil mejoró. (Caso ilustrativo basado en situaciones habituales del sector).
Checklist de velocidad para ecommerce
- ☐ Reviso el informe de Core Web Vitals en Search Console.
- ☐ Diferencio datos de campo y de laboratorio.
- ☐ Priorizo home, categorías, fichas de producto y checkout.
- ☐ Las imágenes están comprimidas, en formato moderno y con tamaños responsivos.
- ☐ La imagen principal no usa lazy loading y tiene carga prioritaria.
- ☐ Audité y reduje los scripts de terceros.
- ☐ Las interacciones clave responden de inmediato.
- ☐ Las imágenes y bloques dinámicos tienen el espacio reservado.
- ☐ Mido la conversión antes y después de cada mejora, por dispositivo.
Preguntas frecuentes
¿Qué pesa más para el SEO: velocidad o contenido?
El contenido relevante sigue siendo lo principal. La experiencia de página suma, sobre todo cuando varias páginas compiten con contenido similar.
¿Cuánto tarda Google en reflejar las mejoras?
Los datos de campo se basan en un período de visitas reales, así que las mejoras pueden tardar algunas semanas en verse en Search Console.
¿Un puntaje de 100 en Lighthouse es necesario?
No. Lo importante es que tus usuarios reales tengan una buena experiencia, es decir, que los datos de campo estén en "bueno".
¿Las apps de terceros son siempre un problema?
No siempre, pero cada una tiene un costo de rendimiento. Evaluá si el beneficio que aportan justifica ese costo.
Una base técnica resuelta con Orbitienda
Buena parte de la velocidad depende de la plataforma sobre la que funciona tu tienda. En Orbitienda el hosting, el sitio seguro y las actualizaciones vienen incluidos, y el checkout está pensado primero para celulares. Además, como Mercado Pago, los envíos, el stock y los cupones vienen integrados, dependés de menos apps de terceros, que son una de las causas más comunes de lentitud.
Conocé los planes de Orbitienda y enfocate en vender mientras la plataforma se ocupa de la base técnica.
Seguir leyendo
Las fricciones de UX que más ventas cuestan en una tienda online
Una fricción de UX es cualquier elemento de la tienda que hace más difícil, más lento o más confuso el proceso de compra. No tiene que ser un error técnico — puede ser un botón en el lugar equivocado, un texto ambiguo, una imagen que tarda en cargar o un paso innecesario en el checkout. Cada fricción tiene un costo directo en conversión — y la mayoría son invisibles para el dueño de la tienda porque él conoce el sistema y navega sin dificultad. Fricción 1 — Barra de búsqueda ausente o poco vis
Sistemas de checkout: qué son, cómo funcionan y cómo elegir el mejor para tu tienda
El checkout es el proceso mediante el cual el comprador completa su compra — desde que decide pagar hasta que recibe la confirmación del pedido. El sistema de checkout es la tecnología que hace posible ese proceso: captura los datos de envío, procesa el pago, registra el pedido y dispara la confirmación. Es el último paso antes de que la venta ocurra — y el paso donde más ventas se pierden. El 70% de los carritos de ecommerce se abandona. Una parte importante de ese abandono ocurre en el checko
Google Merchant Center para ecommerce: cómo armar tu feed de productos y aparecer en Google Shopping
Tus productos pueden aparecer en Google con foto, precio y disponibilidad, incluso sin pagar publicidad. Una guía técnica para configurar Merchant Center, armar un feed de calidad y evitar rechazos.
Qué elementos testear en una publicidad de Meta Ads
Cuando una publicidad no funciona, muchas personas cometen el error de cambiar todo al mismo tiempo. Modifican la imagen, el texto, el público, el presupuesto y la oferta. El problema es que después no saben qué cambio mejoró o empeoró el resultado. Para testear bien una publicidad en Meta Ads, conviene cambiar una variable por vez. Los elementos principales que podés testear son: 1. El creativo Es la imagen o video que ve la persona primero. En Meta Ads, el creativo suele ser uno de los fac
Cómo elegir (o cambiar) tu plataforma de ecommerce: costos, funciones y migración sin perder ventas
Cambiar de plataforma de ecommerce puede bajar costos y destrabar el crecimiento, o costarte posicionamiento y ventas si se hace mal. Una guía técnica para evaluar opciones y migrar sin sorpresas.
Cargar 100 productos sin morir en el intento: cómo organizar tu catálogo en la tienda online
Cargar todos tus productos en la tienda online parece una montaña. Te mostramos cómo organizar la carga paso a paso: qué preparar antes, cómo nombrar, cómo agrupar y por dónde empezar.
Cómo saber si una publicidad en Meta Ads funciona antes de gastar demasiado
Lanzar una publicidad en Meta Ads sin testearla es como apostar a ciegas. Podés tener una buena idea, un buen producto y una oferta interesante, pero eso no garantiza que el anuncio conecte con las personas correctas. Por eso, antes de invertir más presupuesto, conviene hacer una prueba inicial. El objetivo de testear una publicidad no es “vender mucho” desde el primer día, sino descubrir si el anuncio tiene potencial. Para eso, lo primero que hay que mirar es si la gente se detiene, hace clic
Cómo leer un reporte de Google Analytics sin perderse
Google Analytics es gratuito, está disponible para cualquier tienda online y contiene información que puede cambiar completamente cómo tomás decisiones sobre tu negocio. Y sin embargo, la mayoría de los emprendedores lo instala, lo abre una vez, ve decenas de números que no entiende y lo cierra para no volver. No es falta de interés — es que Google Analytics 4, la versión actual, tiene una interfaz que intimida. Demasiadas secciones, demasiadas métricas, demasiados reportes que no está claro pa
Seguí explorando
Guías, herramientas y producto en el mismo sitio.
Suscribite al newsletter
Recibí novedades sobre ecommerce y Orbitienda. Sin spam.
