Minimizar el trabajo del hilo principal en Shopify: Corregir la advertencia de PageSpeed (2026)

Solución rápida con Thunder

Qué hace realmente el hilo principal

El hilo principal del navegador es el carril único donde ocurre el trabajo de página más visible. Analiza HTML, analiza CSS, calcula qué estilos se aplican, calcula el diseño, pinta píxeles, maneja entradas y ejecuta JavaScript. Cuando se ejecuta JavaScript, el navegador no puede responder simultáneamente a un toque, actualizar el diseño o pintar un nuevo marco.

Lighthouse divide esto en categorías como evaluación de scripts, análisis y compilación de scripts, estilo y diseño, renderizado, análisis de HTML y CSS, y recolección de basura. Los comerciantes de Shopify a menudo ven que la evaluación de scripts domina el informe porque los scripts de aplicaciones se ejecutan en cada página incluso cuando el cliente nunca abre el widget.

Es por eso que la advertencia es importante más allá de la puntuación del laboratorio. El trabajo elevado del hilo principal infla el tiempo total de bloqueo, y el tiempo total de bloqueo es una fuerte señal de laboratorio para un verdadero dolor de interacción. El umbral INP de Google para una buena experiencia es inferior a 200 ms; si el hilo principal está ocupado, el clic espera.

Por qué las tiendas Shopify activan esta advertencia

Paso 1: Encuentra las tareas largas

Abra Chrome DevTools, vaya a Rendimiento, registre la carga de una página y busque tareas amarillas largas. Cualquier tarea de más de 50 ms bloquea el hilo principal el tiempo suficiente para contar en el tiempo total de bloqueo.

// Quick field debugging in the browser console
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Long task:', Math.round(entry.duration), 'ms');
  }
}).observe({ type: 'longtask', buffered: true });

If the worst tasks come from third-party domains, use our guía de scripts de terceros. If they come from your own theme bundle, continue below.

Paso 2: Aplazar los guiones de temas no críticos

Los scripts en el encabezado sin aplazamiento bloquean el análisis y compiten por el hilo principal desde el principio. Para scripts de temas que no necesitan ejecutarse antes de que aparezca el contenido, utilice aplazar:

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

Cuidado con las dependencias. Si un selector de variantes depende de una biblioteca global cargada antes, conserve el orden. No agregue ciegamente async a todo; async puede ejecutar archivos desordenados. Thunder maneja el aplazamiento consciente de la dependencia para los scripts de aplicaciones, que generalmente es donde viven las mayores ganancias.

Paso 3: Cargue los widgets solo cuando sea necesario

Los chats, los carruseles de reseñas, los bloques de recomendaciones y las incrustaciones de videos a menudo no necesitan inicializarse al cargar la página. Cárgalos cuando estén visibles o después de la interacción.

const widget = document.querySelector('[data-reviews-widget]');

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

  import('./reviews-widget.js').then((module) => {
    module.init(widget);
  });

  observer.disconnect();
}, { rootMargin: '300px' });

if (widget) observer.observe(widget);

Este patrón mantiene el JavaScript no utilizado fuera de la ruta crítica. Para imágenes e incrustaciones, combínalo con nuestro Guía de carga diferida de Shopify.

Paso 4: Divida las tareas largas de JavaScript

Si su tema recorre cientos de nodos DOM, recalcula precios, actualiza filtros o presenta resultados de búsqueda en un gran bloque, regrese al navegador entre fragmentos.

async function renderProducts(products) {
  for (let i = 0; i < products.length; i += 12) {
    renderProductBatch(products.slice(i, i + 12));

    if ('scheduler' in window && 'yield' in scheduler) {
      await scheduler.yield();
    } else {
      await new Promise((resolve) => setTimeout(resolve, 0));
    }
  }
}

This does not reduce total work, but it prevents one long task from blocking input. That helps INP, especially on mobile where CPU throttling makes every millisecond of script work more expensive. For deeper JavaScript cleanup, use our Guía de optimización de JavaScript de Shopify.

Paso 5: Evite la destrucción del diseño

La alteración del diseño ocurre cuando el código lee repetidamente los valores del diseño y escribe cambios DOM en el mismo bucle. Cada lectura puede obligar al navegador a recalcular el diseño de forma sincrónica.

// Bad: read and write in the same loop
cards.forEach((card) => {
  const height = card.offsetHeight;
  card.style.minHeight = height + 20 + 'px';
});

// Better: batch reads, then batch writes
const heights = cards.map((card) => card.offsetHeight);
cards.forEach((card, index) => {
  card.style.minHeight = heights[index] + 20 + 'px';
});

Esto es importante en páginas de colección, cajones de adición rápida, encabezados adhesivos y galerías de medios de productos. Si PageSpeed ​​muestra tanto un trabajo principal como un alto costo de estilo/diseño, primero inspeccione estos componentes interactivos.

Solución manual frente a solución Thunder

Vuelva a probar las métricas correctas

Después de los cambios, vuelva a probar el móvil primero. Vea el tiempo total de bloqueo en Lighthouse, el INP en los datos de campo y el desglose de las categorías del hilo principal. No persiga una puntuación perfecta en una carrera sintética; compare varias ejecuciones y use el panel de rendimiento web de Shopify para conocer las tendencias de los usuarios reales.

Si tu LCP también es alto, el siguiente cuello de botella puede ser tu imagen de héroe. Utilice nuestro Guía de precarga de imágenes de héroe de Shopify y el más amplio Guía de optimización de velocidad de Shopify. Si PageSpeed también informa alto tiempo total de bloqueo de Shopify, cadenas de solicitudes críticas, o enormes cargas útiles de red, corrige esos diagnósticos en la misma pasada de auditoría. Para conocer las opciones de precios y automatización, consulte Precios de trueno.

Referencias y Validación

Uso Desglose del trabajo del hilo principal de Lighthouse como fuente de verdad de lo que mide el diagnóstico. Separa la evaluación de secuencias de comandos, el análisis, el estilo y el diseño, la representación y otros trabajos del navegador para que pueda saber si el problema es el código de su tema, la pila de su aplicación o la cantidad de DOM que el navegador tiene que procesar.

Para la capacidad de respuesta, verifique con Guía INP de web.dev. Una tienda puede parecer visualmente cargada y al mismo tiempo sentirse rota si el hilo principal está ocupado cuando el cliente toca una variante, abre el cajón del carrito o hace clic en pagar. Es por eso que Thunder se centra tanto en el aplazamiento de secuencias de comandos de terceros: le da al navegador espacio para responder antes de que el visitante pierda la paciencia.