Evita un tamaño excesivo de DOM

Un árbol del DOM grande puede ralentizar el rendimiento de tu página de varias maneras:

  • Eficiencia de la red y rendimiento de la carga

    A menudo, un árbol del DOM grande incluye muchos nodos que no son visibles cuando el usuario carga la página por primera vez, lo que aumenta innecesariamente el costo 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 constantemente la posición y el diseño de los nodos. Un árbol del DOM grande en combinación con reglas de estilo complicadas puede ralentizar considerablemente la renderización y la interactividad.

  • Rendimiento de la memoria

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

Por qué falla la auditoría del tamaño del DOM de Lighthouse

Lighthouse informa el total de elementos DOM de una página, la profundidad máxima de DOM de la página y sus elementos secundarios máximos:

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

Lighthouse marca las páginas con árboles DOM que tienen las siguientes características:

  • Emite una advertencia cuando el elemento body tiene más de ~800 nodos.
  • Se producen errores cuando el elemento del cuerpo tiene más de 1,400 nodos.

Cómo optimizar el tamaño del DOM

En general, busca maneras de crear nodos del DOM solo cuando sea necesario y de destruir nodos cuando ya no sean necesarios.

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 que no se muestran del documento cargado inicialmente y solo crearlos después de una interacción relevante del usuario, 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 de DOM de modificación de subárboles pueden ayudarte a identificar cuándo se crean los nodos.

Si no puedes evitar un árbol del DOM grande, otro enfoque para mejorar el rendimiento de la renderización es simplificar los selectores de CSS. Para obtener más información, consulta Cómo reducir el alcance y la complejidad de los cálculos de estilo de Google.

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

Orientación específica de la pila

Angular

Si renderizas listas grandes, usa el desplazamiento virtual con el kit de desarrollo de componentes (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 la cantidad de renderizaciones repetidas innecesarias con shouldComponentUpdate, PureComponent o React.memo.
  • Omite los efectos solo hasta que hayan cambiado ciertas dependencias si usas el hook Effect para mejorar el rendimiento del tiempo de ejecución.

Recursos