Evita un tamaño excesivo de DOM

Un árbol del DOM de gran tamaño puede ralentizar el rendimiento de tu página de varias maneras:

  • Eficiencia de la red y rendimiento de carga

    Un árbol del DOM grande suele incluir muchos nodos que no son visibles cuando el usuario carga la página por primera vez, lo que aumenta innecesariamente los costos de datos para los usuarios y ralentiza el tiempo de carga.

  • Rendimiento del tiempo de ejecución

    A medida que los usuarios y las secuencias de comandos interactúan con tu página, el navegador debe volver a calcular la posición y el diseño de los nodos de forma constante. Un árbol del DOM grande combinado con reglas de estilo complicadas puede ralentizar considerablemente la renderización y la interactividad.

  • Rendimiento de la memoria

    Si tu código JavaScript usa selectores de consultas generales, como document.querySelectorAll('li'), es posible que, sin saberlo, almacenes referencias a una gran cantidad de nodos, lo que puede sobrecargar las capacidades de memoria de los dispositivos de los usuarios.

Cómo falla la auditoría de tamaño del DOM de Lighthouse

Lighthouse informa la cantidad total de elementos DOM de una página, la profundidad máxima del DOM de la página y la cantidad máxima de elementos secundarios:

Evita un tamaño excesivo de DOM. La auditoría de Lighthouse muestra la cantidad total de elementos DOM, la profundidad máxima del DOM y la cantidad máxima de elementos secundarios.
Lighthouse destaca los detalles del tamaño excesivo del DOM

Lighthouse marca las páginas con árboles del DOM que cumplen con las siguientes condiciones:

  • Advierte cuando el elemento body tiene más de 800 nodos aproximadamente.
  • Se producen errores cuando el elemento body tiene más de 1,400 nodos aproximadamente.

Cómo optimizar el tamaño del DOM

En general, busca la manera de crear nodos de DOM solo cuando sea necesario y destrúyelos cuando ya no se necesiten.

Si envías un árbol del DOM grande, intenta cargar tu página y anotar manualmente qué nodos se muestran. Quizás puedas quitar los nodos no mostrados del documento cargado inicialmente y crearlos solo después de una interacción del usuario pertinente, como un desplazamiento o un clic en un botón.

Si creas nodos DOM en el tiempo de ejecución, los puntos de interrupción de cambio del DOM de modificación de subárboles pueden ayudarte a identificar el momento en que se crean los nodos.

Si no puedes evitar un árbol del DOM grande, otra forma de mejorar el rendimiento de la renderización es simplificar tus selectores CSS. Consulta el artículo de Google Reduce the Scope and Complexity of Style Calculations para obtener más información.

Para obtener más detalles, consulta el artículo Cómo los tamaños grandes del DOM afectan la interactividad y qué puedes hacer al respecto.

Orientación específica para la pila

Angular

Si renderizas listas grandes, usa el desplazamiento virtual con el Component Dev Kit (CDK).

React

  • Usa una biblioteca de "ventanas" como react-window para minimizar la cantidad de nodos DOM que se crean si renderizas muchos elementos repetidos en la página.
  • Minimiza las renderizaciones repetidas innecesarias con shouldComponentUpdate, PureComponent o React.memo.
  • Omite efectos solo hasta que hayan cambiado ciertas dependencias si usas el enlace de Effect para mejorar el rendimiento del tiempo de ejecución.

Recursos