¿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:
<div data-elementor-type="wp-page" data-elementor-id="307" class="elementor elementor-307"> <div class="elementor-element elementor-element-5872aba e-flex e-con-boxed e-con e-parent" data-id="5872aba" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6200af5 elementor-widget elementor-widget-heading" data-id="6200af5" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Añade aquí tu texto de cabecera</h2> </div> </div> </div> </div> </div>
¿A que es una barbaridad?
Eso mismo, en el editor de bloques de WordPress requiere mucho menos HTML:
<div class="page-content"> <h2 class="wp-block-heading">Añade aquí un encabezado</h2> </div>
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.
Minimiza el uso de widgets
Como hemos visto, los widgets a veces añaden demasiado HTML al DOM, pero puedes usar menos de este modo:
- 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 <div> a solo dos. Ahora multiplica esto por el número de elementos de diseño que tiene cada página, para calcular el impacto en tu web.
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 <div> antes de mostrar el widget. Convertir a contenedores puede reducir esto de ocho niveles de elementos <div> a cuatro niveles, y en algunos casos a solo dos niveles de elementos <div>.
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 <div>, dos para secciones y dos para columnas. En total, envolvemos los widgets con cuatro elementos <div>:
<div class="elementor-section"> <div class="elementor-container" > <div class="elementor-column"> <div class="elementor-widget-wrap"> <!-- widget –> <!-- widget –> <!-- widget –> </div> </div> </div> </div>
Estructura HTML de Contenedor:
Al cambiar a contenedores, el HTML resultante consiste en solo dos elementos <div>, no cuatro, lo que significa que obtienes el mismo diseño con la mitad de los elementos <div>:
<div class="e-con"> <div class="e-con-inner"> <!-- widget –> <!-- widget –> <!-- widget –> </div> </div>
Usa ancho completo en los contenedores
Un método adicional para optimizar el tamaño del DOM es diferenciando entre contenedores en caja y contenedores de ancho completo.
Un contenedor en caja tiene un ancho máximo, lo que requiere el uso de un elemento interno <div> en Elementor. Por otro lado, un contenedor de ancho completo estirado a ambos lados requiere solo un elemento <div>.
Estructura en Caja:
<div class="e-con"> <div class="e-con-inner"> <!-- widget –> <!-- widget –> <!-- widget –> </div> </div>
Estructura de Ancho Completo:
<div class="e-con"> <!-- widget –> <!-- widget –> <!-- widget –> </div>
Desactiva completamente las fuentes y tipografías externas
Además de que son un compromiso con la privacidad, no es necesario cargar fuentes tipográficas o de iconos específicas en Elementor, sobre todo si puedes usar las del tema.
Puedes desactivarlas desde los ajustes de Elementor.
O añadiendo unas funciones de código usando tu método favorito:
/* Desactivar Google Fonts de Elementor */
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
/* Desactivar Font Awesome de Elementor */
add_action('elementor/frontend/after_register_styles',function() {
foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
wp_deregister_style( 'elementor-icons-fa-' . $style );
}
}, 20 );
/* Desactivar Eicons */
add_action( 'wp_enqueue_scripts', 'disable_eicons', 11 );
function disable_eicons() {
wp_dequeue_style( 'elementor-icons' );
wp_deregister_style( 'elementor-icons' );
}
Configura los ajustes de Elementor para mejorar el DOM
Para terminar, dale siempre un repaso a los ajustes de Elementor, y no solo nada más instalarlo, sino después de cada actualización, pues de vez en cuando se incorporan ajustes con los que optimizar la carga del maquetador y las páginas que creas.
Aquí tienes lo que considero los ajustes de Elementor más óptimos para velocidad de carga, con las opciones disponibles actualmente:
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Gracias Fernando, genial como siempre. Este comportamiento de crear DOM excesivo ¿también pasa con el.maquetador Divi? Y en el caso que pase ¿DIVI 5 lo soluciona?
Muchas gracias.
Menos pero pasa, tengo en ciernes una guía similar para Divi
Ok, gracias Fernando.