Shopify Minify JavaScript: soluciona la advertencia de PageSpeed

Qué significa la advertencia de Shopify de Minify JavaScript

La documentación de Lighthouse de Chrome describe la minificación de JavaScript como la eliminación de espacios en blanco y código que no es necesario para crear un archivo de script más pequeño pero aún válido. PageSpeed ​​informa los archivos afectados y los ahorros de transferencia estimados. En Shopify, ese diagnóstico a menudo apunta a temas de JavaScript, bibliotecas de proveedores antiguos, fragmentos personalizados o scripts que quedaron después de experimentos con aplicaciones.

La advertencia es importante porque JavaScript compite por el ancho de banda de la red y el tiempo del hilo principal. Los archivos más pequeños se descargan y analizan más rápido y ejercen menos presión sobre los dispositivos móviles. Pero no confunda la minificación con un trabajo de rendimiento de JavaScript más profundo. Un archivo minúsculo aún puede bloquear la interacción si ejecuta una tarea larga, y un archivo grande puede ser inofensivo si se carga más tarde y se ejecuta solo cuando es necesario.

Si PageSpeed también informa reducir el tiempo de ejecución de JavaScript, tareas largas del hilo principal, o desglose del trabajo del hilo principal, prioriza aquellos junto con la minificación.

Archivos JavaScript comunes de Shopify para verificar

Paquetes de temas

Archivos como tema.js, global.js, formulario-producto.js, búsqueda-predictiva.js, y carrito-cajón.js pueden ser recursos temáticos locales. Estos son los candidatos más seguros si tienes un tema duplicado y puedes probar cada ruta de compra.

Bibliotecas antiguas

Los complementos jQuery heredados, las bibliotecas de carrusel, las herramientas de animación y los scripts de proveedores copiados son comunes en las tiendas más antiguas. Si el archivo es local y legible, minifíquelo. Si la función ya no se utiliza, elimínela. el Guía de limpieza de CSS y JavaScript no utilizados cubre la misma idea para fragmentos abandonados.

Scripts de aplicaciones de terceros

You usually cannot safely minify files served from an app's CDN. Ask the vendor, disable unnecessary app embeds, or replace the app. Do not download a vendor script and serve your own copy unless the vendor explicitly supports that path, because you can break updates, consent handling, or checkout-related logic.

Manual paso a paso: Minimizar JavaScript en Shopify

1. Duplicar el tema en vivo

Trabajar en un tema duplicado. JavaScript controla las variantes de productos, los complementos al carrito, las actualizaciones del cajón del carrito, los filtros, la búsqueda, los selectores de cantidad, las suscripciones y el seguimiento. Una prueba visual de humo no es suficiente; necesitas probar el comportamiento de compra.

2. Identify local files from PageSpeed

Expand the PageSpeed minify JavaScript diagnostic. Local Shopify files often include a Shopify CDN path and an asset filename. App files usually come from separate domains or app-specific paths. Fix local theme assets first and keep vendor files out of your manual minification pass.

3. Minimizar solo el archivo servido

Mantenga la fuente legible en su flujo de trabajo de desarrollo y proporcione una compilación minimizada. Un ejemplo sencillo:

// Before
function openCartDrawer() {
  const drawer = document.querySelector('[data-cart-drawer]');

  if (!drawer) {
    return;
  }

  drawer.classList.add('is-open');
}

// After
function openCartDrawer(){const drawer=document.querySelector("[data-cart-drawer]");drawer&&drawer.classList.add("is-open")}

4. Hacer referencia a un activo minimizado en Liquid

Cargue el archivo minimizado como un recurso separado y actualice la referencia del tema. Haga esto primero en un tema duplicado:

<!-- theme.liquid or a section file -->
<script src="{{ 'theme.min.js' | asset_url }}" defer></script>

Uso aplazar para scripts que no necesitan bloquear el análisis de HTML. No posponga ciegamente los scripts que deben ejecutarse antes del contenido visible o antes de la configuración crítica del formulario del producto.

5. Proteger el código específico de la plantilla

La minificación reduce los bytes, pero omitir inicializaciones innecesarias reduce el trabajo real de la CPU. El código de la galería de productos no debe ejecutarse en los artículos. Los filtros de colección no deben ejecutarse en la página de inicio.

if (document.body.dataset.template === 'product') {
  import('./product-gallery.js').then(({ initProductGallery }) => {
    initProductGallery();
  });
}

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

6. Pruebe la ruta de compra antes de publicar

Cambios de variantes de prueba, agregar al carrito, cajón del carrito, botón de pago, descuentos, suscripciones, búsqueda predictiva, filtros, galerías de imágenes, widgets de revisión y consentimiento/seguimiento. Luego compare PageSpeed, tiempo total de bloqueo, INP y el Informe de velocidad de Shopify.

Solución manual frente a solución Thunder

Qué hacer si la advertencia persiste

Si la advertencia de Shopify de minificar JavaScript permanece después de la limpieza local, verifique si PageSpeed está marcando scripts de terceros. Si es así, es posible que no pueda reparar el archivo directamente. Concéntrese en si ese script se carga en cada plantilla, si se puede retrasar y si la aplicación aún es necesaria. el guía de JavaScript de terceros y guía de fachadas de terceros muestra caminos más seguros.

Para un plan completo, utilice el guía completa de optimización de velocidad de Shopify, punto de referencia con el prueba de velocidad gratuita, luego compare el costo de tiempo de la limpieza manual de JavaScript con Precios de trueno. Minification is useful, but the faster store comes from controlling how much JavaScript loads and when it runs.

FAQ