Evita un tamaño excesivo de DOM: solución a este mensaje de Google Page Speed
El mensaje "Evita un tamaño excesivo de DOM" que nos arroja Google Page Speed se debe a que tienes demasiados elementos HTML en la estructura de tu contenido (no te preocupes que no es nada técnico ni complejo). Para evitar que tu web acabe cayendo en problemas de lentitud, aquí te explico sus 7 posibles causas y sus 7 soluciones.
Qué es el tamaño del DOM
El Document Object Model (DOM) es básicamente la estructura jerárquica que los navegadores crean al cargar un documento HTML. En otras palabras, cada elemento de tu página web, ya sean etiquetas, atributos, texto o scripts, forma parte de este árbol DOM.
Ejemplo de DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo del DOM</title>
</head>
<body>
<header>
<h1 id="titulo-principal">¡Hola, DOM!</h1>
</header>
<main>
<section class="seccion">
<p class="parrafo">Este es un párrafo dentro de una sección.</p>
<button id="boton-cambiar-texto">Cambiar Texto</button>
</section>
</main>
<footer>
<p>© 2025 Ejemplo de DOM</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Profundizando un poquito más, cuando hablamos del tamaño del DOM, nos referimos a la cantidad total de nodos (elementos) que forman ese árbol. Esto incluye etiquetas HTML visibles (como <div>, <p> o <img>), comentarios, scripts y otros elementos no visibles.
¿Cómo se mide el tamaño del DOM?
El tamaño del DOM se evalúa principalmente a través de tres métricas clave:
- Número total de nodos: la cantidad de elementos en el árbol DOM.
- Profundidad del árbol: la distancia desde la raíz (la etiqueta
<html>) hasta el nodo más profundo. - Número promedio de nodos hijos por elemento: cuántos elementos secundarios tiene cada nodo en promedio.
Por qué deberías tomarte este mensaje de Page Speed en serio
Optimizar el tamaño del DOM es crucial porque un DOM excesivo impacta negativamente en el WPO, la experiencia del usuario y el SEO. Piensa que los navegadores tardan más en procesar y renderizar páginas con DOM grandes, lo que retrasa la carga y consume más recursos, especialmente en dispositivos menos potentes.
Y no solo eso, más allá de los motores de búsqueda, piensa que esto afecta la interactividad, haciendo que clics y animaciones se sientan lentos, lo que puede aumentar la tasa de rebote. Por último, un DOM complejo puede dificultar que los motores de búsqueda indexen el contenido, perjudicando tu posicionamiento.
Causas comunes de un DOM excesivo
Un DOM excesivo se genera principalmente por malas prácticas de desarrollo que añaden elementos innecesarios o mal organizados al árbol del DOM. Aquí te dejo las causas más comunes que debes identificar y evitar:
1. Estructuras HTML complejas y anidadas
Es habitual encontrar diseños con múltiples niveles de anidación de etiquetas <div> o <span> innecesarios. Esto ocurre, por ejemplo, cuando se usan maquetadores pesados como Elementor o directamente contenedores para organizar estilos visuales en lugar de aplicar CSS directamente a elementos más simples.
Ejemplo:
<div>
<div>
<span>
<p>Texto aquí</p>
</span>
</div>
</div>
Esta estructura podría simplificarse eliminando las etiquetas redundantes.
<div> para organizar el diseño.2. Uso excesivo de elementos no semánticos
Incluir demasiados <div> y <span> en lugar de etiquetas semánticas como <header>, <article>, <nav> o <footer> aumenta innecesariamente el tamaño del DOM. Las etiquetas semánticas no solo mejoran la claridad del código, sino que también ayudan a los motores de búsqueda a interpretar mejor el contenido.
<div> y <span> por etiquetas semánticas como <header>, <article>, y <footer>. Esto no solo reduce la complejidad del DOM, sino que también mejora la accesibilidad y el SEO del sitio.3. Generación dinámica de contenido sin control
El contenido dinámico generado mediante JavaScript, como listas de productos, comentarios o elementos de navegación, puede crecer sin límites si no se gestionan adecuadamente. Por ejemplo, cargar todos los comentarios de un artículo en lugar de mostrarlos por páginas (paginación) aumenta considerablemente el tamaño del DOM.
4. Componentes repetitivos o redundantes
En sitios con diseño modular, como los construidos con frameworks o CMS (WordPress o React, entre otros), los componentes mal diseñados pueden duplicar nodos sin necesidad. Esto sucede, por ejemplo, cuando se reutilizan widgets o se insertan elementos que ya están presentes en otra parte del sitio.
5. Carga innecesaria de bibliotecas o plugins
Plugins de terceros o bibliotecas externas suelen añadir elementos al DOM para agregar funcionalidades como formularios, sliders o efectos visuales. Sin embargo, muchos de estos generan HTML redundante o no optimizado. Esto es especialmente común en temas mal codificados o constructores de páginas sobrecargados.
6. Uso excesivo de tablas para diseño
Crear tablas <table>, aunque en ocasiones es necesario, genera estructuras de diseño en lugar de CSS. Esto crea un árbol DOM profundamente anidado y difícil de mantener.
Ejemplo:
<table>
<tr>
<td>
<div>Contenido aquí</div>
</td>
</tr>
</table>
7. Listas o grids sin paginar
Listas largas, como catálogos de productos, galerías de imágenes o comentarios, generan cientos (o miles) de nodos si no se implementa la paginación o carga progresiva (lazy loading). Esto es un problema frecuente en sitios de comercio electrónico.
Estrategias para reducir el tamaño del DOM
Corregir el problema del tamaño excesivo del DOM está bien, pero mejor aún es si lo puedes evitar. Para ello, aquí te dejo 11 consejos que deberías tener en cuenta.
- Revisa los maquetadores que usas: maquetadores como Elementor meten mucho código que aumentan el DOM. Yo, por eso, salvo que no me quede más remedio, uso Gutenberg con el plugin de Ultimate Shortcode, que me parece bastante ligero.
- Evita los frameworks que generan HTML redundante, como los que crean demasiados contenedores innecesarios; prioriza frameworks ligeros o librerías personalizadas.
- Utiliza plantillas condicionales para renderizar solo lo necesario; por ejemplo, carga elementos no críticos bajo demanda con JavaScript.
- Consolida listas y tablas dinámicas en estructuras más simples, combinando datos similares en menos elementos o usando vistas paginadas.
- Asegúrate de no duplicar componentes en el DOM por errores de lógica, como loops mal controlados en frameworks como React o Vue.
- Reemplaza estilos que dependen de múltiples clases o anidaciones profundas por clases reutilizables y genéricas (adopta utilidades como las de Tailwind CSS).
- Elimina nodos huérfanos o no visibles que quedan al cambiar el estado de elementos dinámicos (por ejemplo, `display: none` en lugar de eliminarlos).
- Simplifica la estructura HTML: Elimina elementos innecesarios y usa etiquetas semánticas como
<section>o<article>para evitar anidaciones excesivas. - Usa técnicas como `virtual DOM` o `lazy rendering` para manejar grandes volúmenes de datos sin cargarlos todos a la vez.
- Revisa plugins y bibliotecas externas: Analiza su impacto en el DOM y reemplaza los que añadan nodos innecesarios por alternativas más ligeras.
- Audita regularmente el DOM con herramientas como Lighthouse o el panel de rendimiento en Chrome DevTools para identificar nodos excesivos o inactivos.
Como este ultimo punto me parece bastante interesante, vamos a profundizar un poco en el siguiente punto.
Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.
¡Comienza mi curso de Screaming Frog gratis hoy!
El problema de Elementor y el DOM
Elementor, uno de los constructores de páginas más populares para WordPress, es conocido por su flexibilidad y facilidad de uso. Sin embargo, este constructor visual puede generar un DOM excesivamente grande debido a cómo genera las páginas.
Y es que, cada elemento que añades (secciones, columnas, widgets) introduce múltiples capas de HTML al árbol DOM, lo que puede afectar significativamente el rendimiento de tu sitio.
A favor, he de decir que en la versión 3.0, Elementor implementó mejoras significativas para optimizar el tamaño del DOM y mejorar el rendimiento de los sitios web. Una de las principales acciones fue la eliminación de varios elementos envolventes (wrappers) innecesarios en el HTML generado, como las clases .elementor-inner, .elementor-row y .elementor-column-wrap.
Así mismo, se introdujo la función "Optimized DOM Output", que permite a los usuarios activar o desactivar estas optimizaciones según las necesidades específicas de su sitio.
Aunque esto no es la solución definitiva, es cierto que mejoran bastante el rendimiento web. No obstante, te animo a seguir monitorizando el DOM para evitar que penalice tu visibilidad orgánica.
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!