Solucionar la advertencia de Lighthouse 'avoid excessive-DOM size'

¿Qué es la advertencia de Lighthouse 'excessive-DOM size'?

¿Qué es la advertencia avoid excessive-DOM size en Lighthouse? Lighthouse marca las páginas que tienen:

• más de 1.500 nodos DOM en total.
  Esto significa que hay más de 1500 elementos HTML en nuestra página.
• una profundidad máxima de nodo superior a 32 nodos.
  Esto ocurre cuando un elemento está anidado en al menos 32 elementos padres.
• un nodo padre con más de 60 nodos hijos.
  Esto puede suceder cuando un elemento padre (como una tabla o una lista) tiene más de 60 hijos (filas de tabla o elementos de lista)

La advertencia 'avoid excessive DOM size' no afecta directamente a ninguna métrica de Lighthouse. En teoría, las páginas con un gran tamaño de DOM podrían cargar bastante rápido. En la práctica, a menudo no lo hacen. Un tamaño excesivo del DOM probablemente afectará indirectamente a métricas importantes de Lighthouse como Largest Contentful Paint (LCP) y Cumulative Layout Shift (CLS).

Un recordatorio rápido: ¿Qué es el DOM?

DOM significa Document Object Model. El DOM es una representación de objetos estructurada en árbol de tu HTML donde cada elemento html (por ejemplo: el body o h1) está representado por su propio nodo.

¿Qué causa un tamaño excesivo del DOM?

Un tamaño excesivo del DOM puede tener varias razones. Un tamaño excesivo del DOM suele ser causado por:

• Plugins mal codificados en tu CMS.
• Nodos DOM creados por un JavaScript.
• Constructores de páginas que generan HTML inflado (por ejemplo: Elementor o WP Bakery).
• Texto copiado y pegado en un editor WYSIWYG (como TinyMCE).
• Mala codificación de la plantilla.

¿Cómo afecta 'excessive-DOM size' a la velocidad de la página?

Un gran DOM no afecta directamente a las métricas de Lighthouse. Sin embargo, hace que la renderización de una página web sea innecesariamente complicada, haciendo casi imposible obtener esa alta puntuación en Lighthouse. Tu navegador necesitará hacer más trabajo antes de que la página web pueda mostrarse en la pantalla. Hay 3 problemas con un gran DOM.

• El tamaño de tu HTML es mayor porque tu código está inflado. Esto aumentará el tiempo que tarda en descargarse tu página.
• Un gran tamaño de DOM ralentizará el rendimiento de renderizado. Tu navegador necesita hacer más cálculos (DOM) en la primera carga y cada vez que un usuario o un script interactúa con tu página.
• Tu navegador puede usar mucha más memoria al interactuar con el DOM a través de JavaScript.

Cómo solucionar 'avoid excessive-DOM size'

Para solucionar la advertencia 'avoid excessive-DOM size', primero necesitarás rastrear sus orígenes. Lighthouse te dará una indicación de dónde se encuentran la Profundidad Máxima del DOM y los Elementos Hijos Máximos. A partir de ahí, necesitas investigar un poco. Usa el inspector DOM de tu navegador web y revisa el DOM. Intenta averiguar qué está creando un gran número de nodos DOM. Hay 5 sospechosos habituales:

1. Plugins mal codificados en tu CMS.
   Cuando un plugin, por ejemplo un slider o un plugin de calendario, crea una gran cantidad de nodos DOM, podrías considerar reemplazar este plugin con uno más optimizado.
2. Nodos DOM creados por un JavaScript.
   Un JavaScript, por ejemplo un widget de chat, podría inyectar un gran número de nodos DOM en el DOM. En este caso, elimina el archivo JavaScript o encuentra un reemplazo con la misma funcionalidad
3. Constructores de páginas que generan HTML inflado
   Los constructores de páginas como Elementor o WP Bakery a menudo crean código inflado que tiene un gran número de nodos DOM. No hay una solución fácil para esto. Los PageBuilders son a menudo parte del flujo de trabajo. La solución incluye limpiar tu código inflado y cambiar tu flujo de trabajo.
4. Texto copiado y pegado en un editor WYSIWYG
   La mayoría de los editores WYSIWYG como TinyMCE hacen un mal trabajo limpiando el código pegado, especialmente cuando se pega desde otra fuente de texto enriquecido como Microsoft Word. No solo copiará el texto sino también los estilos. Esos estilos pueden estar incrustados en un gran número de nodos DOM. La solución a este problema es simple. Deja de pegar contenido en tu editor y limpia las páginas que ya tienen texto pegado e inflado.
5. Mala codificación (de plantilla).
   Cuando un gran tamaño de DOM es creado por tu editor o causado por tu plantilla, las cosas pueden ponerse feas. Esto significa que el código inflado es parte del núcleo de tu sitio web. Necesitarás cambiar de editor, reescribir partes de tu plantilla o incluso empezar desde cero.

Solución alternativa para 'avoid excessive-DOM size'

A veces no es posible eliminar el tamaño excesivo del DOM sin reescribir grandes partes de tu sitio y cambiar todo tu flujo de trabajo. Hay algunas soluciones alternativas para disminuir el impacto de un tamaño excesivo del DOM. Esas soluciones distan mucho de ser perfectas y podrían introducir un nuevo conjunto de desafíos que podrían afectar tu SEO o indexación en algunos casos.

• Carga diferida (Lazy load) de partes de tu página web.
  Para acelerar la renderización inicial, podrías considerar la carga diferida de partes de tu sitio web. Por ejemplo, el pie de página.
• Mejora la renderización de la página con content-visibility.
  La propiedad CSS content-visibility le dice al navegador que omita el estilo, el diseño y la pintura hasta que lo necesites, lo que podría disminuir el impacto del tamaño excesivo de los nodos.
• Divide páginas grandes en múltiples páginas.
  Dividir páginas grandes en múltiples páginas podría reducir el número de nodos DOM cuando el contenido en sí mismo creó muchos nodos DOM.
• Implementar desplazamiento infinito (infinite scroll).
  El desplazamiento infinito es básicamente carga diferida; al desplazarse a través de elementos repetidos como imágenes (Pinterest) o grandes tablas de datos, el desplazamiento infinito podría acelerar tu página considerablemente.
• Evita JavaScript intensivo en memoria.
  Cuando trates con una gran cantidad de nodos DOM en tu página, ten mucho cuidado con JavaScript. document.getElementsByTagName('div'); podría cargar un gran número de nodos DOM, lo que aumenta el uso de memoria.
• Evita declaraciones complejas.
  Cuando trates con una gran cantidad de nodos DOM en tu página, ten mucho cuidado con declaraciones CSS complicadas. div:last-child; necesita verificar el estado last-child para cada div en tu página.