Taille du DOM excessive

Silktide mesure combien d’éléments composent votre page et la profondeur de leur imbrication. Les pages comportant trop d’éléments se chargent plus lentement, réagissent moins vite et utilisent davantage de mémoire sur les appareils de vos visiteurs.

Chaque titre, paragraphe, image et conteneur d’une page est un élément dans le modèle interne du navigateur, le . Les navigateurs gèrent facilement quelques centaines d’éléments ; des pages qui en comptent des milliers rendent chaque calcul de style, phase de mise en page et mise à jour de script sensiblement plus lents.

Pourquoi c’est important

Les visiteurs perçoivent une page surdimensionnée comme de la lenteur : la page met plus de temps à apparaître, le défilement saccade et des interactions comme l’ouverture d’un menu présentent un décalage notable. L’effet est pire sur les appareils les moins puissants — téléphones d’entrée de gamme et ordinateurs plus anciens — si bien que les visiteurs au matériel le plus lent obtiennent la pire version de votre site.

Les pages surdimensionnées ne sont généralement pas conçues ainsi délibérément. Elles s’alourdissent au fil des ajouts : constructeurs de pages qui enveloppent tout dans des couches de conteneurs, variantes cachées d’un même contenu pour différentes tailles d’écran, et longues listes affichées en entier alors que les visiteurs ne voient que le premier écran.

Comment corriger

Identifiez ce qui gonfle la page. Les coupables fréquents sont les thèmes de constructeurs de pages qui génèrent des enveloppes très imbriquées, les méga-menus qui incorporent toute la structure du site dans chaque page, et les longs tableaux ou listes de produits affichés en entier.
Affichez les longues listes de manière incrémentale : montrez les premiers éléments et chargez-en d’autres au fil du défilement ou de la pagination, plutôt que d’insérer des milliers de lignes dans la page d’un seul coup.
Évitez de dupliquer le contenu selon les appareils. Stylisez une seule version avec le au lieu d’inclure des versions distinctes et masquées pour ordinateur et mobile du même contenu.
Divisez les pages très longues en plusieurs pages plus petites lorsque le contenu s’y prête.

Comment Silktide teste cela

Charge la page dans un véritable navigateur, en utilisant le type d’appareil, la vitesse de connexion et l’emplacement de test configurés pour vos tests de vitesse.
Compte les éléments qui composent la page entièrement chargée, y compris tout ce qui est ajouté par le .
Mesure trois statistiques et identifie l’élément responsable de chacune : le nombre total d’éléments, la profondeur maximale d’imbrication et le plus grand nombre d’enfants sous un même parent.
Attribue une note à chaque statistique. Environ 1 000 éléments au total, une imbrication d’environ 24 niveaux, ou un parent avec environ 45 enfants commencent à faire baisser la note ; autour de 1 500 éléments, 32 niveaux ou 60 enfants est considéré comme médiocre.

Dépannage

La page n’a pas l’air volumineuse

Le nombre d’éléments concerne la structure, pas le contenu visible. Une page visuellement simple peut contenir des milliers d’éléments si chaque élément visible est enveloppé dans de nombreuses couches de conteneurs, ou si du contenu pour d’autres tailles d’écran est présent mais masqué. Les éléments signalés pour chaque statistique montrent où se trouve réellement le gros.

Le grand nombre d’éléments provient de mon thème ou de mon constructeur de pages

C’est courant, et ce n’est généralement pas quelque chose que les éditeurs de contenu peuvent corriger. Transmettez la remarque à la personne qui maintient le thème ou les modèles du site ; désactiver les fonctionnalités inutilisées du constructeur de pages ou simplifier les modèles supprime souvent des centaines d’éléments d’un coup.