Consejo de rendimiento de Elementor: Reduzca el tamaño del DOM para sitios web más rápidos - Photon Flux | Servicio profesional de reparaciones de WordPress, alcance global, respuesta rápida

Los sitios con mucha salida DOM aumentan el tamaño del HTML, lo que puede perjudicar el rendimiento del sitio. Sin embargo, existen técnicas para reducir el tamaño DOM de un sitio web. En este post veremos cómo puedes mejorar tu sitio web Elementor utilizando diversas estrategias para minimizar el tamaño del HTML.

Entender el problema del "DOM oversize

El DOM (Document Object Model) representa la estructura de una página web, y un tamaño grande del DOM suele ser indicio de una estructura DOM compleja, a menudo causada por el uso de demasiados elementos HTML, nodos anidados o inyección de contenido dinámico. Las páginas con un gran número de elementos HTML tienden a cargarse lentamente y pueden interferir con las animaciones y otras interacciones del usuario.

Impacto del tamaño del DOM en el rendimiento de la página

Los tamaños de DOM más grandes aumentan el tiempo de renderizado, lo que provoca retrasos en el renderizado de la página y tiempos de carga más lentos. Esto se debe a que el navegador debe analizar y procesar cada nodo. Además, cada nodo DOM requiere memoria del navegador, lo que puede provocar el agotamiento de los recursos del sistema y un mayor consumo de memoria. Esto puede provocar una degradación del rendimiento, especialmente en dispositivos de gama baja.

Además, un DOM grande puede ralentizar las interacciones del usuario y reducir la capacidad de respuesta durante el uso del sitio. Los elementos DOM grandes suelen contener muchos escuchadores de eventos, lo que añade sobrecarga y ralentiza la interacción del usuario. No mencionaremos todas las razones, pero la regla general es que cuanto más grande sea el 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, puede utilizar las siguientes herramientas:

Google Chrome DevToolsElementos: Vaya al panel Elementos para inspeccionar los elementos DOM y su profundidad de anidamiento. Utiliza la pestaña Rendimiento para evaluar el rendimiento del renderizado y descubrir posibles cuellos de botella causados por la manipulación del DOM.

Faro: La auditoría de Lighthouse proporcionó información sobre métricas del tamaño del DOM como "DOM Size", "DOM Depth" y "Maximum DOM Depth", señalando áreas de mejora. áreas de mejora.

WebPageTest : Evalúe las métricas de tamaño del DOM en diagramas de cascada y resultados de rendimiento para comprender la relación entre la complejidad del DOM y los tiempos de carga de las páginas.

¿Qué se considera un tamaño de DOM mayor?

FaroUtilice el árbol DOM para marcar la página, como se muestra a continuación:

<body>Avisa cuando un elemento supera los 818 nodos.
(coll.) suspender (a un estudiante)<body>Se produce un error cuando el elemento tiene más de 1.400 nodos.

Sin embargo, estas métricas pueden cambiar en el futuro. Además, las distintas herramientas pueden establecer umbrales diferentes para advertir de un tamaño excesivo del DOM.

Reducir el tamaño del DOM de Elementor

Elementor es un constructor visual de sitios web de arrastrar y soltar que simplifica el proceso de añadir elementos a una página. El uso de Elementor no suele tener un impacto negativo en el rendimiento de su sitio web. Sin embargo, se pueden tomar una serie de medidas para optimizar aún más las páginas creadas. Esto incluye la reducción del número de elementos HTML que minimizan el DOM sin afectar al diseño.

Para optimizar eficazmente, es útil comprender la estructura de los elementos de diseño de Elementor. Nos centraremos en los elementos de diseño porque una página típica contiene docenas de estos elementos, por lo que optimizarlos tendrá un mayor impacto.

Existen tres técnicas recomendadas para optimizar sus elementos de diseño:

Migración de secciones/columnas a contenedores.
Utilice un único contenedor anidado para aplanar el contenedor.
Implemente contenedores anidados de ancho completo en lugar de ancho de caja siempre que sea posible.

Aprendamos más sobre cómo reducir el tamaño del DOM de Elementor.

Elementor Tipo de elemento

Elementor tiene dos tipos de elementos:

widgetsTodos los elementos habituales utilizados para construir un sitio web, como encabezados, imágenes, iconos, botones, separadores, etc.
Elementos de diseñoElementos estructurales: elementos estructurales como secciones/columnas y contenedores. Estos elementos envuelven los widgets y los agrupan.

Céntrate en los elementos de diseño para ver cómo reducir el tamaño del DOM.

Estructura HTML de los elementos de diseño

En Elementor, cada elemento de estructura consta de dos<div>Composición de la etiqueta: un exterior<div>y un interior <div>Esto es importante porque aprenderemos a reducir el número de elementos HTML en un elemento de diseño estructural. Esto es importante porque aprenderemos a reducir el número de elementos HTML en un elemento de diseño estructural.

La estructura HTML de la sección/columna:

Cuando se utilizan secciones y columnas, el HTML final consta de dos niveles de disposición, cada uno con dos<div>elementos, dos para las partes y dos para las columnas. En total, utilizamos cuatro<div>Widget de embalaje de elementos:

<div class="elementor-section">
	<div class="elementor-container" >

		<div class="elementor-column">
			<div class="elementor-widget-wrap">

				<!-- widget –>
				<!-- widget –>
				<!-- widget –>

			</div>
		</div>

	</div>
</div>

La estructura HTML del contenedor:

Elementor presenta los contenedores como una forma de crear páginas con una estructura y un DOM más sencillos.

Al cambiar al contenedor, el HTML generado sólo contiene dos<div>elementos en lugar de cuatro, lo que significa que se puede obtener el mismo diseño utilizando la mitad de los elementos<div>.

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget –>
		<!-- widget –>
		<!-- widget –>

	</div>
</div>

Aplanar la estructura HTML con contenedores

En el pasado, los sitios web solían estructurarse mediante secciones o columnas. Hoy en día, los sitios web modernos utilizan CSS flex y CSS grid para conseguir la misma estructura visual reduciendo la cantidad de código. Por este motivo, Elementor ha introducidocontenedores. Al convertir los elementos estructurales en contenedores, puede simplificar la estructura HTML y eliminar redundancias innecesarias.

Las columnas se colocan una al lado de la otra, aunque las secciones se apilan juntas. En cambio, los contenedores pueden tener elementos internos apilados en fila o columna. Estas diferencias pueden aprovecharse para optimizar algunas estructuras.

Si una sección tiene varias columnas, la estructura convertida tendrá un único contenedor de dirección de columna y varios contenedores de dirección de fila. Sin embargo, si una sección contiene una sola columna, la estructura puede optimizarse al convertirla en contenedores. Se puede eliminar un nivel de contenedor sin que ello afecte al diseño. el tamaño del DOM se reduce en 50% de cuatro<div>a sólo dos. Ahora multiplique esto por el número de elementos de diseño por página para calcular el impacto en su sitio.

Cabe señalar que es posible reducir el tamaño DOM de los elementos de sección/columna en secciones interiores anidadas. En estos casos, el elemento<div>Los elementos de ocho niveles se utilizan antes de mostrar los widgets. La conversión a un contenedor lo reduce de un elemento de ocho niveles<div>a cuatro niveles, que en algunos casos pueden reducirse a sólo dos elementos<div>.

Si todavía se utiliza una estructura de secciones/columnas, es hora de migrar a contenedores. Las ventajas de hacerlo superan el trabajo que conlleva el proceso de migración. Para simplificar la migración, Elementor incluso proporciona un práctico botón "Convertir" para este propósito.

En caja y a todo lo ancho

Otra forma de optimizar el tamaño del DOM es distinguir entre contenedores en caja y de ancho completo.

Los contenedores en caja tienen una anchura máxima y, por lo tanto, requieren elementos internos en Elementor<div>. Por otro lado, los contenedores de ancho completo estirados hacia los lados sólo necesitan un<div>Elementos.

Construcción en caja:

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget –>
		<!-- widget –>
		<!-- widget –>

	</div>
</div>

Construcción de ancho completo:

<div class="e-con">

	<!-- widget –>
	<!-- widget –>
	<!-- widget –>

</div>

Optimización de las estructuras de contenedores anidados

Ahora que conocemos las diferentes estructuras HTML de los contenedores en caja y de ancho completo, podemos empezar a optimizar la salida DOM de nuestro sitio, especialmente los contenedores que anidan otros contenedores.

El siguiente truco de optimización es el siguiente: si tienes un contenedor padre que utiliza anchos de caja, puedes hacer que todos los contenedores anidados tengan ancho completo. De este modo, se obtiene 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 padre con un recuadro. Si los dos contenedores hijos también están enmarcados, cada contenedor constará de dos capas de<div>están compuestos. Sin embargo, si son de ancho completo, sólo serán<div>Usa uno.

De nuevo, esta optimización sólo funciona si el contenedor padre está en caja.

alcanzar un veredicto

Como puede ver, hay tres estrategias sencillas para optimizar el tamaño DOM de los elementos de diseño: sustituir los elementos de diseño de parte/columna por contenedores; los contenedores con un único contenedor anidado pueden extenderse; y si se utilizan contenedores anidados y el contenedor padre está en caja, establecer todos los contenedores interiores a ancho completo. Estas estrategias pueden ayudar a<div>Elimine un gran número de elementos innecesarios del HTML de su sitio web y mejore el rendimiento general de sus páginas web.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres