Shopify reduce el tiempo de ejecución de JavaScript: soluciona la advertencia de PageSpeed

Por qué las tiendas Shopify reciben esta advertencia de JavaScript

Lighthouse informa el tiempo de ejecución de JavaScript cuando el navegador dedica una gran cantidad de tiempo al hilo principal evaluando scripts. Las tiendas Shopify están especialmente expuestas porque el tema, las aplicaciones, los píxeles de análisis, las herramientas de consentimiento, los widgets de revisión, las herramientas de búsqueda, los filtros de colección, los creadores de páginas y los cajones del carrito a menudo se ejecutan en la misma página.

La guía Core Web Vitals de Google separa la carga, la capacidad de respuesta y la estabilidad visual. El JavaScript pesado perjudica la capacidad de respuesta de manera más directa porque los clics y los toques esperan detrás de tareas largas. También puede retrasar LCP cuando los scripts compiten con la imagen principal, CSS y la representación de fuentes. Si también ve un INP o un tiempo total de bloqueo deficiente, lea la Guía Shopify INP y Guía de tiempo total de bloqueo de Shopify.

La advertencia no le indica que elimine todos los scripts. Le indica que decida qué scripts son críticos para la primera vista y cuáles pueden esperar. La página de un producto necesita selección de variantes, estado del precio, medios del producto, complementos al carrito y, a veces, suscripciones. Probablemente no necesite chat, reseñas, recomendaciones, mapas de calor ni todas las etiquetas de marketing antes de la primera interacción.

Cómo encontrar el JavaScript de Shopify que importa

Test the homepage, a best-selling product page, a collection page, and a landing page. Product pages often have the worst script mix because reviews, media galleries, subscriptions, recommendations, and product options all load there. Collection pages often suffer from filters, search, sorting, personalization, and large DOM updates.

En Chrome DevTools, abra el panel Rendimiento, registre una carga acelerada por dispositivos móviles y busque bloques de secuencias de comandos amarillos largos. En PageSpeed ​​Insights, marque "Reducir el tiempo de ejecución de JavaScript", "Minimizar el trabajo del hilo principal" y "Reducir JavaScript no utilizado". El Panel de rendimiento web de Shopify brinda tendencias de campo, mientras que PageSpeed ​​brinda diagnósticos específicos de la página.

Utilice siempre las mismas URL. Las puntuaciones de PageSpeed ​​varían porque la ubicación de la prueba, el caché, la limitación, las respuestas de la aplicación y el estado de la página varían. El artículo sobre por qué varían los puntajes de las pruebas de velocidad de Shopify explica cómo comparar pruebas sin perseguir movimientos aleatorios.

Manual paso a paso: Reducir el tiempo de ejecución de JavaScript en Shopify

1. Elimina aplicaciones y fragmentos que ya no uses

Comience con la lista de aplicaciones, las incrustaciones de aplicaciones de temas y los fragmentos antiguos. Las aplicaciones desinstaladas pueden dejar código en tema.liquido, secciones, fragmentos o píxeles de eventos de clientes. Elimine el código solo después de duplicar el tema y confirmar que la aplicación no está activa.

<!-- theme.liquid: remove old scripts only after confirming the app is gone -->
<!-- Example of stale code to investigate, not blindly delete -->
<script src="https://cdn.old-widget.example/app.js"></script>
{% render 'old-reviews-widget' %}

Si este es un problema recurrente, lea la guía de sobras de la aplicación Shopify antes de editar archivos de temas de producción.

2. Aplazar los guiones que no sean necesarios para la primera interacción

Nativo aplazar es seguro para muchos scripts de temas que no necesitan bloquear el análisis. Mantiene el orden de ejecución de los scripts diferidos y se ejecuta después del análisis de HTML. No lo agregue ciegamente a la lógica adyacente al pago, al código de consentimiento o a los scripts que deben inicializarse antes de que la página sea utilizable.

<!-- Better for non-critical theme JS -->
<script src="&lbrace;&lbrace; 'theme.js' | asset_url &rbrace;&rbrace;" defer></script>

<!-- Avoid async for scripts that depend on execution order -->
<script src="&lbrace;&lbrace; 'product-form.js' | asset_url &rbrace;&rbrace;" defer></script>

3. Cargue widgets opcionales según la intención del usuario

El chat, las encuestas, los mapas de calor y algunos widgets de personalización a menudo pueden esperar hasta después de la primera vista, desplazamiento, tiempo de inactividad o un clic específico. Esto reduce la cola del hilo principal de la primera carga y al mismo tiempo mantiene la herramienta disponible para los compradores que la necesitan.

function loadChatWidget() {
  if (window.__chatLoaded) return;
  window.__chatLoaded = true;
  const script = document.createElement('script');
  script.src = 'https://example-chat-cdn.com/widget.js';
  script.async = true;
  document.head.appendChild(script);
}

window.addEventListener('scroll', loadChatWidget, { once: true, passive: true });
window.addEventListener('pointerdown', loadChatWidget, { once: true });

Este patrón es útil para los widgets de soporte, pero no para el código que debe registrar el consentimiento o la atribución de ingresos antes de que se activen los eventos. Para tiendas con muchas aplicaciones, compare esto con arreglar scripts de aplicaciones que ralentizan Shopify.

4. Deje de inicializar todos los componentes de cada página

Muchos temas de Shopify incluyen un archivo JavaScript grande que inicializa controles deslizantes, medios de productos, cajones de carrito, filtros de colección, acordeones, modales y búsqueda predictiva en todas partes. Proteja esos inicializadores para que las páginas solo ejecuten lo que necesitan.

if (document.querySelector('[data-product-form]')) {
  import('./product-form.js').then(({ initProductForm }) => initProductForm());
}

if (document.querySelector('[data-collection-filters]')) {
  import('./collection-filters.js').then(({ initFilters }) => initFilters());
}

Las importaciones dinámicas requieren un proceso de compilación, por lo que son más fáciles en temas personalizados que la edición básica de temas de Shopify. Si su tema no admite la agrupación, divida los scripts por plantilla e incluya solo lo que cada plantilla necesita.

5. Utilice oyentes pasivos para desplazarse y tocar

Los controladores de desplazamiento y toque pueden bloquear el navegador si este tiene que esperar para saber si el evento llama prevenirDefault(). Utilice oyentes pasivos cuando el manejador solo observe la interacción.

window.addEventListener('scroll', updateStickyHeader, { passive: true });
window.addEventListener('touchstart', trackTouchIntent, { passive: true });

Ver el guía para oyentes pasivos de eventos si PageSpeed también señala problemas con el detector de eventos.

Solución manual frente a solución Thunder

Qué no romper

El trabajo rápido más riesgoso es el aplazamiento del guión que accidentalmente interrumpe el comportamiento de compra. Pruebe cambios de variantes, agregar al carrito, actualizaciones del cajón del carrito, ingreso de códigos de descuento, selecciones de suscripción, botones de pago dinámico, recomendaciones de productos, reseñas, consentimiento, análisis y píxeles publicitarios. Una página más rápida que pierde el seguimiento de conversiones o el comportamiento de agregar al carrito es una optimización fallida.

También evite apilar varias aplicaciones de velocidad. Varias aplicaciones que intentan aplazar el mismo script pueden provocar errores de sincronización difíciles de depurar. Si necesita un plan amplio, utilice el guía completa de optimización de velocidad de Shopify y comparar opciones en el la mejor guía de aplicaciones de velocidad de Shopify.

Cómo confirmar que la solución funcionó

Ejecute PageSpeed Insights o un Prueba de velocidad de Shopify en las mismas URL, primero en dispositivos móviles. Busque un menor tiempo de ejecución de JavaScript, menos tareas largas, un menor tiempo total de bloqueo y mejores tendencias de INP una vez que se actualicen los datos de campo. de google Guía de Core Web Vitals recommends evaluating page experience at the 75th percentile, so do not judge long-term success from one lab run.

Si JavaScript es solo una parte de la desaceleración, continúa recursos de bloqueo de renderizado, grandes cargas útiles de red, y Optimización LCP. Most real Shopify speed wins come from fixing the stack, not one isolated warning.

FAQ