Velocidad en Shopify: tema, apps e imágenes

Todas las tiendas Shopify funcionan sobre los mismos servidores y la misma CDN, así que una tienda lenta lo es por lo que carga: el tema, los scripts de las apps, las imágenes y los vídeos. Optimizar la velocidad en Shopify consiste en quitar y aligerar todo eso, no en cambiar de hosting. En la mayoría de las tiendas, las mayores mejoras vienen de quitar código de apps que no se usan, comprimir la imagen principal y cargar los widgets más tarde.

Esta guía muestra cómo medir bien la velocidad y después repasa las correcciones en el orden en que suelen dar resultado. Forma parte de la guía de SEO para Shopify.

Mide las páginas correctas

Prueba una página de producto y una de colección, no solo la portada. Son las páginas que posicionan y a las que llegan los compradores.

• Google PageSpeed Insights da puntuaciones de laboratorio de una sola carga y, si tu tienda tiene suficientes visitas, Core Web Vitals reales de usuarios de Chrome de los últimos 28 días. Los datos de usuarios reales son los que usa Google.
• El informe de Core Web Vitals de Search Console agrupa tus URL por estado, para que veas si todas las páginas de producto comparten un problema.
• El informe de rendimiento web de Shopify, en Analytics, muestra las mismas métricas de usuarios reales a lo largo del tiempo, algo útil para comprobar si un cambio ha servido.

Céntrate en las tres Core Web Vitals: Largest Contentful Paint (lo rápido que aparece la imagen o el texto principal), Interaction to Next Paint (lo rápido que responde la página a un toque) y Cumulative Layout Shift (cuánto se mueven las cosas). Las puntuaciones de laboratorio varían de una prueba a otra; no persigas un 100 perfecto.

1. Quita el código de apps que no usas

Las apps son la causa más común de una tienda Shopify lenta. Cada una que toca la tienda puede añadir JavaScript y CSS a todas las páginas.

• Haz una lista de tus apps. Desinstala las que ya no uses.
• Desinstalar no siempre quita el código que la app añadió al tema. Busca el nombre de la app en los archivos del tema (Online Store > Themes > Edit code) y elimina los fragmentos y etiquetas script que queden.
• Prefiere apps que usen extensiones de tema (bloques de app que añades en el editor del tema). Se quitan limpiamente al desinstalarlas y solo cargan donde las colocas.
• En las apps que conserves, comprueba si cargan en todas las páginas. Una tabla de tallas solo hace falta en las páginas de producto.

2. Arregla la imagen más grande

En la mayoría de las páginas de producto y de colección, el elemento más grande es una foto de producto o un banner principal. Haz que cargue rápido:

• Sube archivos razonables. Redimensiona las fotos a unos 2.000 a 2.500 píxeles de ancho antes de subirlas y comprímelas. La CDN de Shopify sirve versiones redimensionadas y formatos modernos como WebP automáticamente, pero un original enorme sigue costando tiempo.
• No apliques carga diferida a la primera imagen. Las imágenes de la parte superior deben cargar de inmediato. La carga diferida es para las imágenes de más abajo.
• Usa imágenes adaptables. Los temas actuales usan los filtros image_url e image_tag de Shopify para servir el tamaño adecuado a cada pantalla. Los temas antiguos pueden servir un único tamaño grande a todos los dispositivos.
• Evita los vídeos en reproducción automática en la cabecera. Si necesitas vídeo, muestra primero una imagen de portada y carga el vídeo después.

3. Carga los widgets más tarde

Las reseñas, las burbujas de chat, los pop-ups, los carruseles de venta adicional y los feeds de redes sociales rara vez necesitan cargar antes que el producto.

• Carga el chat y los pop-ups cuando la página ya sea interactiva o tras un retraso.
• Coloca los widgets de reseñas por debajo de la primera pantalla para que no bloqueen el contenido principal. Mantén el texto de las reseñas en el HTML de la página por el SEO.
• Quita los píxeles de seguimiento de terceros que ya no consultas. Cada uno es otro script.

4. Usa un tema actual

Los temas creados para Online Store 2.0, incluidos los temas gratuitos de Shopify basados en Dawn, están pensados para bloques de app, imágenes adaptables y un JavaScript más ligero. Un tema de hace varios años con sliders pesados y jQuery puede ser lento quites lo que quites.

Antes de cambiar, prueba la página de producto de demostración del tema nuevo en PageSpeed Insights. Un tema que es lento en su propia demo también lo será con tus productos.

5. Evita los saltos de diseño

El contenido que salta mientras carga la página empeora el Cumulative Layout Shift y molesta a los compradores.

• Da ancho y alto a las imágenes (el filtro image_tag de Shopify los añade).
• Reserva espacio para los banners y las barras de anuncios que aparecen tras la carga.
• Carga las fuentes personalizadas con font-display: swap y limita el número de pesos.

Lo que apenas ayuda

• Apps aceleradoras. La mayoría añaden su propio script a la página. Quitar código es mejor que añadirlo.
• Cambiar de hosting o de CDN. En Shopify no puedes, y no lo necesitas.
• Minificar unos pocos kilobytes de CSS. Rara vez mueve las métricas de usuarios reales comparado con quitar una app o arreglar la imagen principal.

Mantenla rápida

La velocidad empeora a medida que añades apps y secciones. Vuelve a probar una página de producto después de cada app nueva y revisa el informe de Core Web Vitals cada mes. Una auditoría de sitio, como la de zaDojo, señala las páginas lentas y las imágenes demasiado pesadas en toda la tienda, para que no tengas que probar las páginas de una en una.

Preguntas frecuentes

¿La velocidad de Shopify afecta al SEO? Sí, un poco. Las Core Web Vitals son una señal de posicionamiento, pero el contenido y la relevancia pesan más. La velocidad importa más para las ventas: los compradores abandonan las páginas de producto lentas.

¿Qué es una buena puntuación de velocidad en Shopify? Apunta a Core Web Vitals "buenas" en datos de usuarios reales (Largest Contentful Paint por debajo de 2,5 segundos, Interaction to Next Paint por debajo de 200 milisegundos, Cumulative Layout Shift por debajo de 0,1). La puntuación de laboratorio sobre 100 es una orientación, no un objetivo.

¿Por qué mi tienda Shopify va lenta en el móvil? Los móviles tienen procesadores y conexiones más lentos, así que el JavaScript pesado de las apps les afecta mucho más. Prueba primero en el móvil.