Shopify Taille excessive du DOM : Comment corriger l'avertissement PageSpeed (2026)

Solution rapide avec Thunder

Que signifie PageSpeed par taille excessive du DOM

Le DOM est le modèle live du navigateur de votre HTML. Chaque section, fiche produit, élément de menu, badge d'application, emballage de fenêtre contextuelle et modèle caché devient un nœud que le navigateur doit analyser, styliser, mettre en page et parfois mettre à jour avec JavaScript.

Les recommandations Lighthouse de Google indiquent généralement trois seuils : plus de 1 500 nœuds DOM au total, une profondeur maximale supérieure à 32 éléments imbriqués, ou un parent ayant plus de 60 éléments enfants. Shopify Les fils de discussion de la communauté sont remplis de marchands voyant 3,000, 5,000, ou même 7,000+ éléments et demandant s'ils ont besoin d'un Shopify expert. La réponse honnête : parfois oui, mais vous pouvez d'abord supprimer une quantité surprenante de l'éditeur de thème.

Un DOM volumineux ne nuit pas toujours directement à LCP, mais il ralentit le navigateur dans tout ce qui concerne LCP : calcul de style, mise en page, requêtes JavaScript, délégation d'événements et rendu des interactions. C'est pourquoi le ballonnement du DOM apparaît souvent à côté minimise le travail du thread principal, Exécution JavaScriptet avertissements INP.

Les causes spécifiques à Shopify

Étape 1 : Mesurez le DOM avant l'édition

Ouvrez la page, puis exécutez ceci dans la console Chrome DevTools :

document.querySelectorAll('*').length

Inspectez ensuite les plus grandes sections. PageSpeed ​​vous indique les totaux, mais DevTools vous indique où se trouve le ballonnement. Utilisez le panneau Éléments, réduisez les sections et comptez les contrevenants évidents : grilles de produits, méga menus, blocs de création de pages et racines d'applications injectées. Associez-le à notre Liste de contrôle d'audit de vitesse Shopify afin de ne pas corriger la taille du DOM tout en manquant des problèmes de script plus lourds.

Étape 2 : Limiter la collecte et les grilles de résultats de recherche

Les pages de collection sont le moyen le plus rapide de créer un grand DOM. Une fiche produit est rarement un élément. Il peut inclure deux images, un fournisseur, un titre, un prix, un prix de comparaison, un badge de vente, des échantillons de couleur, un formulaire d'ajout rapide, un bouton de liste de souhaits, des étoiles d'évaluation et des conteneurs d'applications.

Dans un modèle de collection, réduisez la taille initiale de la pagination :

{% paginate collection.products by 24 %}
  {% for product in collection.products %}
    {% render 'card-product', product: product %}
  {% endfor %}
{% endpaginate %}

Pour la plupart des magasins, 16 à 24 produits par page suffisent. Si vous utilisez le défilement infini, affichez uniquement la première page et récupérez le reste après interaction. Notre couvre cela plus en détail.

Étape 3 : Supprimer les balisages mobiles et de bureau en double

De nombreux thèmes affichent deux versions complètes du même contenu : un bloc de bureau et un bloc mobile, puis en cachent une avec CSS. Le visiteur voit une version, mais le navigateur analyse toujours les deux.

{%- comment -%}Avoid this pattern when the content is identical{%- endcomment -%}
<div class="hidden md:block">{% render 'mega-menu-desktop' %}</div>
<div class="md:hidden">{% render 'mega-menu-mobile' %}</div>

{%- comment -%}Prefer one semantic menu and change layout with CSS{%- endcomment -%}
<nav class="site-menu">
  {% render 'menu-items', menu: section.settings.menu %}
</nav>

Faites-le avec précaution. Certains menus mobiles nécessitent un comportement différent, mais les carrousels de produits dupliqués, les barres d'annonces dupliquées et les arborescences de menus dupliquées sont généralement des gains faciles.

Étape 4 : Auditer les intégrations d'applications et les extraits orphelins

Dans l'administration de Shopify, allez à Boutique en ligne -> Thèmes -> Personnaliser -> Applications intégrées. Désactivez tout ce qui n'a pas besoin d'être chargé sur chaque page. Recherchez ensuite dans vos fichiers de thème les anciens noms d'applications, domaines de script et extraits de code. Les applications supprimées il y a des mois peuvent laisser des wrappers thème.liquide ou modèles de produits.

Si une application est toujours nécessaire, chargez-la uniquement là où cela est important. Un widget d'avis appartient aux pages de produits, pas aux pages de politique. Un widget groupé appartient à proximité des sections d'achat, pas à chaque carte de collection. Pour connaître l'impact de la vitesse de l'application, comparez votre pile à notre Problème Recherche sur l'impact de la vitesse des applications Applications et qui ralentissent les magasins Shopify.

Correction manuelle vs Thunder Fix

L'Ordre de Priorité Pratique

1. Exécuter un test de vitesse et PageSpeed Insights sur votre modèle le plus fréquenté.
2. Installez Thunder ou différez manuellement les scripts non critiques si JavaScript bloque également le thread principal.
3. Découpez les grilles de collecte à 16-24 produits par page initiale.
4. Supprimez le contenu mobile/ordinateur de bureau en double caché.
5. Désactivez les applications intégrées inutilisées et supprimez les extraits d'applications orphelines.
6. Simplifiez les méga menus et les sections de création de pages.
7. Retestez avec la même URL et comparez les nœuds DOM, TBT, INP et LCP.

Si vous avez besoin d'un plan plus large, utilisez notre guide complet d'optimisation de la vitesse Shopify. Pour les avertissements PageSpeed associés, consultez les guides pour réduit le temps de blocage total de Shopify, corrige les chaînes de requêtes critiques de Shopify, et réduit les charges utiles du réseau Shopify. Pour un nettoyage pratique, notre Service d'optimisation de vitesse Shopify peut gérer les correctifs au niveau du thème en toute sécurité.

Références et Validation

Pour le diagnostic sous-jacent, comparez votre rapport avec Guide de taille du DOM de Chrome Lighthouse. Les seuils ne sont pas arbitraires ; ils reflètent la mémoire supplémentaire, le calcul du style et le coût de mise en page que le navigateur assume lorsqu'une page devient trop volumineuse.

Les discussions de la communauté Shopify sur la taille du DOM se résument généralement au même schéma : les marchands voient un chiffre PageSpeed effrayant, puis découvrent que la cause réelle est une accumulation de sections, d'intégrations d'applications, de menus dupliqués et de cartes de collection. Traitez l'avertissement comme une carte de nettoyage, et non comme la preuve que Shopify lui-même est défectueux. La meilleure approche est de réduire le balisage là où cela ne change rien pour le client, puis d'utiliser Thunder pour empêcher le JavaScript d'application restant de bloquer la page.