Auditoría de velocidad de Shopify: cómo hacerla paso a paso

Arregle ahora mismo los problemas más comunes

La mayoría de las auditorías de velocidad de Shopify destapan los mismos problemas: scripts que bloquean el renderizado, fuentes sin optimizar y mala priorización de recursos. Thunder Page Speed Optimizer los arregla automáticamente:

• Aplaza el JavaScript no crítico que bloquea el renderizado de la página
• Inserta el CSS crítico en línea para mostrar de inmediato la parte visible
• Optimiza la carga de fuentes para evitar texto invisible
• Gestiona el orden de carga de recursos para unos Core Web Vitals óptimos

Instale Thunder primero y luego haga la auditoría para identificar los problemas restantes. Empiece con un test de velocidad gratuito para ver su línea base actual.

Qué necesita antes de empezar

Una auditoría de velocidad de Shopify completa usa estas herramientas gratuitas:

También necesitará: la URL de su tienda, acceso al panel de Shopify y unos 60-90 minutos. Para más opciones de herramientas, vea nuestra guía completa de herramientas de test de velocidad para Shopify.

Paso 1: establezca sus puntuaciones de referencia

Antes de arreglar nada, documente dónde está. Pase PageSpeed Insights por estas cuatro páginas (pruebe tanto móvil como escritorio):

1. Página de inicio — su página de mayor tráfico y la primera impresión
2. Una página de colección principal — prueba cómo gestiona su tienda las cuadrículas de productos
3. La página de su producto más vendido — donde ocurren las conversiones
4. Una entrada de blog o página de contenido — normalmente la más ligera, útil como comparación

Anote estas cifras en una hoja de cálculo:

Paso 2: revise los Core Web Vitals de usuarios reales

Las puntuaciones de laboratorio (PageSpeed Insights) prueban en condiciones controladas. Los datos de usuarios reales muestran cómo experimentan la tienda los clientes de verdad. Abra Google Search Console → Core Web Vitals.

Verá las páginas agrupadas por estado:

• Buenas — aprueban las tres métricas (LCP < 2.5 s, CLS < 0.1, INP < 200 ms)
• Necesitan mejorar — una o más métricas en la zona de aviso
• Deficientes — una o más métricas suspendidas

Estos datos son especialmente valiosos porque reflejan condiciones de navegación reales — velocidades de dispositivo reales, conexiones de red reales, comportamiento real del cliente. Si sus puntuaciones de laboratorio parecen decentes pero los datos reales de CWV marcan "deficiente", sus clientes con móviles más lentos están teniendo una mala experiencia.

Anote qué métrica suspende con más frecuencia:

• ¿Suspende el LCP? → Céntrese en las imágenes principales, las fuentes y los recursos que bloquean el renderizado
• ¿Suspende el CLS? → Céntrese en las dimensiones de las imágenes, la inyección de contenido dinámico y las correcciones de saltos de diseño
• ¿Suspende el INP? → Céntrese en la optimización de JavaScript y la capacidad de respuesta a las interacciones

Para entender a fondo estas métricas, lea nuestra guía de Core Web Vitals para Shopify.

Paso 3: audite el impacto de las apps en la velocidad

Las apps son la causa número 1 de las tiendas Shopify lentas. Este paso por sí solo suele revelar el 50-70% de sus problemas de velocidad.

Método rápido: la pestaña Network de Chrome DevTools

1. Abra su tienda en Chrome → pulse F12 → haga clic en la pestaña "Network"
2. Marque "Disable cache" y recargue la página
3. Filtre por "JS" (JavaScript) — ordene por tamaño (de mayor a menor)
4. Busque URLs de scripts con nombres de apps, cdn.shopify.com/extensions o dominios de terceros
5. Anote el número total de peticiones y el tamaño total transferido

Objetivos saludables:

Método a fondo: pruebe con las apps desactivadas

La prueba más reveladora: desactive temporalmente todas las apps y mida la diferencia de velocidad. Si su tienda salta de un 30 a un 75, las apps son su problema principal.

1. Vaya al panel de Shopify → Configuración → Apps y canales de venta
2. Anote su puntuación actual de PageSpeed
3. Desactive las apps de una en una, probando tras cada una
4. Registre qué apps causan las mayores caídas de puntuación
5. Reactive las apps al terminar

Para un análisis más profundo, use nuestro analizador de tiendas Shopify para ver exactamente qué scripts carga cada app.

Paso 4: identifique los recursos que bloquean el renderizado

Los recursos que bloquean el renderizado son archivos CSS y JavaScript que impiden al navegador mostrar la página hasta que se descargan y procesan por completo. Son la razón principal de los tiempos de LCP altos.

Revise PageSpeed Insights — busque en "Oportunidades":

• "Eliminar los recursos que bloquean el renderizado" — lista cada archivo CSS y JS que bloquea el renderizado de la página. Haga clic para expandir y ver el ahorro potencial.
• "Reducir el CSS sin usar" — CSS que se descarga pero no se usa en esa página. Habitual con hojas de estilo grandes de tema.
• "Reducir el JavaScript sin usar" — código JS que se descarga pero no se ejecuta. A menudo de apps que cargan su paquete completo en páginas donde no se necesitan.

Culpables habituales del bloqueo de renderizado en Shopify

Thunder elimina los recursos que bloquean el renderizado automáticamente, aplazando los scripts no críticos e insertando el CSS crítico en línea. Es la optimización de mayor impacto para la mayoría de las tiendas Shopify.

Paso 5: revise la optimización de imágenes

Las imágenes suelen ser los recursos más pesados de cualquier página de Shopify. Compruebe estos problemas:

Tamaño y formato de las imágenes

En Chrome DevTools → Network → filtre por "Img" — revise el tamaño total de las imágenes y el de cada archivo.

• Imágenes principales/banners de más de 200 KB: comprima o redimensione. Objetivo: 80-150 KB para las imágenes principales.
• Imágenes de producto de más de 100 KB: Shopify comprime automáticamente, pero el archivo original importa. Suba imágenes de 2048x2048 como máximo.
• Imágenes que no están en WebP/AVIF: el CDN de Shopify sirve WebP automáticamente cuando el navegador lo admite — verifíquelo en la columna "Type" de la pestaña Network.
• Imágenes con dimensiones incorrectas: una imagen de 3000x3000 mostrada a 300x300 desperdicia ancho de banda. Use el filtro image_url de Shopify con parámetros de ancho.

Carga diferida (lazy loading)

Las imágenes por debajo de la parte visible inicial deben usar carga diferida para descargarse solo cuando el usuario se acerca a ellas al desplazarse. Compruebe:

• Imagen principal con loading="lazy": esto está mal — la imagen principal debe cargar con prioridad, ya que es el elemento LCP
• Imágenes de la cuadrícula de productos sin carga diferida: los productos por debajo del pliegue deben cargarse en diferido
• Imágenes decorativas cargando con prioridad: sellos de confianza, iconos sociales e imágenes del pie deben cargarse en diferido

Para un enfoque completo de optimización de imágenes, vea nuestra guía de optimización de imágenes para Shopify y la guía de configuración de la carga diferida.

Paso 6: analice la calidad del código del tema

Su tema de Shopify es la base sobre la que carga todo lo demás. Un tema sobrecargado o mal programado hace que todas las demás optimizaciones sean menos eficaces.

Revisión rápida de la salud del tema

1. Compruebe la velocidad de serie del tema: use Shopify Tienda online → Temas → haga clic en el nombre de su tema → sección "Velocidad". Shopify ofrece una calificación de velocidad de referencia.
2. Cuente las secciones del tema en la página de inicio: cada sección añade HTML, CSS y a veces JavaScript. Más de 15-20 secciones en una página es una preocupación de rendimiento. Revise si usa secciones que podría quitar.
3. Busque JavaScript en línea: busque etiquetas <script> en los archivos de sección del tema. Los scripts en línea de las secciones cargan en cada página que las incluye.
4. Busque bucles Liquid excesivos: la lógica Liquid compleja (bucles for anidados, consultas pesadas de metafields) ralentiza el renderizado en servidor y aumenta el TTFB (Time to First Byte).

Señales de alarma en el tema

Si el tema es el cuello de botella, considere cambiar a un tema de Shopify más rápido. Dawn (el predeterminado de Shopify) es uno de los más rápidos disponibles. Consulte nuestro ranking de los temas gratuitos más rápidos para ver alternativas.

Paso 7: inspeccione los scripts de terceros

Más allá de las apps, su tienda probablemente carga scripts de servicios externos — analítica, píxeles de marketing, widgets de chat, plataformas de reseñas y más. Estos scripts de terceros suelen tener el mayor impacto en la velocidad porque cargan desde servidores externos lentos.

Cómo encontrar los scripts de terceros

1. En Chrome DevTools → pestaña Network, mire la columna "Domain"
2. Cualquier dominio que no sea cdn.shopify.com ni el de su tienda es de terceros
3. Anote cada dominio único y el total de datos cargados desde él

Infractores habituales entre los scripts de terceros

Priorice sus correcciones: el plan de acción de la auditoría

Tras completar los 7 pasos tendrá una lista de problemas. Así se priorizan para el máximo impacto:

Prioridad 1: victorias rápidas (esta semana)

• Instale Thunder Page Speed Optimizer para el aplazamiento automático de scripts y el CSS crítico
• Elimine las apps sin usar (cualquier app que no contribuya activamente a los ingresos)
• Comprima las imágenes sobredimensionadas (todo lo que supere los 200 KB)
• Añada font-display: swap a las declaraciones de fuentes

Prioridad 2: esfuerzo medio (este mes)

• Aloje las Google Fonts en su propio sitio
• Implemente la carga diferida para las imágenes bajo el pliegue
• Consolide las apps que se solapan (3 herramientas de popups → 1)
• Aplace los scripts de terceros no esenciales (chat, reseñas fuera de las páginas de producto)

Prioridad 3: mayor esfuerzo (este trimestre)

• Migración de tema si el actual es lento de raíz
• Migración a seguimiento del lado del servidor para los píxeles de marketing
• Limpieza del código sobrante de apps desinstaladas
• Montar una monitorización del rendimiento continua

Después de la auditoría: cómo mantener la velocidad

Una auditoría de velocidad solo vale si se actúa sobre ella y se evitan las regresiones. Establezca estas prácticas continuas:

• Comprobación rápida mensual: pase PageSpeed Insights por la página de inicio y la principal página de producto. Compare con su línea base. Lleva 5 minutos.
• Antes de instalar cualquier app nueva: haga un test de velocidad antes y después de la instalación. Si la app baja la puntuación 10+ puntos, busque alternativas.
• Tras actualizar el tema: las actualizaciones de tema pueden introducir scripts nuevos o cambiar la carga de recursos. Pruebe siempre la velocidad después de actualizar.
• Auditoría completa trimestral: repita todo este proceso de 7 pasos cada 3 meses. Las tiendas acumulan deuda de velocidad con el tiempo a medida que se amontonan apps, secciones y personalizaciones.

Para la monitorización continua entre auditorías, monte una monitorización del rendimiento automatizada con alertas de Google Search Console y pruebas sintéticas. Nuestra guía completa de optimización de velocidad cubre las estrategias de mantenimiento a largo plazo.

Preguntas frecuentes

Su auditoría de velocidad es la línea de salida

Hacer una auditoría de velocidad de Shopify no es un evento puntual — es la base de una gestión de rendimiento continua. Los 7 pasos de esta guía dan una imagen completa de lo que ralentiza su tienda: desde la sobrecarga de apps y los scripts que bloquean el renderizado hasta la optimización de imágenes y la calidad del código del tema.

El camino más rápido a los resultados: instale Thunder Page Speed Optimizer para las optimizaciones automáticas y use los hallazgos de la auditoría para mejoras manuales dirigidas. La mayoría de las tiendas obtienen sus mayores ganancias de la combinación de gestión automática de scripts y limpieza manual de apps.

Empiece ahora. Haga su test de velocidad gratuito y siga esta guía paso a paso. Sus clientes — y Google — notarán la diferencia.