¿A que sabes por qué hay una guía especial de cómo reducir el tamaño del DOM con Elementor?
Elementor y el DOM
Si utilizas este famoso maquetador ya sabes que uno de sus males nunca del todo resuelto es el tamaño excesivo del DOM, y tengo 2 noticias para ti, una buena y una mala…
La mala noticia es que sí, Elementor por defecto tiende a crear un DOM de un tamaño excesivo, por sus propias características, e incluso por el modo de utilizarlo.
Elementor, si bien es increíblemente potente y flexible como maquetador, puede tener un impacto significativo en el tamaño del DOM de la web. Esto se debe a que Elementor te permite crear diseños complejos con múltiples secciones, columnas y widgets, lo que puede generar que se añada una gran cantidad de elementos HTML a la página.
A medida que se procesa cada widget, sección y columna en el DOM, el tamaño general del DOM aumenta. Esto puede generar un DOM «inflado», donde hay demasiados elementos para que el navegador los procese y represente de manera eficiente.
Pero tampoco te creas que hay que venirse muy arriba añadiendo widgets, porque Elementor por sí solito ya genera suficiente HTML, a poco que añadas. Por ejemplo, para un widget de encabezado H2 genera todo este HTML:
¿A que es una barbaridad?
Eso mismo, en el editor de bloques de WordPress requiere mucho menos HTML:
Añade aquí un encabezado
Pero bueno, la noticia buena es que puedes optimizar Elementor para reducir, mucho, el tamaño del DOM que genera.
Y la lista de cosas que tienes que revisar la tienes aquí mismo, pero siempre antes revisa la guía de cómo optimizar el DOM en WordPress, pues todo lo ahí explicado también se aplica a la hora de usar Elementor.
Te resumo los puntos que encontrarás en la guía, no dejes de revisarla antes de seguir:
¿Has visto ya la guía de cómo optimizar el DOM en WordPress?
Seguimos, y empezamos con la parte que le toca a Elementor…
Simplifica la estructura de tus diseños y maquetación
Pues sí, igual que con el editor de bloques o cualquier otro maquetador. Si puedes crear un diseño con elementos sencillos no lo compliques innecesariamente.
Técnicas para reducir secciones, columnas y elementos anidados:
- Utiliza menos secciones y columnas: consolida el contenido en menos secciones y columnas combinando elementos relacionados y evitando divisiones innecesarias. Esto reduce la cantidad de nodos DOM y simplifica la estructura de la página.
- Evita la anidación profunda: mantén la anidación de secciones, columnas y elementos en un nivel superficial. Los elementos anidados profundamente aumentan la complejidad del DOM y pueden ralentizar la representación.
- Agrupa contenido similar: utiliza técnicas de agrupación para combinar contenido similar en secciones o columnas individuales en lugar de distribuirlo en múltiples elementos.
- Elimina widgets redundantes: identifica y elimina widgets que tengan el mismo propósito o que puedan reemplazarse con alternativas más simples.
- Combina funcionalidades: utiliza widgets multifuncionales que puedan realizar varias tareas en lugar de utilizar múltiples widgets para cada tarea.
- Usa más el widget de editor de texto: si vas a introducir mucho texto con varios encabezados y recursos, un único widget de editor de texto requiere mucho menos HTML que hacer lo mismo con varios widgets de encabezado, texto, etc.
- Usa CSS personalizado: si vas a usar varios widgets para conseguir un efecto de diseño, mejor utiliza CSS personalizado, consume menos recursos, es reutilizable y genera mucho menos DOM.
Elige bien los complementos para Elementor
Es bastante habitual encontrarse una instalación de WordPress con Elementor en la que hay, además, instalados 3 o 4 plugins que complementan el maquetador, añadiendo widgets y otras funcionalidades.
Si no tienes suficiente con la versión gratuita de Elementor hay plugins con los que puedes prácticamente igual a Elementor Pro, pero no te repitas, no termines comprando Elementor Pro y dejando plugins que hacían lo mismo.
Otro error muy común es instalar varios plugins de widgets adicionales para Elementor sin probarlos suficientemente, y terminar usando un plugin de 20 widgets para únicamente utilizar uno de ellos. Y aunque hay algunos de estos plugins que están bien desarrollados, y no cargan nada innecesario, hay otros que aunque solo uses uno de sus widgets te carga scripts y estilos de todos los demás.
Por supuesto, todo esto aumenta el tamaño del DOM, ralentiza la velocidad de carga de tus páginas, y de paso consume muchos recursos, así que elige bien y vigila qué uso haces de los complementos para Elementor.
Usa contenedores
En el pasado, en Elementor se usaban secciones o columnas para estructurar sitios web. Hoy en día, puedes aplicar CSS flex y CSS grid para lograr la misma estructura visual con menos código. Por esta razón, Elementor introdujo los llamados contenedores.
Al convertir tus elementos estructurales en contenedores, puedes simplificar la estructura HTML y eliminar el volumen innecesario.
Mientras que las secciones se apilan una encima de la otra, las columnas se posicionan una al lado de la otra. Por otro lado, los contenedores pueden apilar elementos internos en una fila o en una columna. Podemos usar estas diferencias para optimizar algunas estructuras.
Si una sección tiene múltiples columnas, las estructuras convertidas tendrán un contenedor de dirección de columna con múltiples contenedores de dirección de fila. Sin embargo, si una sección contiene una sola columna, puedes optimizar esta estructura al convertirla en contenedores.
Puedes eliminar un nivel de contenedor sin afectar el diseño. Obteniendo una reducción del 50% del tamaño del DOM, de cuatro elementos
Vale la pena señalar que realmente puedes disminuir el tamaño del DOM en elementos de sección/columna que anidan secciones internas. En estos casos, el elemento emplea ocho niveles de elementos
a cuatro niveles, y en algunos casos a solo dos niveles de elementos .Si aún estás usando una estructura de diseño de sección/columna, es hora de migrar a contenedores. Los beneficios superan el trabajo que invertirás en el proceso de migración. Para simplificar la migración, Elementor incluso proporciona un conveniente botón de «Convertir» para este propósito.
Lo vas a entender mejor con un ejemplo…
Estructura HTML de sección/columna:
Al usar secciones y columnas, el HTML final consiste en dos niveles de diseño, cada uno de los cuales tiene dos elementos
, dos para secciones y dos para columnas. En total, envolvemos los widgets con cuatro elementos 
