Fecha de publicación: 24 de junio de 2026
Nuvemshop (conocida como Tiendanube en Latinoamérica de habla hispana) es la plataforma de comercio electrónico líder en la región, que impulsa más de 180,000 tiendas en línea. Dado que los comerciantes personalizan sus escaparates a través de varios temas y disposiciones de contenido dinámico, garantizar cargas de página rápidas en esta diversidad presenta desafíos técnicos únicos.
- El estado de Largest Contentful Paint (LCP) mejoró un 68%, de un 57% a un 96% en un año, lo que refleja un cambio importante en la forma en que las tiendas renderizan el contenido en la parte superior del viewport para los usuarios reales.
- El porcentaje de aprobación deCore Web Vitals aumentó de un 48% a un 72% , lo que significa que casi 3 de cada 4 tiendas ahora cumplen con el umbral de rendimiento de referencia de Google.
- La participación en Shopping mejoró de forma significativa: Al analizar la misma cohorte de tiendas brasileñas activas en enero de 2025 y enero de 2026, los visitantes de dispositivos móviles de la Búsqueda orgánica de Google mostraron lo siguiente:
- Aumento del 8.9% en el porcentaje de conversiones (de sesión a pedido pagado)
- Aumento del 8.4% en el porcentaje de participación en el carrito (de sesión a carrito)
- Los dispositivos móviles generaron las mayores ganancias, lo que coincide con los lugares donde las mejoras de LCP fueron más significativas.
Estos resultados se alinean con la investigación de Deloitte encargada por Google (más de 30 millones de sesiones en 37 marcas), que descubrió que una mejora de 0.1 s en la velocidad de carga puede aumentar los porcentajes de conversiones de venta minorista en un 8.4%, lo que valida la dirección de nuestras inversiones.
El desafío: Detección de LCP en diseños dinámicos de comercio electrónico
A principios de 2025, solo el 48% de nuestras tiendas aprobó los umbrales de Core Web Vitals, y el 57% tenía puntuaciones de LCP saludables. Nuestra hipótesis inicial era el peso de la imagen o la latencia del servidor. Estábamos equivocados.
A través del análisis de PageSpeed Insights en miles de tiendas, descubrimos que nuestra plataforma permite a los comerciantes organizar las secciones de la página principal de forma dinámica: los carruseles, los banners, las cuadrículas de productos y los módulos personalizados pueden aparecer en cualquier orden.
Esta flexibilidad introdujo un problema imprevisto: no siempre se identificaba el elemento correcto como LCP. En las tiendas con carruseles, que representaban el 85% de nuestros escaparates, a veces se marcaba un banner más abajo en el viewport como LCP en lugar de la primera imagen del carrusel, según cómo se renderizaba la página en diferentes pantallas y dispositivos. Esto significaba que nuestros esfuerzos de optimización no estaban teniendo el efecto deseado: estábamos optimizando elementos que en realidad no eran elementos LCP.
A diferencia de las plataformas SaaS típicas, no podíamos simplemente corregir la página principal. Necesitábamos una solución que funcionara en todas las configuraciones de temas, disposiciones de secciones y personalizaciones de comerciantes posibles, sin interrumpir las tiendas existentes ni limitar la libertad creativa.
Cómo afectan los diseños dinámicos a la selección de elementos LCP
A través del análisis de PageSpeed Insights y la supervisión de usuarios reales, descubrimos que las transiciones de CSS en carruseles y banners se retrasaban cuando los elementos se volvían visibles para el algoritmo de detección de LCP del navegador. Aunque los usuarios percibían que el carrusel se cargaba primero, el navegador a veces marcaba un banner en la segunda sección como el elemento LCP, ya que la visibilidad de ese elemento no se retrasaba por los efectos de transición.
Identificamos tres causas raíz:
- Las transiciones de CSS se retrasaban cuando los elementos se consideraban visibles, lo que enviaba la detección de LCP al marco incorrecto.
- Se aplicó la carga diferida a las imágenes en la parte superior del viewport que debían cargarse de inmediato.
- La falta de indicadores de prioridad significaba que las imágenes más importantes no se cargaban primero.
También descubrimos que una parte importante de las mediciones de LCP provenía de las páginas de categorías y productos, no solo de las páginas principales, lo que significa que nuestras correcciones debían aplicarse de manera coherente en todos los tipos de páginas con mucho tráfico.
Implementación: Corrección de las tres causas raíz a gran escala
Una vez que se identificaron las causas, las correcciones fueron sencillas. Las aplicamos de manera coherente en todos los temas principales y tipos de páginas, pero cada una requería un alcance cuidadoso para evitar crear problemas nuevos.
- Se quitaron las transiciones de CSS para las secciones de primera posición. Las secciones que aparecen primero en la página ahora se renderizan de inmediato, lo que garantiza que el navegador las detecte como candidatas a LCP sin retrasos artificiales.
Se quitó la carga diferida de las imágenes en la parte superior del viewport. Para las imágenes de la primera sección, quitamos condicionalmente
loading="lazy"para eliminar el retraso en la carga de recursos. Tuvimos cuidado de limitar esto solo a la primera imagen de las secciones de primera posición:<!-- Before --> <img src="slide-1.webp" loading="lazy" alt="Featured product"> <!-- After --> <img src="slide-1.webp" alt="Featured product">Se agregaron indicadores de prioridad explícitos. Al agregar
fetchpriority="high", le indicamos al escáner de carga previa del navegador que la imagen LCP es un recurso de máxima prioridad, lo que permite que se descubra y descargue antes, antes de que finalicen el diseño y la renderización. Agregamos lógica de validación para garantizar que los indicadores de prioridad solo se apliquen cuando el elemento esté realmente en una posición en la que pueda ser el candidato a LCP . Agregarfetchpriority="high"a demasiadas imágenes sería contraproducente, ya que, si todo es de alta prioridad, nada lo es.<!-- Before --> <img src="slide-1.webp" alt="Featured product"> <!-- After --> <img src="slide-1.webp" fetchpriority="high" alt="Featured product">Se redujo la latencia a través del almacenamiento en caché perimetral. El almacenamiento en caché es eficaz para reducir los tiempos de carga, pero, en el comercio electrónico, conlleva un riesgo real: publicar precios y datos de inventario obsoletos afecta directamente la confianza y los ingresos de los clientes. Abordamos esto con cuidado supervisando las métricas empresariales junto con los datos de rendimiento, maximizando los porcentajes de aciertos de caché y asegurándonos de nunca almacenar en caché contenido que pudiera dañar la experiencia del comerciante o del comprador.
Impacto y resultados: De un 57% a un 96% de mejora de LCP
| Métrica (de enero de 2025 a enero de 2026) | Mejora relativa |
|---|---|
| LCP (bueno) | +68% (del 57% al 96%) |
| Core Web Vitals (porcentaje de aprobación) | +50% (del 48% al 72%) |
| Porcentaje de conversiones (de sesión a pedido pagado): Búsqueda orgánica de Google en dispositivos móviles | +8.9% |
| Participación en el carrito (de sesión a carrito): Búsqueda orgánica de Google en dispositivos móviles | +8.4% |
Estas mejoras posicionaron a Nuvemshop y Tiendanube como la plataforma de comercio electrónico número 1 en rendimiento en Brasil, Argentina y México.
Conclusiones clave y reflexiones posteriores
La arquitectura altamente personalizable de Nuvemshop significaba que no podíamos depender de las guías de optimización estándar. El problema real no era el peso de la imagen ni la latencia del servidor: era que los navegadores seleccionaban elementos inesperados como LCP debido a las transiciones de CSS, la falta de indicadores de prioridad y la carga diferida aplicada a las imágenes en la parte superior del viewport.
La solución fue sencilla una vez que comprendimos las causas raíz: quitar las transiciones de las secciones de primera posición, quitar la carga diferida de las imágenes en la parte superior del viewport y agregar indicadores de prioridad explícitos. Aplicamos esto de manera coherente en todos los temas principales, tipos de páginas y las más de 180,000 tiendas de nuestra plataforma.
Los resultados hablan por sí solos: los porcentajes de aprobación de LCP pasaron del 57% al 96%, los porcentajes de aprobación generales de Core Web Vitals aumentaron del 48% al 72%, y los comerciantes obtuvieron ganancias significativas: un aumento del 8.9% en el porcentaje de conversiones y un aumento del 8.4% en la participación en el carrito en dispositivos móviles. Los escaparates rápidos no son solo un logro técnico, sino que impulsan directamente el éxito de los comerciantes.