Dónde se va el tiempo
- Apps que inyectan JavaScript y CSS en todas las páginas, incluidas aquellas en las que no hacen nada.
- Código que dejan las apps desinstaladas; quitar una app no siempre limpia el tema.
- Sliders en la portada, vídeos con reproducción automática e imágenes a ancho completo mucho más grandes que la pantalla.
- Etiquetas de terceros: chat, reseñas, ventanas emergentes, mapas de calor, varios píxeles de analítica y de publicidad.
- Varias fuentes web en muchos grosores.
Empieza por medir
Ejecuta PageSpeed Insights en tres plantillas (la página de inicio, una página de colección y una página de producto) en móvil. Anota el LCP, el TBT y los recursos más pesados. El informe de rendimiento web del propio Shopify, en el panel de administración, muestra los Core Web Vitals de usuarios reales cuando la tienda tiene suficiente tráfico. Si prefieres una primera lectura rápida de cualquier URL, puedes lanzar el análisis gratuito; para el contexto general, consulta medir la velocidad web.
Prueba siempre los cambios primero en un duplicado sin publicar del tema y publícalos después.
Correcciones en un orden seguro
- Revisa la lista de apps. Elimina las que ya no uses y desactiva los App embeds que no hagan falta en todas las páginas (Tienda online > Temas > Personalizar > App embeds).
- Busca en el código del tema restos de apps eliminadas (snippets y etiquetas script con el nombre de la app) y quítalos en el tema duplicado.
- Sustituye el slider de la portada por una sola imagen. Cárgala con
fetchpriority="high", no la cargues de forma diferida (lazy loading) y usa el filtroimage_urlde Shopify con un ancho razonable ysrcset. - Carga de forma diferida las imágenes que quedan fuera de la primera pantalla y asigna ancho y alto a cada imagen para evitar desplazamientos de diseño.
- Retrasa los widgets de chat, reseñas y ventanas emergentes hasta que el usuario haga scroll o interactúe, siempre que la app lo permita.
- Limita las fuentes a una sola familia en dos grosores, o usa una pila de fuentes del sistema.
- Traslada los píxeles de seguimiento a los Customer Events de Shopify, cuando sea posible, en lugar de dejarlos en el código del tema.
Cuando el problema es el propio tema
Los temas antiguos y muy personalizados suelen acumular años de scripts y estilos. Pasar a un tema actual de Online Store 2.0 y reconstruir las secciones clave a veces resulta más barato que optimizar código antiguo línea a línea. Conviene comparar ambas opciones antes de empezar.
Qué acceso necesita un desarrollador
El trabajo de velocidad requiere acceso de colaborador con permiso para editar temas y ver apps, que el propietario de la tienda concede desde el panel de administración sin compartir ninguna contraseña. El trabajo se hace en un tema duplicado, de modo que la tienda en producción no se ve afectada hasta que el propietario lo aprueba.
Preguntas frecuentes
¿Puede una tienda Shopify sacar 100 en PageSpeed?
Pocas veces en móvil, y no es el objetivo. Busca unos buenos Core Web Vitals (LCP por debajo de 2,5 s, INP por debajo de 200 ms, CLS por debajo de 0,1) para los usuarios reales.
¿Ayudan las apps que prometen acelerar la tienda?
Con cautela. Algunas solo ocultan el problema en las pruebas de laboratorio o añaden su propio script. Quitar peso es más fiable que añadir otra app.
¿Afectará el trabajo de velocidad a mis ventas o a mis apps?
No, si se hace en un tema duplicado y se comprueba cada cambio: añadir al carrito, el proceso de compra (checkout), las reseñas y el seguimiento deben funcionar igual después de publicar.
Comprueba tu web en aproximadamente un minuto
El análisis gratuito mide en tu URL los puntos de esta guía y muestra qué corregir primero.