Répartition du travail du fil principal de Shopify : lire le diagnostic PageSpeed

Que signifie la répartition du travail du fil principal

Le fil principal du navigateur coordonne l'analyse HTML, l'analyse CSS, l'exécution JavaScript, le calcul du style, la mise en page, la peinture et la plupart des gestions des interactions. Lorsque PageSpeed ​​signale un total de thread principal élevé, cela signifie que la page demande au navigateur de faire trop de travail sur le processeur pendant le chargement. Cela peut retarder le premier rendu, bloquer les clics et rendre les pages de produits collantes sur mobile.

La documentation Lighthouse de Chrome regroupe le travail du fil principal en catégories : évaluation de script, style et mise en page, rendu, analyse HTML et CSS, analyse et compilation de script, et garbage collection. Sur Shopify, ces catégories correspondent bien aux problèmes réels du magasin : scripts d'application, ensembles de thèmes surdimensionnés, CSS complexes, énormes arborescences DOM, sections animées, balisage du constructeur de pages, filtres de collection et widgets de personnalisation.

Ce diagnostic concerne minimise le travail du thread principal, tâches longues du thread principal, et Temps de blocage total. Une page peut avoir un total élevé sans une tâche massive, ou un total modeste avec une tâche laide qui nuit à INP. Lisez les deux points de vue.

Comment lire chaque catégorie du fil principal de Shopify

Évaluation du script

L'évaluation du script est le temps passé à exécuter JavaScript. Il s'agit souvent de la plus grande catégorie Shopify, car la vitrine charge le code de thème, les intégrations d'applications, les avis, les tiroirs de panier, la personnalisation, les analyses, les pixels, le chat, les filtres et les widgets de création de pages. Si cette catégorie domine, auditez d’abord les applications, puis les ensembles thématiques.

Les correctifs courants incluent le report des scripts non critiques, la suppression du code d'application inutilisé, l'initialisation du code uniquement sur les modèles qui en ont besoin et le remplacement des intégrations lourdes par façades tierces.

Style et mise en page

Le style et la mise en page sont le temps que le navigateur passe à calculer le CSS et la géométrie de la page. Les pages de collection Shopify avec de nombreuses fiches de produits, filtres, badges, échantillons et éléments collants peuvent dépenser beaucoup ici. Il en va de même pour les thèmes avec un balisage de générateur de pages profondément imbriqué.

Corrigez ce problème en réduisant la complexité du DOM, en simplifiant les sélecteurs, en évitant les problèmes de mise en page et en définissant des dimensions stables pour les images, les médias et les emplacements d'application injectés. Si PageSpeed signale également la taille du DOM, utilisez le Guide des tailles DOM excessives Shopify.

Rendu

Le rendu comprend les travaux de peinture et de compositing. Les grandes ombres, les filtres, les vidéos d'arrière-plan, les sections animées et les grandes superpositions d'images peuvent rendre le rendu coûteux. Utilisez les transformations et l'opacité pour l'animation, réduisez les zones de peinture et évitez les propriétés d'animation qui modifient la disposition.

Analyse HTML et CSS

Le coût d'analyse augmente lorsque la page contient trop de HTML ou de CSS. Les thèmes Shopify accumulent souvent des sections inutilisées, des wrappers de générateur de pages, du CSS d'application et des fichiers de style dupliqués. Nettoyez soigneusement les CSS inutilisés, concentrez-vous sur les CSS critiques et supprimez les restes d'applications après la désinstallation des outils.

Analyse et compilation de scripts

Avant que JavaScript ne s'exécute, le navigateur doit l'analyser et le compiler. Les gros bundles font mal même lorsque seule une partie du code est exécutée. C'est pourquoi il est important de supprimer le code inutilisé et de diviser le code spécifique au modèle. Le Réduire le temps d'exécution de JavaScript couvre la couche suivante.

Collecte des déchets

Le garbage collection apparaît lorsque les scripts allouent et nettoient la mémoire. Des carrousels lourds, des filtres, des widgets de personnalisation et des reconstructions répétées du DOM peuvent le déclencher. Si cette catégorie est élevée, recherchez le code qui crée à plusieurs reprises des tableaux, reconstruit des fiches produits ou restitue à nouveau les widgets lors du défilement et du redimensionnement.

Manuel étape par étape : réduire le travail sur le fil principal sur Shopify

1. Testez les bons modèles

Testez la page d'accueil, la page principale du produit, la page principale de la collection et un blog ou une page de destination. Une page d'accueil peut contenir beaucoup de vidéos tandis qu'une page de collection est riche en filtres. Ne faites pas la moyenne du problème. Associez les tests de laboratoire au tableau de bord des performances Web de Shopify et au Guide de suivi des performances Shopify.

2. Commencez par la plus grande catégorie

Si l'évaluation du script est de 2 800 ms et la mise en page de 400 ms, ne passez pas la journée à réduire le CSS. Si le style et la mise en page dominent, ne différez pas seulement les pixels. Le diagnostic est utile car il vous indique où doit se dérouler la prochaine heure.

3. Retarder les scripts non critiques en toute sécurité

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. Initialisez le code du thème uniquement là où il est nécessaire

De nombreux thèmes chargent un bundle global qui initialise chaque fonctionnalité de chaque modèle. Protégez le code coûteux derrière les vérifications DOM afin que le code multimédia du produit ne s'exécute pas sur les articles de blog et que les filtres de collection ne s'exécutent pas sur les pages de produits.

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

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

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

5. Lectures et écritures par lots

La mise en page se produit lorsque le code lit la mise en page à plusieurs reprises et écrit des styles dans la même boucle. Lisez d'abord les mesures, puis écrivez les modifications dans un cadre séparé.

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. Divisez les grandes tâches personnalisées

Si le code traite des centaines de fiches produits, d'échantillons ou de filtres à la fois, fragmentez le travail. Cela aide le navigateur à répondre entre les lots et protège 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();

Correction manuelle vs Thunder Fix

Comment confirmer la panne améliorée

Testez à nouveau la même page, le même mode de périphérique et les mêmes conditions de réseau. Le total du fil principal devrait diminuer, la catégorie la plus grande devrait diminuer et les mesures associées devraient s'améliorer. Pour les tests en laboratoire, surveillez le temps de blocage total et les tâches longues. Pour les performances sur le terrain, surveillez le comportement INP, LCP et de conversion.

Gardez à l'esprit de bons seuils : LCP doit être de 2,5 secondes ou plus, INP doit être de 200 ms ou plus et CLS doit être de 0,1 ou moins pour au moins 75 % des visites. Si votre panne est toujours élevée après le nettoyage de l'application et du script, continuez avec la guide complet d'optimisation de la vitesse Shopify, comparer l'automatisation dans le meilleures applications d'optimisation de vitesse Shopify, ou révision optimisation de vitesse professionnelle pour le nettoyage du code personnalisé.

FAQ