¿Por qué las páginas de Elementor se cargan lentamente? Puede que el DOM no esté optimizado

hacer uso de Elementor Más y más personas construyen páginas de WordPress, muchos usuarios se encontrarán con un problema: el diseño de la página es hermosa, pero la velocidad de carga es lenta, sino que también afectan a la experiencia del usuario y el ranking SEO. Entonces, ¿cuál es el problema? ¡Este artículo le llevará más profundamente en una razón que a menudo se pasa por alto!Estructura DOM no optimizaday Elementor proporcionanSalida DOM optimizadaLa solución.

¿Qué es el DOM y por qué afecta a la velocidad de carga de las páginas?

1.1 ¿Qué es DOM?

DOM(Modelo de objetos del documento) es una representación estructurada que construye el navegador al cargar una página web. Convierte un elemento HTML en unEstructura jerárquicacada etiqueta, texto, imagen, botón, etc. de la página se convierte en una de las etiquetas Nodos DOM.

Podemos entender simplemente que elDOM es la estructura de una página web tal y como la "ve" el navegador.El DOM es una versión programable del HTML. Es el DOM el que permite al navegador entender el contenido de una página web. El siguiente diagrama visualiza la estructura básica del DOM: del documento Empezando por el principio, los elementos HTML se expanden en un orden jerárquico, como el <head>y<body>y<h1>y<a> etc. aparecen como nodos en este árbol DOM. Cada nodo está conectado por una relación padre-hijo y forma el esqueleto operativo de toda la página web.

en el uso de Elementor Cuando usamos constructores de páginas visuales como Elementor, construimos páginas rápidamente arrastrando y soltando componentes. Este enfoque es conveniente, pero por cada elemento utilizado, Elementor suele generar múltiples elementos anidados. <div> Contenedores. A medida que crece el número de componentes de la página y la estructura HTML se hace más compleja, elAumento del nivel de DOMEsto, a su vez, afecta al rendimiento de carga y a la experiencia de usuario de la página web.

Para abordar esta cuestión.Elementor introdujo oficialmente una función experimental en la versión 3.6 (marzo de 2022): Optimización de la salida DOM.. El propósito de esta función es racionalizar la estructura del HTML generado por la página, eliminando etiquetas anidadas innecesarias y optimizando la jerarquía DOM global. A veces también se denomina "Optimización del marcado(Optimización de la estructura de marcado)".

Con esta función activada, Elementor genera el código de la página de una forma más ligera, lo que se traduce en una carga más rápida, mejores puntuaciones de accesibilidad y un mejor rendimiento SEO.

1.2 Cuanto más profundo sea el nivel DOM, más lenta será la carga.

Cuantos más nodos DOM haya y más compleja sea la estructura, mayor será la carga computacional necesaria para que el navegador analice la página:

Mayor tiempo de carga de la página
El bloqueo de la renderización se vuelve más
Retraso en la primera interacción con el usuario
Las puntuaciones de rendimiento de Google han bajado (afectando especialmente a Core Web Vitals)

Optimizar la estructura DOM es, por tanto, un paso importante para mejorar la velocidad de carga de las páginas de Elementor.

En segundo lugar, la carga lenta de páginas Elementor causas comunes

Además de problemas comunes como la configuración del alojamiento, la compresión inadecuada de las imágenes, el almacenamiento en caché no optimizado, etc.Elementor La lentitud de carga de las páginas suele estar relacionada con la complejidad de la estructura DOM. Las siguientes son algunas de las manifestaciones específicas:

2.1 Divs anidados en el código fuente de la página

Por cada elemento utilizado (por ejemplo, cuadro de texto, botón, imagen), Elementor genera múltiples contenedores div para envolverlo. Apilados, una simple página puede generar cientos o miles de nodos DOM.

2.2 No utilizar el contenedor Flexbox

Muchos usuarios siguen utilizando la antigua construcción Sección + Columna, lo que da lugar a un anidamiento adicional del diseño. Al cambiar a la nueva versión de la función de contenedor Flexbox, la estructura adicional se puede reducir significativamente.

2.3 Salida DOM optimizada no activada

Se trata de una mejora de rendimiento que se ha añadido a Elementor en los últimos años. Muchos usuarios desconocen su existencia, lo que provoca que se sigan utilizando estructuras redundantes antiguas y, naturalmente, que las páginas se carguen más lentamente.

Activación de la función de marcado optimizado de Elementor

3.1 Descripción funcional

Elementor introdujo esta función, inicialmente denominada "Salida DOM optimizada"a veces denominado "Optimización del marcado"Ambos nombres hacen referencia a la misma función que Elementor utiliza para simplificar la estructura de HTML. Ambos nombres hacen referencia a la misma función que Elementor utiliza para simplificar la estructura de HTML y reducir las etiquetas redundantes.

Eliminar contenedores div anidados innecesarios
Racionalización de la estructura de componentes
Reducir el número de nodos DOM de una página
Mejorar la velocidad de carga y la accesibilidad

Cuando se activa, Elementor genera automáticamente páginas con una estructura más limpia y estándar, reduciendo en gran medida la complejidad HTML de la página.

3.2 Modalidades de habilitación

Siga los pasos que se indican a continuación para activar la función:

Inicie sesión en el backend de WordPress
En el menú de la izquierda, haga clic en Elementor → Configuración
En la página Configuración, haga clic en la barra de navegación superior de la ventana "Características"

localice Optimización del marcado
Cambia la función de "Por defecto" a "Activo"
Seleccione "Activar" y guarde los cambios

IV. Comparación de los resultados reales tras la optimización

4.1 Mejores resultados

Reducción significativa del número de nodos DOM
Reducción del tiempo de pintura de mayor contenido (LCP)
Disminuye el tiempo total de bloqueo (TBT)
Las puntuaciones de SEO y accesibilidad también han mejorado

4.2 Estructura de página más clara y CSS más fácil de mantener

Para quienes utilicen CSS personalizado, la estructura optimizada facilita la colocación de elementos y reduce las clases innecesarias.

V. Preguntas frecuentes y recomendaciones

5.1 ¿Qué debo hacer si el estilo de la página se desordena después de habilitarla?

Si está utilizando una versión anterior de la plantilla o un plugin de Elementor de terceros, es posible que haya estilos que no sean compatibles con la nueva estructura. Esto es posible en este caso:

Desactivar temporalmente los marcadores de optimización para solucionar problemas
Comprobación de CSS que depende demasiado de estructuras anidadas
A la espera de que los desarrolladores de plugins actualicen la compatibilidad

5.2 ¿Es necesario volver a guardar todas las páginas?

Sí. Para que las páginas adopten la nueva estructura, se recomienda volver a abrir cada página en Elementor y hacer clic en el botón "Actualizar".

5.3 ¿Son compatibles todos los temas?

Temas comunes como Hello Theme, Astra,KadenceTambién es compatible con Blocksy y otros temas. Sin embargo, si utiliza un tema antiguo, se recomienda activarlo en un entorno de prueba antes de activarlo.

No ignore el valor de la optimización del DOM

Optimización del DOMEn el editor visual de Elementor está la clave para mejorar el rendimiento, nos ayuda a reducir estructuras de código redundantes en la página y hacerla más ligera y rápida, así que no ignores el valor de la optimización del DOM. Si piensas que Elementor Las páginas se cargan lentamente, pruebe a activar esta opción. Los sitios web no tienen por qué ser complicados, pero deben ser rápidos. Activa ahora el marcado de optimización y aumenta la velocidad de carga.

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