Taille du DOM excessive

Silktide mesure le nombre d’éléments qui composent votre page et la profondeur de leur imbrication. Les pages composées d’un trop grand nombre d’éléments se chargent plus lentement, répondent plus lentement 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 de la page 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, chaque passe de mise en page et chaque mise à jour de script sensiblement plus lents.

Pourquoi c’est important

Les visiteurs perçoivent une page surdimensionnée comme une lenteur générale : la page met plus de temps à apparaître, le défilement saccade, et des interactions comme l’ouverture d’un menu accusent un retard notable. L’effet est pire sur les appareils les moins puissants — téléphones intelligents d’entrée de gamme et ordinateurs plus anciens — de sorte que les visiteurs dotés du 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. Cela s’accumule : des constructeurs de pages qui enveloppent tout dans des couches de conteneurs, des variantes masquées du même contenu pour différentes tailles d’écran, et de longues listes affichées au complet même si les visiteurs ne voient que le premier écran.

Comment corriger le problème

Déterminez ce qui fait enfler la page. Les causes fréquentes sont les thèmes de constructeurs de pages qui génèrent des enveloppes fortement imbriquées, les méga-menus qui intègrent toute la structure du site dans chaque page, ainsi que de longs tableaux ou des listes de produits affichés au complet.
Rendez les longues listes de façon incrémentielle : affichez d’abord les premiers éléments et chargez-en davantage au fur et à mesure que le visiteur fait défiler ou passe d’une page à l’autre, plutôt que d’insérer des milliers de lignes dans la page d’un coup.
Évitez de dupliquer le contenu pour différents appareils. Appliquez le style à une seule copie avec le au lieu de livrer des versions distinctes masquées — pour ordinateur de bureau et pour mobile — du même contenu.
Divisez les pages très longues en plusieurs plus petites lorsque le contenu s’y prête.

Comment Silktide teste cela

Charger 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.
Compter les éléments qui composent la page entièrement chargée, y compris tout ce qui est ajouté par .
Mesurer trois statistiques et identifier l’élément responsable de chacune : le nombre total d’éléments, la profondeur maximale d’imbrication des éléments et le plus grand nombre d’éléments enfants sous un même parent.
Noter chaque statistique. Environ 1 000 éléments au total, une imbrication d’environ 24 niveaux ou un parent comptant environ 45 enfants commencent à faire baisser la note; aux alentours de 1 500 éléments, 32 niveaux ou 60 enfants, la note est jugée médiocre.

Dépannage

La page ne semble pas 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 destiné à d’autres tailles d’écran est présent mais masqué. Les éléments indiqués pour chaque statistique montrent où se trouve réellement la plus forte concentration d’éléments.

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

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