Índice
En la esfera digital, cada fracción de segundo cuenta. Por lo tanto, el rendimiento de un sitio web es crucial para la satisfacción y el compromiso del usuario. Mejorar el rendimiento puede aumentar la probabilidad de alcanzar los objetivos de tu sitio web.
Un sitio web con una salida de DOM grande aumenta el tamaño del HTML, lo que puede perjudicar el rendimiento del sitio. Sin embargo, hay técnicas para disminuir el tamaño del DOM de tu sitio. Esta publicación profundizará en cómo mejorar los sitios web de Elementor empleando varias estrategias para minimizar el tamaño del HTML.
Entendiendo el Problema del “Tamaño Extenso del DOM”
El DOM (Modelo de Objeto de Documento) representa la estructura de una página web. Un tamaño extenso del DOM generalmente indica una estructura DOM compleja, a menudo causada por el uso excesivo de elementos HTML, nodos anidados o inyecciones de contenido dinámico. Las páginas con un gran número de elementos HTML tienden a cargar lentamente y pueden afectar las animaciones y otras interacciones del usuario.
Impacto del Tamaño del DOM en el Rendimiento de la Página
Un tamaño grande del DOM puede aumentar el tiempo de renderizado, causando un renderizado de página retrasado y tiempos de carga más lentos. Esto se debe a que los navegadores tienen que analizar y renderizar cada nodo. Además, cada nodo del DOM requiere memoria del navegador, lo que puede llevar al agotamiento de los recursos del sistema y al aumento del consumo de memoria. Esto puede resultar en una degradación del rendimiento, especialmente en dispositivos de gama baja.
Además, un tamaño excesivo del DOM puede causar interacciones de usuario lentas y una disminución de la capacidad de respuesta durante el uso del sitio web. Un alto número de elementos del DOM a menudo incluye muchos oyentes de eventos, añadiendo sobrecarga y ralentizando las interacciones del usuario. No mencionaremos todas las razones, pero la regla general es que cuanto mayor sea el tamaño del HTML, más lenta será la página.
¿Cómo Medir el Tamaño del DOM con Herramientas Externas?
Para medir el impacto del tamaño del DOM en el rendimiento del sitio web, puedes usar las siguientes herramientas:
Google Chrome DevTools – Ve al panel «Elements» para verificar los elementos del DOM y su profundidad de anidación. Usa la pestaña «Performance» para evaluar el rendimiento del renderizado y detectar posibles cuellos de botella causados por la manipulación del DOM.
Lighthouse – Las auditorías de Lighthouse ofrecen información sobre métricas del tamaño del DOM como «DOM Size», «DOM Depth» y «Maximum DOM Depth», señalando áreas de mejora.
WebPageTest – Evalúa las métricas del tamaño del DOM en gráficos de cascada y resultados de rendimiento para entender la relación entre la complejidad del DOM y los tiempos de carga de la página.
¿Qué se Considera un Tamaño Grande del DOM?
Lighthouse marca las páginas con árboles DOM de la siguiente manera:
- Advierte cuando el elemento
<body>tiene más de 818 nodos. - Errores cuando el elemento
<body>tiene más de 1,400 nodos.
Sin embargo, estas métricas pueden cambiar en el futuro. Además, diferentes herramientas pueden establecer diferentes umbrales para advertir sobre el tamaño extenso del DOM.
Reduciendo el Tamaño del DOM en Elementor
Elementor es un constructor de sitios web visual de arrastrar y soltar que simplifica el proceso de agregar elementos a la página. Usar Elementor típicamente no impacta negativamente el rendimiento de tu sitio. Sin embargo, hay pasos que puedes tomar para optimizar aún más las páginas que construyes. Esto incluye reducir el número de elementos HTML que pueden minimizar el DOM, sin afectar el diseño.
Para optimizar eficazmente, es útil entender la estructura de los elementos de diseño de Elementor. Nos enfocaremos en los elementos de diseño porque una página típica contiene docenas de tales elementos, por lo que optimizarlos produce un mayor impacto.
Hay tres técnicas recomendadas para optimizar tus elementos de diseño:
- Migrar de secciones/columnas a contenedores.
- Aplanar contenedores con contenedores anidados simples.
- Implementar contenedores de ancho completo en lugar de contenedores de ancho en caja cuando sea posible.
Aprendamos más sobre cómo reducir el tamaño del DOM en Elementor.
Tipos de Elementos de Elementor
Elementor tiene dos tipos de Elementos:
- Widgets – todos los elementos regulares que usas para construir tu sitio web como encabezado, imagen, ícono, botón, divisor, etc.
- Elementos de Diseño – elementos estructurales como Sección/Columnas y Contenedores. Estos elementos envuelven los widgets y los agrupan.
Nos vamos a enfocar en los elementos de diseño en términos de cómo reducir el tamaño del DOM.
Estructura HTML de los Elementos de Diseño
En Elementor, cada elemento estructural consiste en dos etiquetas <div>: una externa <div> y una interna <div>.
Esto es importante de notar ya que vamos a ver cómo podemos reducir la cantidad de elementos HTML en tus elementos de diseño estructural.
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:
Elementor introdujo Contenedores como una forma de construir páginas con una estructura y DOM más delgados.
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>Aplanar la Estructura HTML Usando Contenedores
En el pasado, se usaban secciones o columnas para estructurar sitios web. Hoy en día, los sitios web modernos usan CSS flex y CSS grid para lograr la misma estructura visual con menos código. Por esta razón, Elementor introdujo 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 sitio 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.
Caja vs. Ancho Completo
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>Optimizar la Estructura de Contenedores Anidados
Ahora que entendemos las diferentes estructuras HTML de contenedores en caja y de ancho completo, podemos comenzar a optimizar la salida del DOM de nuestro sitio web, especialmente los contenedores que anidan otros contenedores dentro.
El siguiente consejo de optimización es el siguiente: Si tienes un contenedor principal que usa ancho en caja, puedes hacer que todos los contenedores anidados sean de ancho completo. De esta manera, obtienes el mismo diseño, pero con menos HTML.
<div class="e-con e-con-parent">
<div class="e-con-inner">
<div class="e-con e-con-child">
…
</div>
<div class="e-con e-con-child">
…
</div>
</div>
</div>La estructura HTML anterior tiene un contenedor principal en caja.
Si los dos contenedores secundarios también están en caja, cada uno consistirá en dos niveles de elementos <div>.
Pero si son de ancho completo, solo se usará un <div>.
Una vez más, esta optimización es válida solo si el contenedor principal está en caja.
Conclusiones
Como has visto, hay tres estrategias fáciles para optimizar el tamaño del DOM de tus elementos de diseño: reemplazar los elementos de diseño de sección/columna con contenedores; los contenedores con un solo contenedor anidado pueden ser aplanados; y si estás usando contenedores anidados y el contenedor principal está en caja, configura todos los contenedores internos a ancho completo.
Estas estrategias pueden ayudar a eliminar numerosos elementos <div> innecesarios del HTML de tu sitio web y mejorar el rendimiento general de tu página web.
¿Buscas contenido nuevo?
Recibe artículos y novedades en nuestro boletín semanal.
Al introducir tu correo electrónico, aceptas recibir correos electrónicos de Elementor, incluidos los de marketing,
y aceptas nuestros Términos y condiciones y Política de privacidad.
