Desglose del trabajo del hilo principal de Shopify: lea el diagnóstico de PageSpeed

Qué significa el desglose del trabajo del hilo principal

El hilo principal del navegador coordina el análisis de HTML, el análisis de CSS, la ejecución de JavaScript, el cálculo de estilos, el diseño, la pintura y la mayor parte del manejo de interacciones. Cuando PageSpeed ​​informa un total alto de subprocesos principales, significa que la página le pide al navegador que trabaje demasiado la CPU durante la carga. Eso puede retrasar el primer renderizado, bloquear los toques y hacer que las páginas de productos se sientan pegajosas en el móvil.

La documentación de Lighthouse de Chrome agrupa el trabajo del hilo principal en categorías: evaluación de scripts, estilo y diseño, renderizado, análisis de HTML y CSS, análisis y compilación de scripts, y recolección de basura. En Shopify, estas categorías se corresponden muy bien con los problemas reales de la tienda: scripts de aplicaciones, paquetes de temas de gran tamaño, CSS complejo, enormes árboles DOM, secciones animadas, marcado de creación de páginas, filtros de colección y widgets de personalización.

Este diagnóstico está relacionado con minimizar el trabajo del hilo principal, tareas largas del hilo principal, y Tiempo total de bloqueo. Una página puede tener un total alto sin una tarea enorme, o un total modesto con una tarea fea que perjudique al INP. Lea ambas vistas.

Cómo leer cada categoría del hilo principal de Shopify

Evaluación de guión

La evaluación del script es el tiempo dedicado a ejecutar JavaScript. Esta suele ser la categoría más grande de Shopify porque el escaparate carga código de tema, incrustaciones de aplicaciones, reseñas, cajones de carrito, personalización, análisis, píxeles, chat, filtros y widgets de creación de páginas. Si esta categoría domina, audite primero las aplicaciones y luego los paquetes de temas.

Las correcciones comunes incluyen aplazar scripts no críticos, eliminar código de aplicación no utilizado, inicializar código solo en plantillas que lo necesitan y reemplazar incrustaciones pesadas con fachadas de terceros.

Estilo y diseño

El estilo y el diseño es el tiempo que el navegador dedica a calcular el CSS y la geometría de la página. Las páginas de colección de Shopify con muchas tarjetas de productos, filtros, insignias, muestras y elementos adhesivos pueden gastar mucho aquí. También pueden hacerlo los temas con marcado de creación de páginas profundamente anidado.

Solucione este problema reduciendo la complejidad del DOM, simplificando los selectores, evitando la alteración del diseño y estableciendo dimensiones estables para imágenes, medios y espacios de aplicaciones inyectadas. Si PageSpeed también marca el tamaño DOM, utilice el Guía de tamaño DOM excesivo de Shopify.

Representación

El renderizado incluye trabajos de pintura y composición. Las sombras grandes, los filtros, los vídeos de fondo, las secciones animadas y las superposiciones de imágenes grandes pueden encarecer el renderizado. Utilice transformaciones y opacidad para la animación, mantenga las áreas de pintura más pequeñas y evite las propiedades de animación que cambian el diseño.

Análisis de HTML y CSS

El costo de análisis aumenta cuando la página incluye demasiado HTML o CSS. Los temas de Shopify a menudo acumulan secciones no utilizadas, envoltorios de creación de páginas, CSS de aplicaciones y archivos de estilo duplicados. Limpie cuidadosamente el CSS no utilizado, mantenga enfocado el CSS crítico y elimine los restos de aplicaciones después de desinstalar las herramientas.

Análisis y compilación de scripts

Antes de ejecutar JavaScript, el navegador debe analizarlo y compilarlo. Los paquetes grandes perjudican incluso cuando solo se ejecuta una parte del código. Esta es la razón por la que es importante eliminar el código no utilizado y dividir el código específico de la plantilla. el guía para reducir el tiempo de ejecución de JavaScript cubre la siguiente capa.

Recolección de basura

La recolección de basura aparece cuando los scripts asignan y limpian memoria. Carruseles pesados, filtros, widgets de personalización y reconstrucciones DOM repetidas pueden desencadenarlo. Si esta categoría es alta, busque código que cree matrices, reconstruya tarjetas de productos o vuelva a representar widgets al desplazarse y cambiar el tamaño repetidamente.

Manual paso a paso: Reducir el trabajo del hilo principal en Shopify

1. Pruebe las plantillas adecuadas

Página de inicio de prueba, página de producto principal, página de colección principal y un blog o página de destino. Una página de inicio puede tener muchos vídeos, mientras que una página de colección puede tener muchos filtros. No promedies el problema. Combine las pruebas de laboratorio con el Panel de rendimiento web de Shopify y el Guía de seguimiento del rendimiento de Shopify.

2. Comience con la categoría más grande

Si la evaluación del script es de 2800 ms y el diseño es de 400 ms, no pase el día minimizando CSS. Si el estilo y el diseño dominan, no se limite a diferir los píxeles. El diagnóstico es útil porque te indica hacia dónde debe transcurrir la próxima hora.

3. Retrasar scripts no críticos de forma segura

Move optional scripts away from the first render. Keep product forms, variant selection, cart behavior, consent, and checkout handoff safe.

function loadAfterFirstInteraction(src) {
  const load = () => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    document.head.appendChild(script);
  };

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

loadAfterFirstInteraction('https://example.com/reviews-widget.js');

4. Inicialice el código del tema solo donde sea necesario

Muchos temas cargan un paquete global que inicializa cada característica en cada plantilla. Guarde el código costoso detrás de las comprobaciones DOM para que el código multimedia del producto no se ejecute en las publicaciones del blog y los filtros de colección no se ejecuten en las páginas del producto.

if (document.querySelector('[data-product-gallery]')) {
  initProductGallery();
}

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

if (document.querySelector('[data-cart-drawer]')) {
  initCartDrawer();
}

5. Lecturas y escrituras de diseño por lotes

La alteración del diseño ocurre cuando el código lee repetidamente el diseño y escribe estilos en el mismo bucle. Primero lea las medidas y luego escriba los cambios en un cuadro separado.

const cards = Array.from(document.querySelectorAll('[data-product-card]'));
const heights = cards.map((card) => card.offsetHeight);
const maxHeight = Math.max(...heights);

requestAnimationFrame(() => {
  cards.forEach((card) => {
    card.style.minHeight = maxHeight + 'px';
  });
});

6. Divida tareas personalizadas grandes

Si el código procesa cientos de tarjetas de productos, muestras o filtros a la vez, fragmente el trabajo. Esto ayuda al navegador a responder entre lotes y protege INP.

const items = Array.from(document.querySelectorAll('[data-filter-option]'));

function hydrateBatch(start = 0) {
  const batch = items.slice(start, start + 20);
  batch.forEach(hydrateFilterOption);

  if (start + 20 < items.length) {
    setTimeout(() => hydrateBatch(start + 20), 0);
  }
}

hydrateBatch();

Solución manual frente a solución Thunder

Cómo confirmar la avería mejorada

Vuelva a probar la misma página, modo de dispositivo y condiciones de red. El total del hilo principal debería disminuir, la categoría más grande debería reducirse y las métricas relacionadas deberían mejorar. Para pruebas de laboratorio, mire Tiempo total de bloqueo y tareas largas. Para conocer el rendimiento en el campo, observe INP, LCP y el comportamiento de conversión.

Tenga en cuenta buenos umbrales: LCP debe ser de 2,5 segundos o más rápido, INP debe ser de 200 ms o más rápido y CLS debe ser de 0,1 o menos durante al menos el 75 % de las visitas. Si su desglose sigue siendo alto después de la limpieza de la aplicación y el script, continúe con el guía completa de optimización de velocidad de Shopify, compara la automatización en el las mejores aplicaciones de optimización de velocidad de Shopify, o revisar optimización de velocidad profesional para limpieza de código personalizado.

FAQ