Tareas largas del hilo principal de Shopify: cómo dividir el trabajo de bloqueo

Por qué las tareas largas son importantes para la velocidad de Shopify

El hilo principal del navegador maneja el análisis, la ejecución de JavaScript, el cálculo de estilos, el diseño, la pintura y muchas interacciones del usuario. Cuando una tarea dura demasiado, el navegador no puede responder rápidamente a los toques, clics, desplazamiento o renderizado del trabajo. La guía de rendimiento de Chrome recomienda dividir las tareas largas para que el navegador tenga posibilidades de actualizar la página y manejar la entrada.

Esto importa directamente para Shopify INP y Tiempo total de bloqueo. Las pruebas de laboratorio del faro muestran TBT. Los datos de campo en Core Web Vitals muestran si los compradores reales experimentan una capacidad de respuesta deficiente.

Las tareas largas también se superponen con las más amplias. minimizar el trabajo del hilo principal advertencia y reducir el tiempo de ejecución de JavaScript. Piense en el trabajo del hilo principal como el costo total de la CPU y en las tareas largas como las partes que más bloquean a los compradores.

Fuentes comunes de tareas largas en temas de Shopify

Las páginas de productos a menudo ejecutan lógica de variantes, galerías multimedia, suscripciones, reseñas, recomendaciones, personalización, análisis y código del cajón del carrito juntos. Las páginas de colección ejecutan filtros, clasificación, búsqueda, hidratación de tarjetas de productos y seguimiento. Las páginas de inicio incluyen controles deslizantes, secciones de video, bloques de creación de páginas, incrustaciones de aplicaciones y píxeles de marketing.

Los scripts de terceros suelen ser los que ganan más rápido. Klaviyo, GTM, Meta Pixel, TikTok Pixel, widgets de revisión, herramientas de chat, ventanas emergentes y aplicaciones de atribución pueden agregar trabajo al hilo principal. Utilice las guías en JavaScript de terceros, GTM ralentiza Shopify, y widgets de chat en vivo para correcciones específicas de aplicaciones.

Manual paso a paso: dividir tareas largas del hilo principal en Shopify

1. Registrar un seguimiento de rendimiento móvil

Abra Chrome DevTools, acelere la CPU, registre la carga de la página y busque largos bloques de secuencias de comandos amarillos. Haga clic en un bloque para ver la pila de llamadas a funciones. Compare eso con los diagnósticos de PageSpeed ​​y el Panel de rendimiento web de Shopify.

2. Retrasar los widgets que no son necesarios para la primera vista

Rara vez es necesario ejecutar el chat, las encuestas, los mapas de calor y algunos widgets de revisión antes de que se procese el contenido principal y del producto. Cárguelos después de la intención del usuario o del tiempo de inactividad.

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

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

3. Inicialice JavaScript solo en las páginas que lo necesiten

No ejecute filtros de recopilación en páginas de productos ni códigos de medios de productos en publicaciones de blog. Proteja los inicializadores comprobando el DOM relevante antes de ejecutar una configuración costosa.

if (document.querySelector('[data-product-form]')) {
  initProductForm();
}

if (document.querySelector('[data-collection-filters]')) {
  initCollectionFilters();
}

4. Divida bucles costosos en trozos más pequeños

Si el código personalizado procesa muchas tarjetas de productos, variantes, reseñas u opciones de filtro a la vez, divida el trabajo para que el navegador pueda respirar entre partes. uso solicitar devolución de llamada inactiva donde se admitió, con un tiempo de espera alternativo.

const cards = Array.from(document.querySelectorAll('[data-product-card]'));

function hydrateCards(start = 0) {
  const end = Math.min(start + 8, cards.length);
  for (let i = start; i < end; i += 1) {
    hydrateProductCard(cards[i]);
  }
  if (end < cards.length) {
    const schedule = window.requestIdleCallback || ((cb) => setTimeout(cb, 50));
    schedule(() => hydrateCards(end), { timeout: 500 });
  }
}

hydrateCards();

5. Move non-visual calculations away from first load

La puntuación de recomendaciones, la personalización, las insignias de inventario y el enriquecimiento analítico no deberían bloquear la primera representación a menos que los compradores necesiten el resultado de inmediato. Procese un valor predeterminado estable y luego mejore una vez que la página sea utilizable.

6. Proteger los scripts críticos para los ingresos

No demore ciegamente la selección de variantes, formularios de productos, actualizaciones del cajón del carrito, selectores de suscripción, consentimiento, transferencia de pago o eventos de atribución. Los cambios de velocidad deben preservar el comportamiento de compra. Pruebe agregar al carrito, cambios de variantes, flujos de descuentos, seguimiento y pago después de cada cambio de script.

Solución manual frente a solución Thunder

Cómo confirmar tareas largas del hilo principal mejoradas

Vuelva a realizar la prueba con PageSpeed Insights y el prueba de velocidad gratuita de Shopify. Busque TBT más bajo, menos tareas largas en DevTools, tiempo de ejecución de JavaScript reducido y capacidad de respuesta mejorada al tocar filtros, variantes, acordeones y botones para agregar al carrito.

Para el sistema más amplio, siga las guía completa de optimización de velocidad de Shopify. Si primero necesita automatización, compare las opciones en la las mejores aplicaciones de optimización de velocidad de Shopify guía o cheque Precios de trueno.

FAQ