Auditoría de velocidad Shopify:
checklist de 20 puntos que puedes hacer hoy

Tu tienda Shopify tarda más de tres segundos en cargar y no sabes por dónde empezar a investigar. Instalaste cinco apps la semana pasada, tu tema tiene sliders en cada sección y Google PageSpeed te arroja un número rojo que prefieres ignorar. El problema es real: cada segundo adicional de carga reduce las conversiones entre un 7 % y un 12 %, según datos consistentes de múltiples estudios de rendimiento web. En una tienda que operé personalmente durante años, reducir el tiempo de carga de 4.2 a 1.8 segundos incrementó la tasa de conversión un 23 % sin tocar precios ni campañas.

Esta guía es el checklist que uso cuando audito una tienda Shopify. Son 20 puntos ordenados por área, todos verificables con herramientas gratuitas. No necesitas acceso al código fuente del tema ni conocimientos avanzados de desarrollo. Solo necesitas un navegador, una hora de concentración y la disposición de anotar lo que encuentres.

Por qué la velocidad sigue siendo el factor más subestimado en Shopify

Shopify es rápido por defecto. Su CDN global, sus servidores optimizados y su infraestructura de caché hacen que una tienda nueva cargue en menos de un segundo. El problema nunca es Shopify: el problema es lo que le instalamos encima. Apps que inyectan JavaScript en cada página, imágenes de producto subidas directamente desde la cámara sin compresión, fuentes tipográficas decorativas que nadie pidió y secciones de tema que renderizan contenido invisible.

Google utiliza Core Web Vitals como señal de ranking desde 2021. Para tiendas e-commerce, donde la competencia por posiciones orgánicas es brutal, medio segundo puede significar la diferencia entre aparecer en la primera página o quedar enterrado. Pero más allá del SEO, la velocidad afecta directamente la experiencia de compra: la percepción de confianza, la retención en catálogos y el abandono de carrito.

Las herramientas gratuitas que vas a necesitar

Antes de arrancar con los 20 puntos, abre estas tres pestañas en tu navegador. Las vas a usar de forma repetida durante toda la auditoría:

Opcionalmente, WebPageTest te permite hacer pruebas desde diferentes ubicaciones geográficas y conexiones. Es gratuito y ofrece un waterfall mucho más detallado que DevTools para diagnosticar cuellos de botella en la cadena de carga.

Checklist de 20 puntos: imágenes, JavaScript, fuentes, apps y Core Web Vitals

Bloque 1 — Imágenes y media (puntos 1–5)

Las imágenes suelen representar entre el 50 % y el 70 % del peso total de una página de producto en Shopify. Es el área donde los cambios producen el impacto más inmediato.

1 Formato de imagen: ¿se sirven en WebP o AVIF?
Abre DevTools → Network → filtra por "Img". Revisa la columna "Type". Shopify convierte automáticamente a WebP si el navegador lo soporta, pero solo si usaste los tags nativos de Liquid (image_url con parámetro de formato). Si ves archivos .png o .jpg de más de 200 KB, hay un problema. AVIF ofrece entre un 30 % y un 50 % más de compresión que WebP.

2 Dimensiones reales vs. dimensiones mostradas
En DevTools, haz clic sobre cualquier imagen y compara el tamaño intrínseco (natural size) con el tamaño renderizado. Si una imagen se muestra a 400×400 px pero el archivo original es 2000×2000 px, estás transfiriendo 25 veces más píxeles de los necesarios. Shopify permite especificar width en el filtro image_url para solicitar el tamaño exacto al CDN.

3 Lazy loading en imágenes below the fold
Busca el atributo loading="lazy" en las imágenes que no son visibles en la primera pantalla. La imagen hero y el logo deben tener loading="eager" y fetchpriority="high". Todo lo demás —galería de producto, productos relacionados, banners secundarios— debe tener lazy loading. Revisa el código fuente de la página con Ctrl+U.

4 Atributos width y height explícitos
Cada etiqueta <img> debe tener width y height definidos. Sin ellos, el navegador no puede reservar el espacio antes de descargar la imagen, lo que provoca Cumulative Layout Shift (CLS). Inspecciona al menos 10 imágenes en tu página de inicio y una página de producto.

5 ¿Hay videos embedidos que cargan al inicio?
Si tienes videos de YouTube o Vimeo en tu página de inicio, cada embed carga ~800 KB de JavaScript adicional. La solución es usar una imagen de preview con un botón de play y cargar el iframe solo cuando el usuario hace clic. Revisa si tu tema usa lite-youtube o una técnica de carga diferida similar.

Bloque 2 — JavaScript y apps instaladas (puntos 6–10)

JavaScript es el recurso más costoso en términos de rendimiento porque no solo se descarga: se parsea, se compila y se ejecuta. Un archivo JS de 200 KB tiene un costo real mucho mayor que una imagen de 200 KB.

6 Cuenta tus scripts de terceros
En DevTools → Network → filtra por "JS". Ordena por tamaño. Anota cuántos scripts provienen de dominios externos (no cdn.shopify.com). Cada app instalada típicamente inyecta entre 1 y 4 archivos JavaScript. Si cuentas más de 15 scripts de terceros, tienes un problema serio.

7 Identifica apps desinstaladas que dejaron código
Ve a tu admin de Shopify → Configuración → Archivos del tema y busca en theme.liquid o snippets/ referencias a apps que ya no tienes instaladas. Es extremadamente común: desinstalas la app pero su snippet de JavaScript sigue inyectándose en cada página. Busca comentarios como <!-- Begin AppName -->.

8 Mide el Total Blocking Time (TBT)
En PageSpeed Insights, busca la métrica TBT. Valores por encima de 300 ms son problemáticos. TBT mide cuánto tiempo el hilo principal del navegador estuvo bloqueado por tareas largas de JavaScript. Es la métrica de laboratorio que mejor correlaciona con Interaction to Next Paint (INP), la Core Web Vital que mide interactividad.

9 Revisa el JavaScript no utilizado (Coverage)
En DevTools, abre el panel Coverage (Ctrl+Shift+P → "Coverage"). Recarga la página y observa las barras rojas. El porcentaje rojo indica código descargado pero no ejecutado en la carga inicial. Si un script muestra más del 70 % en rojo, probablemente se puede diferir o cargar condicionalmente.

<!-- En lugar de cargar siempre -->
<script src="app-reviews.js"></script>

<!-- Carga diferida con Intersection Observer -->
<script>
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const script = document.createElement('script');
      script.src = 'app-reviews.js';
      document.body.appendChild(script);
      observer.disconnect();
    }
  });
});
observer.observe(document.querySelector('#reviews-section'));
</script>

10 ¿Tus apps de chat y popups cargan en la primera pintura?
Widgets de chat en vivo, popups de email capture y notificaciones de compra social suelen cargar JavaScript pesado inmediatamente. Verifica si puedes configurarlos para que se carguen después de 5 segundos o al primer scroll. Muchas apps como Tidio, Klaviyo y Privy permiten esto en su configuración.

Bloque 3 — Fuentes tipográficas y CSS (puntos 11–14)

11 ¿Cuántas fuentes web estás cargando?
En DevTools → Network → filtra por "Font". Cada variante de fuente (regular, bold, italic) es un archivo separado. Más de 4 archivos de fuente es excesivo para una tienda. Cada archivo WOFF2 suele pesar entre 20 y 40 KB, y el problema no es solo el peso sino que bloquean el renderizado del texto hasta que se descargan.

12 Verifica font-display: swap
Busca en tu CSS la declaración @font-face. Debe incluir font-display: swap para que el navegador muestre texto con una fuente del sistema mientras descarga la fuente web. Sin esto, los usuarios ven texto invisible durante la carga, lo que afecta directamente LCP si tu elemento más grande es texto.

13 CSS no utilizado en la página actual
Usa el mismo panel Coverage para CSS. Los temas de Shopify suelen cargar un archivo CSS monolítico con estilos para todas las secciones posibles, incluso las que no se usan en la página. Si el CSS no utilizado supera el 80 %, considera usar content_for_header con archivos CSS por template.

14 ¿Hay @import en tus hojas de estilo?
@import dentro de CSS genera peticiones en cascada: el navegador descarga el primer CSS, lo parsea, encuentra el @import y recién entonces solicita el segundo archivo. Esto se denomina request chain y es uno de los patrones más costosos. Busca @import en tu CSS principal y reemplázalo por un <link> separado en el HTML.

Bloque 4 — Servidor, caché y configuración de Shopify (puntos 15–17)

15 Verifica que el caché del navegador funciona
En DevTools → Network, recarga la página dos veces. En la segunda carga, los recursos estáticos (imágenes, CSS, JS) deberían mostrar el estado "304" o "(from cache)" en la columna de status. Si todos muestran "200" en cada recarga, hay un problema con los headers de caché. Los assets servidos desde cdn.shopify.com normalmente incluyen headers de caché agresivos por defecto.

16 Compresión Brotli o Gzip activa
En DevTools → Network, haz clic en cualquier recurso HTML, CSS o JS y revisa los Response Headers. Busca content-encoding: br (Brotli) o content-encoding: gzip. Shopify sirve Brotli por defecto en su CDN, pero scripts de terceros que se cargan desde otros dominios podrían no tenerlo. Brotli reduce el tamaño de transferencia entre un 15 % y un 20 % más que Gzip.

17 Redirects innecesarios
Cada redirect 301 o 302 añade entre 100 y 300 ms. En DevTools → Network, activa "Preserve log" y navega por tu tienda. Busca filas con status 301/302. Los culpables habituales: links internos que apuntan a URLs antiguas, trailing slashes inconsistentes y variantes de producto con URLs canónicas mal configuradas.

Bloque 5 — Core Web Vitals y experiencia real (puntos 18–20)

18 Largest Contentful Paint (LCP) < 2.5 s
En PageSpeed Insights, identifica cuál es tu elemento LCP. Suele ser la imagen hero o el banner principal. Si el LCP es texto, probablemente las fuentes web están bloqueando el renderizado. Si es una imagen, aplica los puntos 1–4 de esta lista. Un LCP por encima de 2.5 segundos se considera "necesita mejorar"; por encima de 4 segundos, "pobre".

19 Interaction to Next Paint (INP) < 200 ms
INP reemplazó a First Input Delay como Core Web Vital en marzo de 2024. Mide la latencia de todas las interacciones del usuario, no solo la primera. Haz clic en botones de agregar al carrito, selectores de variante y menús de navegación mientras grabas un trace en DevTools → Performance. Busca "long tasks" (barras rojas) que coincidan con tus clics.

20 Cumulative Layout Shift (CLS) < 0.1
CLS mide cuánto se mueve el contenido visible mientras la página carga. Los culpables principales en Shopify: imágenes sin dimensiones, fuentes web que cambian el tamaño del texto al cargarse (FOUT), banners de cookies que empujan contenido y sliders que se inicializan tarde. En DevTools → Performance, activa "Layout Shift Regions" para ver exactamente qué elementos se mueven.

Cómo priorizar los hallazgos de tu auditoría

Después de completar los 20 puntos vas a tener una lista de problemas. No intentes arreglarlos todos al mismo tiempo. La priorización correcta es clave para obtener resultados visibles rápido y mantener la motivación.

El patrón que he visto repetirse es siempre el mismo: las apps abandonadas y las imágenes sin optimizar representan el 80 % de los problemas. Son los puntos de menor esfuerzo y mayor impacto. Una tienda con 12 apps activas y 5 desinstaladas con código residual puede reducir su tiempo de carga a la mitad simplemente limpiando lo que sobra.

De la auditoría a la acción: un plan de ejecución en 4 semanas

No basta con identificar los problemas; necesitas un plan para resolverlos sin romper tu tienda en el proceso. Esta es la secuencia que recomiendo después de una auditoría:

Semana 1 — Limpieza: elimina el código residual de apps desinstaladas y reduce las fuentes web a máximo 2 familias (regular + bold). Estos cambios no afectan la funcionalidad y producen mejoras inmediatas.

Semana 2 — Imágenes: establece un proceso para que todas las imágenes nuevas se suban ya optimizadas. Revisa las imágenes existentes de las 20 páginas con más tráfico (las encuentras en Google Analytics) y redimensiónalas. Verifica que todas tienen atributos width, height y loading="lazy" donde corresponde.

Semana 3 — JavaScript: audita cada app activa y decide si realmente la necesitas. Para las que mantengas, configura la carga diferida donde sea posible. Mueve los widgets de chat y popups para que se carguen al primer scroll o después de 5 segundos.

Semana 4 — Medición: vuelve a ejecutar los 20 puntos de esta checklist. Compara las métricas antes y después. Documenta todo: capturas de pantalla de PageSpeed, waterfalls de WebPageTest y valores de Core Web Vitals. Esta documentación te servirá como referencia para futuras auditorías y para demostrar el impacto de tus cambios.

Si necesitas ayuda profesional para ejecutar la optimización o si la auditoría reveló problemas a nivel de código de tema que requieren modificaciones de Liquid, en IntegralWeb ofrecemos un servicio especializado de optimización de velocidad para Shopify donde nos encargamos de implementar las correcciones técnicas manteniendo la funcionalidad de tu tienda intacta.