Optimización de JavaScript de Shopify: cómo reducir Tiempo de ejecución de JS (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:

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:

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

1. Abre tu tienda en Chrome → DevTools (F12)
2. Presione Ctrl+Mayús+P (Mac: Cmd+Mayús+P) → escriba "Cobertura" → seleccione "Mostrar cobertura"
3. Haga clic en el botón recargar en el panel Cobertura
4. Filtrar por "JS": ordenar por bytes totales y bytes no utilizados
5. 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

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

Método 3: Pestaña Red

1. DevTools → pestaña Red → filtrar por "JS"
2. Vuelve a cargar la página y ordena por tamaño (el más grande primero)
3. Anote el total de JS transferidos y el número de solicitudes
4. 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 <script> 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 -->

<script src="app.js"></script>



<!-- defer — downloads in parallel, executes after HTML parsing, maintains order -->

<script src="app.js" defer></script>



<!-- async — downloads in parallel, executes immediately when ready, no order guarantee -->

<script src="analytics.js" async></script>



<!-- Dynamic loading — loads on demand, best for non-essential scripts -->

<script>

  // Load chat widget only when user scrolls past fold

  const observer = new IntersectionObserver((entries) => {

    if (entries[0].isIntersecting) {

      const script = document.createElement("script");

      script.src = "https://chat-widget.example.com/widget.js";

      document.body.appendChild(script);

      observer.disconnect();

    }

  });

  observer.observe(document.querySelector("#footer"));

</script>

Cuándo usar cada uno:

• aplazar: Tema JavaScript, scripts de aplicaciones que dependen de que DOM esté listo
• asíncrono: Scripts de análisis (GA4, Meta Pixel): independientes, sin dependencia de DOM
• Carga dinámica: Widgets de chat, widgets de revisión, cualquier cosa debajo de la página

En Shopify, el desafío es que no controlas cómo las aplicaciones inyectan sus scripts. La mayoría de las aplicaciones agregan <script> etiquetas sin async o defer. Esto es exactamente lo que Thunder se maneja automáticamente : pospone scripts no esenciales independientemente de cómo los cargaron originalmente las aplicaciones.

Eliminar JavaScript no utilizado de Shopify

El JavaScript más rápido es el JavaScript que no cargas en absoluto. A continuación se explica cómo reducir la carga útil total de JS:

1. Auditar y eliminar aplicaciones innecesarias

Cada aplicación instalada agrega JavaScript. Audite cada aplicación y pregunte: ¿el impacto en los ingresos de esta aplicación justifica su costo de rendimiento? Candidatos comunes para la eliminación:

• Aplicaciones de insignia de confianza (reemplace con HTML/CSS estático; ahorra entre 30 y 80 KB)
• Aplicaciones de la barra de anuncios (use la barra de anuncios incorporada del tema)
• Aplicaciones de SEO que solo agregan metaetiquetas (haga esto manualmente en el código del tema)
• Aplicaciones que instalaste para probar y que olvidaste

2. Limpiar el código sobrante de la aplicación

Después de desinstalar una aplicación, verifique los archivos de su tema en busca de referencias de scripts huérfanos:

• Buscar theme.liquid y layout/ para dominios de script externos Carpeta
• Verifique el snippets/ para aplicaciones específicas .liquid
• Mirar en assets/ para archivos JS que pertenecen a aplicaciones eliminadas

3. Reemplazar bibliotecas pesadas

Algunos temas y aplicaciones aún cargan jQuery (90 KB) u otras bibliotecas pesadas. Alternativas modernas:

• jQuery → nativo document.querySelector y fetch (0 KB: integrado en los navegadores)
• Control deslizante Slick (43 KB) → desplazamiento rápido de CSS nativo o Swiper liviano (compilación mínima)
• Momento.js (70KB) → nativo Intl.DateTimeFormat o día.js (2KB)

Shopify Tema del amanecer se creó específicamente para evitar grandes dependencias: utiliza JavaScript básico sin jQuery. Si su tema aún depende de jQuery, es una señal fuerte para considerar una actualización del tema. Vea también nuestra guía sobre recursos de bloqueo de renderizado.

Carga basada en interacciones: cargue JS solo cuando sea necesario

Muchos scripts de Shopify no necesitan ejecutarse al cargar la página. Los widgets de chat, los carruseles de reseñas y las recomendaciones de productos solo importan cuando el usuario se desplaza hacia ellos o interactúa con la página. Cargarlos por adelantado desperdicia ancho de banda y bloquea el hilo principal sin ningún motivo.

IntersectionObserver para carga basada en desplazamiento

Cargue scripts cuando su elemento de destino ingrese a la ventana gráfica:

// Load review widget JS only when reviews section is visible

const reviewSection = document.querySelector("#product-reviews");

if (reviewSection) {

  const observer = new IntersectionObserver((entries) => {

    if (entries[0].isIntersecting) {

      // Load the review app script

      const script = document.createElement("script");

      script.src = "https://reviews-app.example.com/widget.js";

      document.body.appendChild(script);

      observer.disconnect();

    }

  }, { rootMargin: "200px" }); // Start loading 200px before visible

  observer.observe(reviewSection);

}

Activadores de interacción del usuario

Algunos scripts solo deberían cargarse cuando el usuario interactúa activamente:

// Load chat widget only on first user interaction

let chatLoaded = false;

function loadChat() {

  if (chatLoaded) return;

  chatLoaded = true;

  const script = document.createElement("script");

  script.src = "https://chat.example.com/widget.js";

  document.body.appendChild(script);

}



// Trigger on any user interaction

["mouseover", "touchstart", "scroll", "keydown"].forEach(event => {

  document.addEventListener(event, loadChat, { once: true });

});

Este patrón funciona bien para widgets de chat, scripts de ventanas emergentes y widgets de programas de fidelización. El usuario obtiene una carga inicial rápida y el widget aparece entre 100 y 200 ms después de su primera interacción: un retraso imperceptible. Para obtener una visión completa sobre cómo optimizar la interactividad, consulte nuestro Guía de optimización INP.

División de código y agitación de árboles para Shopify

Si estás creando JavaScript personalizado para tu tema de Shopify (o trabajando con un desarrollador), las técnicas modernas de agrupación pueden reducir significativamente lo que se envía al navegador:

División de código

En lugar de agrupar todo JavaScript en un archivo grande, divídalo en partes más pequeñas que se cargan según demanda:

• División basada en rutas: La página de producto JS solo se carga en las páginas de productos, la colección JS solo en las páginas de colección
• División basada en componentes: El JS modal de vista rápida se carga solo cuando el usuario hace clic en "Vista rápida"
• División de proveedores: Separe las bibliotecas de proveedores en su propio paquete almacenado en caché

Sacudida de árboles

La eliminación de código muerto (tree shaking) elimina las exportaciones no utilizadas de los módulos de JavaScript. Si tu tema importa una biblioteca de utilidades pero solo usa 3 de 50 funciones, la eliminación de código muerto (tree shaking) elimina las otras 47. Esto requiere la sintaxis de módulo ES (import/export) y un paquete como Vite, Webpack o esbuild.

Impacto de ejemplo: importar todo lodash agrega 72 KB. Sólo importando lodash/debounce agrega 1 KB. Eso es una reducción del 98.6% de un solo cambio de importación.

La mayoría de los comerciantes no implementarán la división de código ni la agitación de árboles directamente; estas son optimizaciones a nivel de desarrollador. Pero si trabaja con un desarrollador en un tema personalizado, insista en estas prácticas. Pueden reducir el tema JavaScript entre un 40 y un 60 %. Para una visión detallada de cómo Tema del amanecer maneja esto, consulte nuestra guía de velocidad del tema.

Trabajadores web: descarga de computación JavaScript pesada

Web Workers ejecuta JavaScript en un hilo de fondo separado, manteniendo el hilo principal libre para las interacciones del usuario. Son útiles cuando su tienda realiza cálculos pesados que de otro modo causarían bloqueos:

• Filtrado de productos complejo con cientos de variantes
• Cálculos de precios en múltiples monedas o descuentos por volumen
• Procesamiento de grandes conjuntos de datos de productos para la funcionalidad de búsqueda
• Procesamiento de imágenes para herramientas de personalización (vistas previas de grabado, etc.)

Limitación: Los trabajadores web no pueden acceder al DOM. Sólo pueden enviar datos al hilo principal a través de postMessage. Para la mayoría de las tiendas Shopify, las mayores ganancias provienen de reducir y aplazar JavaScript en lugar de moverlo a los Workers. Los Workers son una herramienta de precisión para cuellos de botella computacionales específicos.

Lista de verificación de optimización de JavaScript de Shopify

Ordenado por impacto — empiece desde arriba:

Preguntas frecuentes sobre la optimización de JavaScript de Shopify

Haz que el JavaScript de tu tienda Shopify funcione de forma más inteligente

JavaScript es el mayor cuello de botella de rendimiento en la mayoría de las tiendas Shopify. Bloquea la interactividad, infla las puntuaciones de Core Web Vitals e impacta directamente Clasificaciones SEO y tasas de conversión. La buena noticia: no necesitas reescribir el código de tu tienda.

Empieza con Thunder Page Speed Optimizer para el aplazamiento automático de scripts y la gestión de JS de aplicaciones. Luego, audite manualmente sus aplicaciones instaladas: eliminar de 3 a 4 aplicaciones innecesarias puede eliminar más de 200 KB de JavaScript de la noche a la mañana. Para obtener una imagen de optimización completa, combine la optimización JS con Optimización CSS, Mejoras en TTFB, y Optimización de plantilla líquida.

Prueba tu tienda ahora para ver cuánto afecta JavaScript a su rendimiento. Para obtener una hoja de ruta de optimización completa, consulte nuestra guía completa de optimización de velocidad de Shopify.