Tiempo total de bloqueo de Shopify: Cómo reducir los TBT (2026)

Solución rápida con Thunder

Qué mide el tiempo total de bloqueo

El tiempo total de bloqueo es la suma de las partes de bloqueo de tareas largas entre la primera pintura con contenido y el tiempo de interacción. Una tarea larga es cualquier tarea del subproceso principal que dure más de 50 ms. Si una tarea tarda 120 ms, la parte de bloqueo es de 70 ms. Lighthouse suma esas partes de bloqueo.

Eso es importante porque el navegador no puede responder a un toque mientras el hilo principal está ocupado. Una página puede parecer cargada pero aún así sentirse rota si el cliente toca un selector de variante, un menú o un cajón del carrito mientras JavaScript aún se está ejecutando.

TBT no es una métrica de Core Web Vitals para usuarios reales. Pero está estrechamente relacionado con la capacidad de respuesta. La métrica de campo a tener en cuenta es INP, donde Google considera bueno menos de 200 ms. Si el TBT es terrible en Lighthouse, su riesgo de INP suele ser mayor también.

Por qué el tiempo total de bloqueo de Shopify aumenta

Paso 1: Encuentre las tareas largas detrás de TBT

Open Chrome DevTools -> Performance, record a mobile-like page load, and look for long yellow tasks. Click each task and inspect the call stack. The domain or file name often tells you whether the work comes from your theme, an app, a tag manager, or a third-party widget.

new PerformanceObserver((list) => {
  for (const task of list.getEntries()) {
    console.log('Long task:', Math.round(task.duration), 'ms');
  }
}).observe({ type: 'longtask', buffered: true });

This small observer does not replace DevTools, but it gives you a quick feel for whether long tasks are happening during load. If most long tasks come from third-party domains, start with app loading. If they come from your theme bundle, inspect custom JavaScript.

Paso 2: Aplazar los scripts de temas y aplicaciones de Shopify

The fastest TBT win is usually to stop non-critical scripts from running during the first load. For theme scripts that are not needed before content appears, use defer:

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

Cuidado con el orden. aplazar conserva el orden de ejecución después del análisis. asíncrono no lo hace. Para los scripts de aplicaciones, no edite ciegamente archivos que no sean de su propiedad. Utilice Thunder para aplazar las tareas teniendo en cuenta las dependencias y luego elimine las aplicaciones de bajo valor que aún generan mucho trabajo.

Paso 3: cargar widgets después de la intención o la visibilidad

Rara vez es necesario inicializar el chat, las reseñas, las recomendaciones, los videos incrustados y los widgets de personalización antes de la primera pintura. Cárguelos cuando el cliente se desplace cerca de la sección o interactúe con la función.

const target = document.querySelector('[data-recommendations]');

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

    import('./recommendations.js').then((module) => {
      module.init(target);
    });

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

  observer.observe(target);
}

Este patrón reduce el TBT inicial porque JavaScript todavía existe, pero no se ejecuta durante la ventana más sensible. Combínalo con nuestro guía de scripts de terceros y Guía de impacto de velocidad de Hotjar si las herramientas de seguimiento son parte de la pila.

Paso 4: Divida las tareas temáticas largas en partes

Algunos códigos de temas de Shopify hacen un trabajo legítimo en mal estado. El filtrado de productos, la representación de resultados de búsqueda, las actualizaciones de recomendaciones de carritos y la configuración de opciones de variantes pueden recorrer cientos de elementos en una sola tarea. Divida el trabajo en partes para que el navegador pueda responder entre lotes.

async function hydrateCards(cards) {
  for (let index = 0; index < cards.length; index += 12) {
    cards.slice(index, index + 12).forEach(hydrateCard);

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

Esto no reduce el tamaño total del código, pero reduce el tiempo de bloqueo porque el navegador tiene posibilidades de pintar y responder. Es especialmente útil en páginas de colección, páginas de búsqueda y plantillas de productos con muchas aplicaciones.

Paso 5: Reducir DOM y JavaScript no utilizado

Un DOM grande hace que JavaScript sea más lento porque las consultas, la delegación de eventos, el recálculo de estilos y el diseño tocan más elementos. Si PageSpeed muestra advertencias de TBT más DOM, lea nuestra Guía de tamaño DOM excesivo de Shopify y reducir las cuadrículas de productos, el marcado duplicado de dispositivos móviles/escritorio, los mega menús y los envoltorios del creador de páginas.

JavaScript no utilizado es el otro coste silencioso de TBT. Los fragmentos de aplicaciones antiguas, las funciones de temas no utilizadas, los controles deslizantes heredados y el código de prueba A/B abandonado aún se analizan y ejecutan. Límpielos con nuestro Guía de CSS y JavaScript no utilizados.

Si las imágenes también son enormes, el TBT no será su único cuello de botella. Utilice el guía de enormes cargas útiles de red después de que el trabajo del guión principal esté bajo control.

Solución manual frente a solución Thunder

Vuelva a probar TBT sin perseguir ruido

Las puntuaciones del laboratorio Lighthouse varían, especialmente en las pruebas móviles de Shopify. Realice varias pruebas, compare la mediana y concéntrese en la misma plantilla. Vea TBT, el trabajo del hilo principal, el tiempo de ejecución de JavaScript y los datos del campo INP juntos.

Si TBT mejora pero LCP sigue siendo débil, pase a Optimización de Shopify LCP. Si el TBT se mantiene alto después del aplazamiento de la aplicación, el problema probablemente sea un código de tema personalizado o una aplicación necesaria que necesita un trabajo más profundo. Para la automatización, consulte Características del Trueno y precios.

Referencias y Validación

Uso Documentación sobre el tiempo total de bloqueo de Chrome como fuente de verdad sobre cómo se calcula el TBT. Para una capacidad de respuesta del usuario real, compárelo con Guía INP de web.dev.

Los ejemplos de Shopify Community tienden a brindar consejos amplios, como comprimir imágenes o eliminar aplicaciones. Eso puede ayudar, pero TBT trata específicamente de bloquear el trabajo del hilo principal. La mejor solución es precisa: encontrar tareas largas, posponer scripts no críticos, eliminar JavaScript de bajo valor y dividir el trabajo personalizado en partes más pequeñas.