Velocidad de carga y Core Web Vitals en ecommerce: cómo medirlos y mejorarlos para vender más

Anabel Gonzaléz5 min de lectura

Compartir

Velocidad de carga y Core Web Vitals en ecommerce: cómo medirlos y mejorarlos para vender más

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í width y height (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:

  1. Compresión y conversión de imágenes a WebP, con tamaños responsivos.
  2. Carga prioritaria de la imagen principal y lazy loading solo en las demás.
  3. Eliminación de los scripts sin uso y carga diferida del resto.
  4. 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

Seguí explorando

Guías, herramientas y producto en el mismo sitio.

Suscribite al newsletter

Recibí novedades sobre ecommerce y Orbitienda. Sin spam.