El DOM es la estructura de la página tal como la arma el navegador: cada div, párrafo, imagen, ícono y enlace es un elemento. Una página sencilla tiene unos cientos. Una página hecha con un constructor visual, con un menú enorme y una lista de productos, puede tener miles.
Más elementos significa más memoria, más tiempo para calcular estilos y, sobre todo, una página que responde más lento a los clics (la métrica INP de Google). Lighthouse empieza a advertir cuando la página supera aproximadamente los 1.400 elementos.
Cómo contarlos
Abre la página, presiona F12, ve a la pestaña Consola y escribe:
document.querySelectorAll('*').lengthPara ver qué zona aporta más, cuenta solo dentro de una parte (por ejemplo, la cabecera):
document.querySelector('header').querySelectorAll('*').lengthLos sospechosos de siempre en WordPress
1. Constructores visuales
Cada sección de un constructor suele generar varias capas de contenedores: sección, contenedor, columna, envoltura del widget, el widget. Un simple título puede quedar dentro de seis div. Una página con 30 secciones suma rápido.
Qué hacer: en los constructores modernos, activa las opciones de «DOM optimizado» o «contenedores flexibles» que reducen capas. Para páginas nuevas, considera el editor de bloques nativo, que genera mucho menos código.
2. Menús que se repiten
Muchos temas imprimen el menú dos veces: una para computador y otra para celular, y ocultan una con CSS. Con un megamenú de 200 enlaces, son 400 enlaces en cada página.
Qué hacer: revisa si tu tema permite usar un mismo menú para ambos. Y simplifica: un menú con 200 enlaces tampoco es fácil de usar.
3. Íconos SVG repetidos
Los íconos SVG incrustados en el HTML son buenos, pero cada uno trae sus propios elementos internos. Una tabla de comparación con 300 «✓» en SVG suma más de mil elementos.
Qué hacer: usa un carácter de texto o una imagen CSS para íconos que se repiten mucho.
4. Comentarios sin paginar
Una entrada con 500 comentarios y sus respuestas es una página enorme.
Qué hacer: en Ajustes → Comentarios, activa Dividir los comentarios en páginas con unos 30 por página.
5. Listados largos
Tiendas con 100 productos por página, filtros con cientos de opciones, el pie con todas las etiquetas del sitio.
Qué hacer: pagina los listados (24 o 36 productos), muestra solo los filtros principales y quita la nube de etiquetas.
Un truco CSS que ayuda: content-visibility
Para secciones largas que están más abajo de lo que se ve al cargar (pie de página, comentarios, secciones de la portada), la propiedad content-visibility: auto le dice al navegador que no las dibuje hasta que la persona se acerque. En Apariencia → Personalizar → CSS adicional (o en los estilos de tu tema de bloques):
.site-footer,
.comments-area,
.cwp-seccion-larga {
content-visibility: auto;
contain-intrinsic-size: auto 800px;
}contain-intrinsic-size reserva un alto aproximado para que la barra de desplazamiento no salte.
No uses content-visibility en lo que está arriba en la página (cabecera, primer bloque), ni en elementos con enlaces de anclas internas que necesites que funcionen al instante. Prueba siempre en el celular después del cambio.
Mide antes y después
Anota el número de elementos y la métrica de interacción (INP) de PageSpeed antes de cambiar nada. Así sabrás qué cambio sirvió de verdad.
¿Cuántos elementos tiene tu portada? Compártelo en el foro junto con el tema o constructor que usas y te ayudamos a encontrar dónde recortar.
