Lighthouse DOM Treemap - Comment réduire la taille du DOM
Au cours des dernières années, Google a émis de nombreux avertissements concernant la taille excessive de votre application web. Cela a un coût très élevé pour l'utilisateur : ralentissement du rendu et mauvaises performances du navigateur et de l'expérience utilisateur.
Afin d'améliorer les performances de votre application, Lighthouse a introduit l'option de réduction de la taille du DOM. Pour de nombreuses entreprises, cette mesure a été mise en œuvre afin de réduire la consommation de mémoire et, par conséquent, la taille du document global. Malheureusement, une très petite amélioration de la consommation de mémoire, du moins dans Chrome, pourrait ramener ce problème de performance.
Pour vous aider dans ce domaine, dans Chrome nous avons maintenant une nouvelle fonctionnalité pour vous aider à localiser les endroits de l'arbre DOM qui sont vraiment lourds : DOM Treemap.
Le Treemap est une extension de Chrome Developer Tools, où vous pouvez ajouter un onglet supplémentaire pour la visualisation de l'arbre DOM.
Vous pouvez voir l'emplacement de tous les nœuds DOM dans votre page actuelle. Pour trouver quels éléments ont le plus d'enfants, il suffit de cliquer sur le bouton "Children" dans le coin inférieur droit de la barre d'outils.
L'outil a également été étendu avec une fonctionnalité pour visualiser les affinités BEM. Cela vous permet de voir à quel point votre composant BEM est intensif en nœuds en moyenne.
