Solucionar la advertencia avoid excessive-DOM size en Lighthouse

Última revisión por Arjen Karel en febrero de 2026

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

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

• más de 1,500 nodos DOM en total.
  Esto significa que hay más de 1,500 elementos HTML en tu página.
• una profundidad máxima de nodo (maximum node depth) mayor a 32 nodos.
  Esto sucede cuando un elemento está anidado a 32 niveles de profundidad.
• 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).

Para poner estos números en perspectiva: de acuerdo con el capítulo Markup del Web Almanac 2024, la página mediana tiene 594 elementos DOM. En el percentil 90 salta a 1,716, lo que ya supera el límite de Lighthouse. Aproximadamente el 10% de todas las páginas web activan esta advertencia.

Desde Lighthouse 13 (octubre de 2025), esta auditoría ha evolucionado al insight "Optimizar tamaño del DOM" (Optimize DOM size). Ahora se activa en función de los recálculos de estilo reales y el trabajo de diseño (layout) que superan los 40 ms, no solo en conteos estáticos de nodos. Los umbrales anteriores todavía se reportan como puntos de referencia.

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

DOM significa Document Object Model (Modelo de Objetos del Documento). El DOM es una representación de objeto 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 excessive DOM size?

Un excessive DOM size puede tener múltiples razones. Un excessive DOM size generalmente es causado por:

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

El capítulo Markup del Web Almanac 2024 encontró que solo los elementos <div> constituyen el 28.7% de todos los elementos de la página. Esta "divitis" es un contribuyente importante a los tamaños excesivos del DOM, especialmente en las salidas de los constructores de páginas.

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

Un DOM grande no impacta directamente en las métricas de Lighthouse. Pero hace que renderizar una página web sea innecesariamente complicado, haciendo casi imposible obtener una puntuación alta en Lighthouse. Tu navegador necesitará hacer más trabajo antes de que la página web pueda ser mostrada en la pantalla. Hay 4 problemas con un DOM grande:

• El tamaño de tu HTML es mayor porque tu código está inflado. Esto aumentará el tiempo que lleva descargar tu página.
• Un tamaño de DOM grande 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 cuando interactúa con el DOM a través de JavaScript.
• Un DOM grande impacta directamente en la Interaction to Next Paint (INP). Cada vez que un usuario hace clic, toca o escribe, el navegador debe recalcular los estilos y el diseño (layout) para los elementos afectados. Cuantos más nodos DOM haya en la página, más tiempo llevará esto. Cuando el recálculo de estilo afecta a más de 300 elementos o toma más de 40 ms, se convierte en un problema medible para la INP. Por eso las páginas con miles de nodos DOM a menudo fallan en la INP incluso cuando su JavaScript es rápido.

La advertencia 'avoid excessive DOM size' probablemente afectará indirectamente importantes Core Web Vitals como el Largest Contentful Paint (LCP) y el Cumulative Layout Shift (CLS). Pero el mayor impacto es en la INP, que es el Core Web Vital que falla con más frecuencia.

Cómo solucionar 'avoid excessive-DOM size'

Para solucionar la advertencia 'avoid excessive-DOM size', primero deberás rastrear sus orígenes. Lighthouse te dará una indicación de dónde se encuentran la Profundidad Máxima del DOM (Maximum DOM Depth) y el Máximo de Elementos Hijos (Maximum Child Elements). A partir de ahí, debes investigar un poco. Utiliza el inspector del DOM en Chrome DevTools y revisa el DOM. Intenta descubrir qué está creando una gran cantidad de nodos DOM. Hay 5 sospechosos habituales:

1. Plugins mal codificados en tu CMS.
   Cuando un plugin, por ejemplo, un plugin de slider o 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 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 encuentra un reemplazo con la misma funcionalidad.
3. Constructores de páginas (Page builders) que generan HTML inflado.
   Los constructores de páginas como Elementor o WP Bakery a menudo crean código inflado que tiene una gran cantidad de nodos DOM. No hay una solución fácil para esto. Los constructores de páginas a menudo son parte del flujo de trabajo. La solución incluye limpiar tu código inflado y cambiar tu flujo de trabajo.
4. 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 (rich text) como Microsoft Word. No solo copiará el texto sino también los estilos. Esos estilos pueden estar incrustados en una gran cantidad 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 plantillas).
   Cuando un tamaño de DOM grande 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. Deberás cambiar de editor, reescribir partes de tu plantilla o incluso empezar desde cero.

Técnicas para reducir el impacto de un DOM grande

A veces no es posible eliminar el excessive DOM size sin reescribir grandes partes de tu sitio y cambiar todo tu flujo de trabajo. Existen varias técnicas para disminuir el impacto de un excessive DOM size:

.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

• Aplica lazy load en partes de tu página web.
  Para acelerar el renderizado inicial, podrías considerar aplicar lazy load a partes de tu sitio web. Por ejemplo, el pie de página (footer).
• Usa content-visibility: auto para omitir el renderizado de contenido fuera de pantalla.
  La propiedad CSS content-visibility le dice al navegador que omita el estilo, el diseño (layout) y el pintado (paint) de los elementos fuera de pantalla hasta que el usuario se desplace cerca de ellos. Ahora tiene un 93% de soporte del navegador (Chrome 85+, Firefox 125+, Safari 18+). Acompáñala siempre con contain-intrinsic-size para prevenir cambios de diseño (layout shifts):
• Divide páginas grandes en múltiples páginas.
  Dividir las páginas grandes en varias páginas podría reducir la cantidad de nodos DOM cuando el contenido en sí crea muchos nodos DOM.
• Implementa el desplazamiento virtual (virtual scrolling).
  Para listas largas, tablas de datos o galerías de imágenes, el desplazamiento virtual solo renderiza los elementos visibles en el viewport. Bibliotecas como react-window (React) y el módulo CDK Virtual Scrolling (Angular) mantienen el conteo de nodos DOM solo a los elementos visibles (típicamente 10 a 30 nodos) en lugar de miles.
• Evita JavaScript que consuma mucha 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 una gran cantidad de nodos DOM, lo que aumenta el uso de memoria.
• Evita declaraciones CSS complicadas.
  Cuando trates con una gran cantidad de nodos DOM en tu página, ten mucho cuidado con las declaraciones CSS complicadas. div:last-child; necesita verificar el estado de last-child para cada div en tu página. Los selectores más simples significan menos trabajo de recorrido (traversal) para el navegador. Esto es más importante para la INP, donde cada milisegundo de recálculo de estilo cuenta.

Después de reducir el tamaño de tu DOM, rastrea el impacto en usuarios reales con Real User Monitoring. En nuestros datos de CoreDash, reducir el conteo de nodos DOM por debajo de 1,500 generalmente mejora la INP en un 35% en dispositivos móviles.