Cómo corregir "Excesivo DOM size" en una web

cómo solucionar Avoid excessive DOM size - recomendación de Google LightHouse

¿Qué es "Excessive DOM size"?

Cuando realizamos una auditoría de velocidad web en Google LightHouse con frecuencia nos encontramos con la recomendación «Excesivo tamaño de DOM». 

Eliminar Excesivo DOM - recomendación de Google LightHouse

Es una recomendación que encontramos con bastante frecuencia en páginas desarrolladas con constructores web como Divi, WP Bakery o Elementor entre otros.

Debemos advertir que es posible reducir el tamaño de DOM, pero no siempre es posible eliminar todo el DOM que Google LightHouse recomienda ya que se puede poner en peligro la estabilidad de la web. 

Un tamaño de DOM excesivo significa que hay demasiados nodos DOM (etiquetas HTML) en la página o que estas etiquetas html están ‘anidadas’ demasiado profundas.

Cuando una web tiene una cantidad excesiva de nodos DOM, a menudo el navegador necesita más poder de cómputo para mostrar la página y ésto ralentiza la carga de la web. 

La ejecución de JavaScript y CSS suele ser más lenta porque el navegador tiene que leer y analizar más ‘nodos’.

Un excesivo DOM da como resultado una carga de web más lenta y una puntuación de velocidad de página más baja en Google LightHouse y Google Page Speed.

Pero, ¿Qué significa DOM exactamente?

DOM significa modelo de objeto de documento.

El DOM es una representación de objeto estructurada en árbol de su HTML donde cada elemento html (por ejemplo: el cuerpo o h1) está representado por su propio nodo.

Qué significa DOM - Optimización Web Profesional

 

El HTML de la página es diferente a su DOM. 

El HTML representa el contenido de la página inicial y el DOM representa el contenido de la página actual. Cuando JavaScript agrega, elimina o edita nodos, el DOM se vuelve diferente al HTML

Si no conoces bien la diferencia, puedes consultar este tutorial sobre la diferencia entre HTML y DOM.HT

¿Cómo inspeccionar el DOM de una web?

Para conocer el DOM de una web puedes utilizar la herramienta DevTools, que es la herramienta con la que trabajamos los desarrolladores web. 

Cuando quieras trabajar con DOM o CSS, haz clic con el botón derecho en un elemento de la página y selecciona Inspeccionar para acceder al panel Elementos. O presione Comando+Opción+C (Mac) o Control+Mayús+C (Windows, Linux, ChromeOS).

 

Cuando desees ver los mensajes registrados o ejecutar JavaScript, presiona Comando+Opción+J (Mac) o Control+Mayús+J (Windows, Linux, ChromeOS) para acceder directamente al panel Consola. 

Inspeccionar el DOM de una web

Ver tutorial de cómo acceder a DevTools de distintas formas aquí

¿Qué causa el "Excessive DOM size"?

Un exceso de tamaño de DOM puede tener varias razones. Un tamaño excesivo de DOM generalmente está causado por:

  • Complementos mal codificados en su CMS.
  • Nodos DOM creados por un JavaScript.
  • Constructores de páginas que generan HTML inflado (por ejemplo: Elementor, Divi, WP Bakery…)
  • Texto que se copia y pega en un editor WYSIWYG (como tinyMCE).
  • Mala codificación de plantilla.

¿Cómo afecta realmente el excesivo DOM a la carga de una web?

Cuando hay excesivo DOM, la web tarda más en cargarse, lo que hace que sea casi imposible conseguir una buena puntuación en Google LightHouse.

Cuando optimizamos una web en WebRocket, nos encontramos principalmente 3 problemas en una web con un DOM excesivo.

  • El tamaño del HTML de la web es más grande porque su código está inflado. El tamaño de la web es más grande y tardará más tiempo en cargar.
  • El rendimiento del renderizado va más lento por el excesivo DOM. El navegador necesita hacer más cálculos (DOM) en la primera carga y cada vez que un usuario o un script interactúa con la página.
  • El  navegador necesita más memoria al interactuar con el DOM a través de JavaScript.

Cómo solucionar "Excesivo tamaño de DOM" en una web

Si analizas la web con Google Lighthouse, la herramienta te dirá dónde se encuentra el origen del problema y la profundidad máxima de DOM.

A partir de ahí, debes buscar un poco. Inspecciona el código e intenta averiguar qué está creando una gran cantidad de nodos DOM. 

Suele haber varias causas:

  • Nodos DOM creados por un JavaScript. Un JavaScript, por ejemplo, un widget de chat, podría inyectar una gran cantidad de nodos DOM en el DOM. En este caso, elimina el archivo JavaScript o busca un reemplazo con la misma funcionalidad.
  • Constructores de páginas que generan excesivo DOM Los pagebuilders como Elementor,  WP Bakery o Divi (entre otros) junto a sus plantillas, a menudo generan HTML inflado con una gran cantidad de nodos DOM. Cuando el DOM se debe al constructor web, no hay forma de solucinarlo.  La solución pasa por limpiar el código inflado y cambiar (en lo que se pueda) su flujo de trabajo.
  • Texto que se copia y pega en un editor WYSIWYG La mayoría de los editores WYSIWYG como TinyMCE hacen un mal trabajo al limpiar el código pegado, especialmente cuando se pega desde otra fuente de texto enriquecido como Microsoft Word. No solo se copia el texto, también los estilos. Esos estilos pueden estar incrustados en una gran cantidad de nodos DOM. La solución a este problema es simple: dejar de pegar contenido en su editor.  También tendrás que limpiar las páginas que ya tienen texto pegado e inflado (algo bastante pesado por otro lado…)
  • Mala codificación (plantilla).  Cuando la plantilla tiene código inflado y es parte del núcleo de tu web, no puedes hacer mucho más. Lo mejor es cambiar de plantilla directamente y empezar de cero.
  • Plugins con código inflado en WordPress. Cuando un plugin crea una gran cantidad de nodos DOM, lo mejor es intentar limpiar ese código todo lo que se pueda y para ser más prácticos, si se puede sustituir por otro plugin, mejor que mejor.

Otra solución para 'evitar el tamaño excesivo de DOM'

A veces, no es posible eliminar el tamaño excesivo de DOM sin reescribir grandes partes del código de una web o cambiar su flujo de trabajo. 

Existen algunas soluciones «alternativas» para disminuir el impacto de un tamaño de DOM excesivo.

Esas soluciones podrían afectar al SEO o indexación de tu web en algunos casos.

 

Diferir la carga de tu web en varias partes 
Para acelerar el renderizado inicial, puedes probar la carga diferida de algunas partes de tu web, como por ejemplo, el pie de página.

Mejore la representación de la página con la visibilidad del contenido.
La propiedad de visibilidad del contenido de CSS le dice al navegador que omita el estilo y los estilos hasta que lo necesite, lo que podría disminuir el impacto del DOM durante la carga.

No alargar demasiado las páginas
Nos hemos encontrado páginas de inicio sumamente largas, llenas de elementos y excesivo DOM. Se podría dividir una página en varias de forma que se tengan menos nodos DOM.  de nodos DOM.

Evitar el uso intensivo de memoria de JavaScript.
Cuando trabajes con una gran cantidad de nodos DOM en tu web, ten mucho cuidado con JavaScript.

documento.getElementsByTagName('div');

podría cargar una gran cantidad de DOMnodes, lo que aumentaría el uso de la memoria.

Evitar declaraciones de CSS complicadas

Cuando trabaje con una gran cantidad de nodos DOM en su página, tenga mucho cuidado con las declaraciones CSS complicadas. Por ejemplo:

div: último hijo; 

necesita verificar el estado de lsat-child para cada div en su página.

Conclusiones

Eliminar el excesivo tamaño de DOM no es fácil y debe hacerse de forma manual revisando el código de la web, eliminando lo sobrante. No existen plugins ni más trucos que ese.

A veces, los nodos de DOM forman parte del núcleo de la web y no es posible eliminarlo.

Cuando el excesivo DOM procede de plugins, lo mejor es eliminarlos y sustituirlos por otros más ligeros.

Se pueden conseguir altas puntuaciones en Google LightHouse aunque siga apareciendo la recomendación de «Avoid Excessive DOM», ya que no siempre es posible eliminarlo como solicita Google. 

También te puede interesar...

¿Quieres saber más sobre WPO?

Déjanos tu email y te enviaremos periódicamente tips sobre WPO, diseño, seguridad y accesibilidad web.

guia de optimización web - wpo - webrocket

Deja una respuesta

Tu dirección de correo electrónico no será publicada.