Introducción: Por qué el rendimiento es ahora un factor de posicionamiento
Desde mayo de 2021, los Core Web Vitals son oficialmente un factor de posicionamiento en Google. Esto significa: una tienda rápida se posiciona mejor que una lenta, incluso si el contenido es idéntico.
Más importante aún: La tasa de conversión y los Core Web Vitals están directamente correlacionados. Los estudios muestran:
- Cada segundo de retraso te cuesta un 7% en conversiones
- Una tienda con Core Web Vitals calificados como "buenos" convierte un 24% mejor que una con calificación "deficiente"
- El rendimiento móvil es decisivo: el 65% del tráfico e-commerce proviene de dispositivos móviles
Para las tiendas Shopify esto es especialmente importante porque:
- Muchas apps ralentizan el rendimiento
- Los scripts de terceros (analítica, tracking, marketing) se vuelven rápidamente incontrolables
- Mobile-First Indexing favorece las páginas móviles rápidas
En smplx. hemos llevado tiendas como Bekateq de 4,2 segundos a 2,1 segundos de LCP, aumentando su tasa de conversión en un 18%.
En este artículo te mostramos cómo dominar los Core Web Vitals.
1. Comprender los tres Core Web Vitals
LCP (Largest Contentful Paint) – Percibir la velocidad
¿Qué es LCP? LCP mide la rapidez con la que carga el contenido visible más grande. Normalmente es:
- Una imagen de producto
- Un banner hero
- Un bloque de texto
Referencia:
- Verde (bueno): < 2,5 segundos
- Naranja (necesita mejora): 2,5 – 4,0 segundos
- Rojo (deficiente): > 4,0 segundos
Cómo mide Google el LCP:
El usuario inicia la página
↓
[0s] Blanco
[0,5s] Aparece el logo
[1,2s] El texto se hace visible
[2,0s] LA IMAGEN HERO CARGA ← Este es tu LCP
[2,5s] Cargan elementos adicionales
Por tanto, el LCP no es el tiempo hasta que la página se carga completamente, sino hasta que el elemento más grande es visible.
INP (Interaction to Next Paint) – Sentir la respuesta
¿Qué es INP? INP mide el tiempo entre la acción del usuario y la respuesta visual:
- El usuario hace clic en el botón de filtro
- [Retraso] ← Esto es INP
- Se aplican los filtros
Referencia:
- Verde: < 200 milisegundos
- Naranja: 200 – 500 ms
- Rojo: > 500 ms
Problemas típicos de INP en Shopify:
- Los botones de filtro/ordenación responden lentamente
- Las opciones de producto (color, talla) cambian con retraso
- El botón de añadir al carrito se congela
- Las sugerencias de búsqueda tardan demasiado
CLS (Cumulative Layout Shift) – Sentir la estabilidad
¿Qué es CLS? CLS mide cuánto se desplaza inesperadamente el diseño. Cada movimiento es frustrante:
Ejemplo de mal CLS:
El usuario ve el precio: 89,99€
El usuario quiere hacer clic
[Se carga el símbolo de moneda] ← El diseño se desplaza 0,05 unidades
El usuario hace clic demasiado pronto o falla
Referencia:
- Verde: < 0,1
- Naranja: 0,1 – 0,25
- Rojo: > 0,25
Principales causas de CLS en Shopify:
- Imágenes sin altura definida
- Anuncios/pop-ups incrustados
- Imágenes con carga diferida
- Fuentes que aún están cargando
2. Optimizar LCP: La estrategia de imagen hero
Problema: Las imágenes hero suelen ser demasiado grandes
Una imagen hero típica en Shopify:
- Tamaño: 2-5 MB (sin comprimir)
- Formato: JPG
- Resolución: 1920x1200px
Esto puede significar 4-6 segundos de LCP, especialmente en móvil.
Solución: WebP + Imágenes responsive
Paso 1: Usar formato WebP
WebP es un 25-35% más pequeño que JPG, con la misma calidad.
<!-- Shopify Section Code -->
<picture>
<source srcset="{{ 'hero.webp' | asset_url }}" type="image/webp">
<img src="{{ 'hero.jpg' | asset_url }}" alt="Hero Banner" loading="eager">
</picture>
Paso 2: Definir tamaños de imágenes responsive
<img
src="{{ hero_image | img_url: '800x600' }}"
srcset="{{ hero_image | img_url: '400x300' }} 400w,
{{ hero_image | img_url: '800x600' }} 800w,
{{ hero_image | img_url: '1200x900' }} 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1024px) 800px,
1200px"
alt="Hero"
loading="eager">
Esto asegura:
- Móvil recibe la imagen de 400px (en lugar de 1920px)
- Tablet recibe la imagen de 800px
- Escritorio recibe la imagen de 1200px
Resultado: LCP de 4,2s a 2,1s (típico para optimizaciones similares a Bekateq)
Paso 3: Precargar recursos críticos
Añadir en el <head> del theme:
<link rel="preload" as="image" href="{{ 'hero.webp' | asset_url }}" imagesrcset="{{ 'hero-400.webp' | asset_url }} 400w, {{ 'hero-800.webp' | asset_url }} 800w" imagesizes="(max-width: 600px) 400px, 800px">
<link rel="preload" as="font" href="{{ 'font.woff2' | asset_url }}" type="font/woff2" crossorigin>
Preload le dice al navegador: "Este recurso es importante, cárgalo inmediatamente."
3. Prevenir CLS: Estabilidad del diseño
Errores de CLS más comunes en Shopify y soluciones
Error 1: Imágenes sin aspect ratio definido
<!-- MAL: El navegador no sabe cuánto espacio reservar -->
<img src="product.jpg" alt="Product">
<!-- BIEN: Con CSS Aspect Ratio -->
<img
src="product.jpg"
alt="Product"
width="400"
height="400"
style="aspect-ratio: 1;">
Error 2: Imágenes con carga diferida sin contenedor
/* MAL: No se reserva espacio */
.product-image {
width: 100%;
/* ¡Falta la altura! */
}
/* BIEN: Truco de padding-bottom */
.product-image-container {
position: relative;
width: 100%;
padding-bottom: 100%; /* Aspect Ratio 1:1 */
}
.product-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
Error 3: Las fuentes cargan y cambian el diseño
/* MAL: La fuente de respaldo causa desplazamiento */
body {
font-family: 'Roboto', sans-serif;
}
/* BIEN: Cargar Roboto sin desplazamiento */
@font-face {
font-family: 'Roboto';
src: url('roboto.woff2') format('woff2');
font-display: swap; /* Mostrar respaldo, reemplazar después */
}
Con font-display: swap, la página se muestra inmediatamente con la fuente de respaldo, y Roboto carga en segundo plano.
Error 4: Anuncios y pop-ups inyectados (Google Ads, Intercom, etc.)
// MAL: El anuncio se inyecta, desplaza el diseño
<div id="ad-container"></div>
<script>
// El anuncio se carga después
loadAd();
</script>
// BIEN: Contenedor con altura fija
<div id="ad-container" style="height: 250px; overflow: hidden;"></div>
<script>
loadAd(); // Se ajusta al contenedor
</script>
4. Optimizar INP: Interacciones rápidas
El problema de INP en Shopify
El mayor asesino de INP en Shopify es demasiado JavaScript:
Demasiadas apps instaladas
- Cada app inyecta JavaScript
- 10 apps = potencialmente 500KB+ de JavaScript extra
Event listeners pesados
- Las opciones de producto (selección de variantes) suelen ser lentas
- La aplicación de filtros tarda demasiado
Scripts que bloquean el renderizado
- Analítica, código de tracking bloquea el renderizado de la página
Solución: Optimizar JavaScript
Paso 1: Menos apps
Audita tus apps instaladas:
Admin > Apps y canales > Apps y canales de venta
Preguntas:
- ¿Realmente necesito esta app?
- ¿Puede otra app asumir 2-3 funciones?
- ¿La app causa pérdidas de rendimiento notables?
Efecto: Cada app eliminada ahorra 10-50KB de JavaScript.
Paso 2: Cargar scripts de terceros de forma asíncrona
<!-- MAL: Bloquea el renderizado de la página -->
<script src="analytics.js"></script>
<!-- BIEN: Carga asíncrona -->
<script async src="analytics.js"></script>
<!-- BIEN: Carga diferida (después de cargar la página) -->
<script defer src="analytics.js"></script>
Paso 3: División de código JavaScript
Si tu theme tiene mucho JavaScript personalizado, divídelo:
// MAL: Todo en un bundle grande
// main.js = 250KB (página de producto, checkout, etc. todo incluido)
// BIEN: Dividir por página
// products.js = 80KB (solo página de producto)
// checkout.js = 60KB (solo checkout)
// common.js = 50KB (en todas las páginas)
Paso 4: Optimización de event listeners
Para el selector de variantes (a menudo muy lento):
// MAL: Event listener en CADA botón de variante
document.querySelectorAll('.variant-btn').forEach(btn => {
btn.addEventListener('click', updatePrice); // Modifica DOM
btn.addEventListener('click', updateImage); // Modifica DOM
btn.addEventListener('click', updateInventory); // Modifica DOM
});
// BIEN: Event delegation + actualizaciones agrupadas
document.addEventListener('click', (e) => {
if (e.target.matches('.variant-btn')) {
const updates = {
price: calculatePrice(),
image: getImage(),
inventory: getInventory()
};
// Todas las actualizaciones en un solo paso de renderizado
updateDOM(updates);
}
});
5. Caso de estudio: Bekateq – De 4,2s a 2,1s LCP
Bekateq es una tienda e-commerce B2B para distribución a gran escala con 24 plantillas de producto y altas exigencias de rendimiento.
Punto de partida:
- LCP: 4,2 segundos
- CLS: 0,18 (naranja)
- INP: 280ms (naranja)
Problemas identificados:
- Las imágenes hero eran JPGs de 3-4 MB, faltaban imágenes responsive
- 12 apps instaladas, muchas rastreando cada vista de página
- Sin lazy loading en imágenes de producto
- El selector de variantes activaba un re-renderizado completo del DOM
Optimizaciones implementadas:
- LCP: Conversión a WebP + tamaños de imagen responsive → LCP baja a 2,1s
- CLS: Definición de aspect ratio en todas las imágenes → CLS baja a 0,05
- INP: 3 apps redundantes desinstaladas, event listeners optimizados → INP baja a 140ms
Resultados:
- Visibilidad: +34%
- Tráfico orgánico: +47%
- Tasa de conversión: +18%
- Tasa de rebote: -22%
6. Cuellos de botella de rendimiento específicos de Shopify
Apps y su impacto en el rendimiento
Apps pesadas (>100KB JavaScript):
- Apps de reseñas de productos
- Herramientas de chat en vivo
- Gestión de inventario
- Analítica avanzada
Alternativa: Usar funciones nativas de Shopify donde sea posible.
Scripts de terceros
Los mayores asesinos de rendimiento:
1. Google Tag Manager (GTM): +50KB
2. Facebook Pixel: +40KB
3. Intercom / Chat en vivo: +100KB
4. Zendesk: +80KB
5. Herramienta de afiliados: +60KB
Solución: Diferir y cargar scripts condicionalmente
<!-- Cargar chat solo en páginas de producto -->
<script>
if (window.location.pathname.includes('/products/')) {
const s = document.createElement('script');
s.src = 'chat.js';
document.body.appendChild(s);
}
</script>
7. Monitorizar Core Web Vitals en Shopify Admin
Usar Google PageSpeed Insights
- Ve a PageSpeed Insights
- Introduce la URL de tu tienda
- Consulta los análisis para móvil y escritorio
Importante: PSI usa FieldData (usuarios reales) de los usuarios de Chrome. Por eso los valores pueden cambiar a diario.
Informe de Search Console
En Google Search Console (configurada para tu tienda):
- Abrir el informe "Core Web Vitals"
- Ver cuántas páginas están en la zona verde, naranja o roja
- Hacer clic en un problema para ver las URLs afectadas
Ejemplo:
- 85% de las páginas tienen Core Web Vitals "buenos" → Bien
- 10% de las páginas "necesitan mejora" → ¡A trabajar!
- 5% de las páginas son "deficientes" → Corregir urgentemente
Monitorización propia con la librería Web Vitals
También puedes medir los Core Web Vitals tú mismo:
// Integrar en el theme
<script>
// Medir LCP
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1];
console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime);
});
observer.observe({entryTypes: ['largest-contentful-paint']});
// Medir CLS
let clsValue = 0;
const clsObserver = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!entry.hadRecentInput) {
clsValue += entry.value;
}
}
console.log('CLS:', clsValue);
});
clsObserver.observe({entryTypes: ['layout-shift']});
</script>
8. Establecer presupuestos de rendimiento
¿Qué es un presupuesto de rendimiento?
Un presupuesto de rendimiento es un "límite máximo" que no debes superar:
Presupuesto LCP: 2,5 segundos
Presupuesto CLS: 0,1
Presupuesto INP: 200ms
Tamaño bundle JS: 250KB
Tamaño bundle CSS: 50KB
Tamaño total de imágenes: 500KB
Beneficio: Si una nueva app es demasiado pesada, se rechaza.
Hacer cumplir el presupuesto
- Para nuevas apps: "¿Esta app llevará el LCP por encima de 2,5s?" → ¿No? → Instalar
- Para nuevas funciones: "¿Este código personalizado causará CLS?" → ¿No? → Programar
- Revisiones: Verificar cada 3 meses si se mantiene el presupuesto
9. La optimización de rendimiento de smplx.
Auditoría y optimización de rendimiento Shopify (desde 6k €):
- Análisis exhaustivo de Core Web Vitals (LCP, CLS, INP)
- Optimización de imágenes y conversión a WebP
- Minificación de JavaScript y code splitting
- Implementación de lazy loading
- Auditoría de apps y recomendaciones
- Correcciones de rendimiento personalizadas
- Optimización de Google PageSpeed
Monitorización continua de rendimiento (desde 1,5k €/mes):
- Informes mensuales de Core Web Vitals
- Detección de regresiones de rendimiento
- Pruebas de rendimiento de apps
- Recomendaciones de optimización trimestrales
Esta inversión se amortiza rápidamente gracias a las mayores conversiones.
10. Quick wins de rendimiento (implementables de inmediato)
- Comprimir imágenes: Usar TinyPNG o el editor de imágenes nativo de Shopify
- Activar lazy loading:
loading="lazy"en las imágenes de producto - JavaScript que bloquea el renderizado: Usar async/defer
- Cachear favicon: Ahorrar muchas peticiones pequeñas
- Caché del navegador: Shopify lo hace automáticamente, verifica los headers
Conclusión: El rendimiento ya no es un lujo
Los Core Web Vitals son ahora parte del algoritmo de posicionamiento de Google. Una tienda lenta es penalizada no solo por los usuarios, sino también por Google.
La buena noticia: muchas optimizaciones son relativamente sencillas y tienen un ROI masivo:
- Mejor posicionamiento
- Mayores tasas de conversión
- Mejor experiencia de usuario
- Menor tasa de rebote
Próximos pasos:
- Abrir PageSpeed Insights y verificar los valores actuales
- Search Console > Informe Core Web Vitals
- Identificar los 3 problemas principales
- Priorizar por impacto (LCP > CLS > INP)
Si necesitas optimizaciones de rendimiento exhaustivas, contacta al equipo de smplx. Optimizamos tiendas Shopify a diario y sabemos exactamente qué palancas aportan más ganancia de rendimiento.
Contacto: hello@smplx.de | Coesfeld, NRW