El DOM (modelo de objetos de documento) es el nombre general de la estructura de árbol de las etiquetas HTML. Su impacto en la velocidad de la página es tal que cuanto más compleja sea su estructura HTML durante la representación de la página, más lenta será su página.

Según Lighthouse, la complejidad de la La estructura DOM se mide utilizando tres métricas.. Para proporcionar estas métricas con sus puntos de referencia:

  • El número total de etiquetas debe ser menos de 1500
  • La profundidad máxima de la etiqueta debe ser menos de 32
  • El número máximo de etiquetas secundarias debe ser menos de 60

En el ejemplo anterior, la cantidad total de etiquetas es deficiente, la profundidad máxima de la etiqueta es buena, pero la cantidad máxima de etiquetas secundarias es deficiente.

La optimización de los elementos DOM es responsabilidad exclusiva de la parte interesada del frontend. Cada etiqueta elegida aleatoria o arbitrariamente cuando se crea por primera vez el código de la página tiene un costo una vez que se completa el proyecto. Por ello, invitamos a todos los desarrolladores frontend a un momento de silencio y a abrir los ojos.

Los puntos en los que un DOM inflado afecta negativamente al rendimiento de la página incluyen:

  • Las páginas con una gran cantidad de nodos (etiquetas) experimentarán Congestión de la red y dificultad de carga debido a su gran tamaño., aumentando así el TTFB (tiempo hasta el primer byte).
  • Representar nodos cargados para crear sus posiciones y estilos lleva tiempo, aumentando así FCP (First Contentful Paint).
  • A medida que aumenta el número de nodos, la carga necesaria con Las manipulaciones de JavaScript cargan la memoria., aumentando TFT (Tiempo de interacción).

Para ilustrar la optimización del DOM con un ejemplo muy simple, considere lo siguiente donde se reducen tanto el número como la profundidad del DOM:

<div id="nav-element">
 <ul>
 </ul>
</div>

En lugar de hacer esto:

<ul id="nav-element">
</ul>

Es necesario hacer esto: Los dos métodos más recomendados para reducir el tamaño del DOM son la carga diferida y la paginación. Dado que las estructuras de tarjetas en las páginas de listado contienen mucho DOM, se sugiere paginación o desplazamiento infinito. Al decidir la cantidad de elementos en la paginación, definitivamente se deben considerar los criterios de medición DOM. El tiempo habitualmente considerado para la cantidad de productos en la paginación es de 15 a 20 segundos, pero esta parte en realidad debería calcularse del lado de las partes interesadas del frontend, considerando el tamaño del DOM.

Una de las soluciones muy sencillas es no añadir elementos. que no son visibles en la página al HTML sin ocultarlos con CSS. Si es necesario mostrar un elemento, se debe llamar más tarde y mostrárselo al usuario. Debes tener en cuenta que ocultar elementos con CSS amplía el DOM.

Fuentes: