¿Cuánto JavaScript carga una tienda Shopify típica?

Un tema estándar de Shopify 2.0 como Dawn carga entre 150 y 250 KB de JavaScript. Después de instalar aplicaciones, agregar funciones personalizadas e integrar herramientas de terceros (análisis, widgets de chat, aplicaciones de revisión), la mayoría de las tiendas cargan entre 400 y 800 KB+ de JS. Algunas tiendas muy personalizadas superan 1 MB. Cada aplicación instalada normalmente agrega entre 30 y 150 KB de su propio JavaScript, y este JS a menudo se carga en cada página, independientemente de si es necesario.

¿Cuál es la diferencia entre asíncrono y diferido para los scripts de Shopify?

Tanto async como defer hacen que los scripts no bloqueen el procesamiento, pero se comportan de manera diferente. 'defer' descarga el script en paralelo y lo ejecuta después de que el HTML se haya analizado por completo, manteniendo el orden del script. 'async' se descarga en paralelo pero se ejecuta inmediatamente cuando está listo, independientemente del análisis HTML o del orden del script. Para Shopify, diferir suele ser más seguro porque muchos scripts dependen de otros scripts (como jQuery). Utilice async solo para scripts independientes, como análisis, que no dependen de nada más.

¿Eliminar las aplicaciones de Shopify reduce JavaScript?

Yes — each Shopify app typically injects 30-150KB of JavaScript into your store. Removing an app removes its JS, but not always completely. Some apps leave behind code snippets in your theme files even after uninstalling. After removing an app, search your theme's layout and snippet files for leftover references to the app's domain or script files. A store going from 15 apps to 8 can reduce JS payload by 200-400KB.

¿Por qué mi tienda Shopify no pasa la auditoría 'Reducir el tiempo de ejecución de JavaScript'?

Esta auditoría de Lighthouse señala cuando el navegador dedica más de 2 segundos a analizar, compilar y ejecutar JavaScript. Causas comunes en Shopify: demasiadas aplicaciones cargando JS en cada página, JavaScript del tema no optimizado con manipulación DOM intensa, widgets de chat que se inicializan inmediatamente, scripts de análisis que se ejecutan sincrónicamente y widgets de revisión que se muestran al cargar la página en lugar de al desplazarse. La solución es reducir el JS total, posponer scripts no críticos y cargar widgets interactivos solo cuando sea necesario.

¿Puedo usar Web Workers en Shopify para mejorar el rendimiento de JS?

Yes, but with limitations. Web Workers run JavaScript in a background thread, keeping the main thread free for user interactions. On Shopify, you can offload heavy computations like price calculations, inventory filtering, or data processing to Web Workers. However, Web Workers can't access the DOM directly, so they're not suitable for UI rendering tasks. For most Shopify stores, the bigger wins come from reducing total JS and deferring non-critical scripts rather than implementing Web Workers.

¿Cómo optimiza Thunder JavaScript en las tiendas Shopify?

Thunder Page Speed Optimizer pospone JavaScript no crítico para que se cargue después de que se renderice la página, lo que reduce el tiempo total de bloqueo y mejora las puntuaciones de interacción con Next Paint. Identifica qué secuencias de comandos son esenciales para la representación en la mitad superior de la página y cuáles pueden retrasarse, incluidas secuencias de comandos de aplicaciones, análisis, widgets de chat y JavaScript de temas que no se necesitan de inmediato. Esto sucede automáticamente sin cambios de código y funciona en todos los temas de Shopify 2.0.

Optimización de JavaScript de Shopify: Reduzca el tiempo de carga de JS a la mitad (2026)

Repara el rendimiento de Shopify JS en 60 segundos

Realiza una prueba de velocidad en tu tienda : si ve "Reducir el tiempo de ejecución de JavaScript" o "Minimizar el trabajo del subproceso principal" en el diagnóstico, la optimización de JavaScript marcará la mayor diferencia. Thunder Page Speed Optimizer aborda ambos automáticamente:

Pospone JavaScript no crítico hasta después de renderizar la página
Reduce el tiempo total de bloqueo (TBT) y mejora la interacción con la siguiente pintura (INP)
Administra el orden de carga de los scripts de la aplicación para un rendimiento óptimo
Funciona con todos los temas de Shopify 2.0: cero ediciones de código de tema

Para los desarrolladores que quieran comprender profundamente la optimización de JavaScript y aplicar correcciones manuales, continúen leyendo.

Cómo JavaScript destruye el rendimiento de la tienda Shopify

JavaScript afecta la velocidad de manera diferente que CSS o las imágenes. Mientras que CSS bloquea la representación y las imágenes afectan el tiempo de carga visual, JS bloquea la hilo principal : el hilo único responsable del diseño, la pintura y la respuesta a las interacciones del usuario. Cuando se ejecuta JavaScript, no puede suceder nada más. Tocar un botón, desplazarse, escribir: todo congelado hasta que se completa la ejecución de JS.

Tres métricas de Core Web Vitals miden directamente el impacto de JavaScript:

Métrica	Qué mide	Impacto JS
Tiempo total de bloqueo (TBT)	Hora en que se bloquea el hilo principal durante la carga de la página	Las tareas JS largas (>50 ms) aumentan directamente el TBT
Interacción con la siguiente pintura (INP)	Capacidad de respuesta a la entrada del usuario	La ejecución pesada de JS retrasa la respuesta a clics/toques
Hora de interactuar (TTI)	Cuando la página se vuelve confiablemente interactiva	La página no es interactiva hasta que JS termina de ejecutarse

En un dispositivo móvil de gama media (el tipo que utilizan la mayoría de los compradores), analizar y ejecutar 500 KB de JavaScript requiere 2-4 segundos. Durante ese tiempo, la tienda parece cargada pero no responde a la interacción: la peor experiencia de usuario posible. Es por eso que la optimización de JS suele tener un mayor impacto en las conversiones que la optimización de imágenes. Obtenga más información en nuestro Guía de elementos básicos de Web Vitals.

¿De dónde viene todo el JavaScript?

Comprender dónde se origina el JavaScript de su tienda es el primer paso para reducirlo. A continuación se muestra un desglose típico:

Fuente JS	Tamaño típico	Cargado
Shopify core (análisis, pago)	80-120KB	Cada página
Tema JavaScript (Dawn, Prestige, etc.)	60-200KB	Cada página
Aplicaciones instaladas (reseñas, ventas adicionales, chat)	150-500KB	Cada página (normalmente)
Análisis (GA4, Meta Pixel, TikTok)	50-150KB	Cada página
Widgets de terceros (chat, ventanas emergentes)	50-200KB	Cada página

Observe el patrón: las aplicaciones y los scripts de terceros representan entre el 50 y el 70 % del total de JavaScript en la mayoría de las tiendas Shopify. Una tienda con 12 aplicaciones puede tener más de 400 KB solo de JavaScript de aplicaciones, cargado en cada página, incluso en páginas donde esas aplicaciones no son necesarias.

Nuestro guía de scripts de terceros cubre el impacto total de los scripts externos y cómo gestionarlos.

Cómo auditar JavaScript en tu tienda Shopify

Antes de optimizar, necesita saber exactamente qué scripts se están cargando y cuánto tiempo de subproceso principal consumen.

Método 1: Cobertura de Chrome DevTools

Abre tu tienda en Chrome → DevTools (F12)
Presione Ctrl+Mayús+P (Mac: Cmd+Mayús+P) → escriba "Cobertura" → seleccione "Mostrar cobertura"
Haga clic en el botón recargar en el panel Cobertura
Filtrar por "JS": ordenar por bytes totales y bytes no utilizados
Resultado típico: 60-80% del JavaScript cargado no se utiliza en cualquier página

Método 2: Gráfico de llamas de la pestaña Rendimiento

DevTools → pestaña Rendimiento → marque "Capturas de pantalla" y "Web Vitals"
Haga clic en grabar → recargar la página → detener la grabación
Mire la sección principal: los bloques amarillos son ejecución de JavaScript
Los bloques amarillos largos (>50 ms) son "tareas largas" que bloquean el hilo principal
Haga clic en cualquier bloque para ver qué script y función es responsable

Método 3: Pestaña Red

DevTools → pestaña Red → filtrar por "JS"
Vuelve a cargar la página y ordena por tamaño (el más grande primero)
Anote el total de JS transferidos y el número de solicitudes
Verifique la columna "Iniciador" para ver qué scripts cargaron otros scripts

Para obtener un panorama más amplio del rendimiento, ejecuta tu tienda a través de nuestra prueba de velocidad : destaca problemas específicos de JavaScript junto con otros cuellos de botella de rendimiento.

Aplazamiento de script: asíncrono, aplazamiento y carga dinámica

De forma predeterminada, Las etiquetas Etiquetas bloquean el análisis de HTML. El navegador deja de crear la página, descarga el script, lo ejecuta y luego continúa. Los atributos de aplazamiento de script cambian este comportamiento:

<!-- Render-blocking (default) — worst for performance -->

{'

Optimización de JavaScript de Shopify: cómo reducir Tiempo de ejecución de JS (2026)