Lighthouse DOM Treemap - Cómo reducir el tamaño del DOM
En los últimos años Google ha lanzado muchas advertencias sobre el excesivo tamaño de su aplicación web. Esto tiene un coste muy elevado para el usuario: lentitud en el renderizado y bajo rendimiento del navegador y de la experiencia del usuario.
Para mejorar el rendimiento de su aplicación, Lighthouse ha introducido la opción de reducir el tamaño del DOM. Para muchas empresas, esta medida se ha implementado con el fin de reducir el consumo de memoria y, en consecuencia, el tamaño del documento global. Desgraciadamente, una pequeñísima mejora en el consumo de memoria, al menos en Chrome, podría traer de vuelta este problema de rendimiento.
Para ayudarte con esto, en Chrome tenemos ahora una nueva característica que te ayuda a localizar los lugares del árbol DOM que son realmente pesados: DOM Treemap.
El Treemap es una extensión de Chrome Developer Tools, donde puedes añadir una pestaña extra para la visualización del árbol DOM.
Puedes ver la ubicación de todos los nodos DOM en tu página actual. Para encontrar los elementos que tienen más hijos, simplemente haga clic en el botón "Hijos" en la esquina inferior derecha de la barra de herramientas.
La herramienta también se ha ampliado con una característica para visualizar BEM afiniciados. Esto le permite ver la intensidad de los nodos de su componente BEM en promedio.
