Shopify Reducir JavaScript no utilizado: Reparar código hinchado

¿Qué PageSpeed realmente está marcando?

Lighthouse informa JavaScript no utilizado cuando un script contiene una cantidad significativa de código que no se utiliza durante la carga inicial de la página. La guía de Chrome dirige a los desarrolladores a DevTools Coverage para realizar una investigación línea por línea. En Shopify, esto a menudo expone un gran paquete de temas que impulsa cada plantilla, además de scripts de aplicaciones para reseñas, ventanas emergentes, suscripciones, personalización, chat, análisis y recomendaciones de productos.

Es fácil malinterpretar la advertencia. Es posible que un script de galería de productos no se utilice en una página de colección, pero sea obligatorio en una página de producto. Es posible que un script emergente no se utilice durante los primeros segundos, pero sea necesario después de un retraso. Es posible que un script de seguimiento no afecte el diseño, pero aun así consume tiempo de red y de hilo principal. La solución no es la eliminación ciega. La solución es cargar menos código antes.

JavaScript no utilizado se conecta directamente a Optimización INP de Shopify, Tiempo de ejecución de JavaScript, tareas largas del hilo principal, y Tiempo total de bloqueo. Incluso si los bytes están almacenados en caché, el navegador aún puede analizar, compilar y ejecutar código antes de que el comprador pueda tocar un botón.

Fuentes comunes de JavaScript no utilizado en Shopify

Un paquete de temas para cada plantilla

Muchos temas incluyen un solo Archivo tema.js que incluye carruseles, acordeones, medios de productos, búsqueda predictiva, localización, cajones de carrito, encabezados adhesivos y animaciones. Esto es conveniente para el desarrollo pero costoso para la primera carga cuando solo se necesita un pequeño subconjunto.

Fragmentos de aplicación que quedan después de la desinstalación

Las aplicaciones pueden dejar fragmentos, etiquetas de script, bloques de extensión de aplicaciones temáticas, metacampos y código global después de la desinstalación. Si el JavaScript de una aplicación eliminada todavía aparece en DevTools, trátelo como una limpieza de bajo riesgo después de la prueba. Esto se superpone con Limpieza de CSS y JavaScript no utilizados.

Píxeles y etiquetas cargados demasiado pronto

GTM, Meta Pixel, TikTok Pixel, Pinterest Tag y las herramientas de atribución pueden agregar JavaScript no utilizado durante la primera carga. Mantenga un seguimiento crítico para el negocio, pero no cargue todos los experimentos, etiquetas heredadas y píxeles duplicados en cada página.

Manual paso a paso: Reducir JavaScript no utilizado en Shopify

1. Medir por plantilla, no solo por página de inicio

Pruebe la página de inicio, la página de producto, la página de colección, el carrito y las páginas de destino de alto tráfico por separado. Un script que no se utiliza en la página de inicio puede ser esencial en las páginas de productos. Utilice la cobertura de Chrome DevTools y la prueba de velocidad gratuita de Shopify para comparar plantillas.

2. Guiones temáticos de inventario

En un tema duplicado, se incluyen archivos de sección y diseño de búsqueda para JavaScript. Busque archivos globales que puedan cargarse condicionalmente solo cuando sea necesario.

<!-- Before: loads product media code everywhere -->
{{ 'product-media.js' | asset_url | script_tag }}

<!-- Better: load only on product templates -->
{% if template.name == 'product' %}
  {{ 'product-media.js' | asset_url | script_tag }}
{% endif %}

3. Aplazar el código que no es necesario para el primer renderizado

JavaScript que impulsa reseñas, recomendaciones, chat, controles de video, ventanas emergentes de boletines o secciones debajo de la página a menudo no necesita bloquear la primera pantalla. uso aplazar para scripts locales que no necesitan ejecutarse antes de que finalice el análisis HTML.

<script src="{{ 'theme.js' | asset_url }}" defer></script>

4. Inicialización diferida de funciones de la mitad inferior de la página

Parte del código debe cargarse eventualmente, pero no inmediatamente. Inicialice controles deslizantes, videos, widgets de recomendación o tablas de comparación cuando su sección se acerque a la ventana gráfica.

const sections = document.querySelectorAll('[data-lazy-module]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(async (entry) => {
    if (!entry.isIntersecting) return;

    const section = entry.target;
    const moduleName = section.dataset.lazyModule;
    const module = await import('/assets/' + moduleName + '.js');
    module.init(section);
    observer.unobserve(section);
  });
}, { rootMargin: '300px' });

sections.forEach((section) => observer.observe(section));

5. Elimina los restos de aplicaciones con cuidado

Verifica los archivos de diseño del tema para ver si hay inclusiones antiguas y luego verifica las incrustaciones de la aplicación Shopify. Deshabilite un sospechoso a la vez en un tema duplicado y pruebe el complemento al carrito, la selección de variantes, el cajón del carrito, el seguimiento y la transferencia de pago. Para tiendas con muchas aplicaciones, lea el Guía de optimización de velocidad de la aplicación Shopify antes de cortar el código.

6. Vuelva a probar las acciones del usuario, no solo las puntuaciones

Después de cada limpieza, pruebe la ruta de compra principal en dispositivos móviles. Toque selectores de variantes, tablas de tallas, acordeones, adición rápida, cajón del carrito, cajas de descuento, opciones de recogida y botones de pago. Un informe de PageSpeed ​​más limpio no es una victoria si altera el comportamiento de los ingresos.

Solución manual frente a solución Thunder

Qué solucionar después de JavaScript no utilizado

Si la limpieza de JavaScript ayuda pero la página aún falla en PageSpeed, continúe con trabajo del hilo principal, fachadas de terceros, correcciones de JavaScript de terceros, y el guía completa de optimización de velocidad de Shopify. JavaScript suele ser una capa de una pila más grande que incluye imágenes, CSS, fuentes, estabilidad del diseño y control de aplicaciones.

Para las tiendas que no pueden permitirse una semana de cirugía temática manual, Thunder les ofrece un camino más rápido hacia una línea base más limpia. Revisión Precios de trueno, instálelo en la tienda y mantenga la eliminación manual del código de los fragmentos antiguos y la lógica específica de la plantilla que una aplicación no debería adivinar.

FAQ