Resolver la advertencia «Evitar un tamaño excesivo del DOM» en WordPress

¿Recibe advertencias de Google PageSpeed Insights o Lighthouse sobre el rendimiento de su sitio WordPress?

Es un problema común para muchos propietarios de sitios WordPress, y es esencial abordarlo rápidamente.

Quizás no lo sepa, pero un tamaño grande del DOM puede ralentizar la velocidad con la que su sitio muestra contenidos e imágenes. También consume más memoria, hace que las interacciones se sientan lentas y ralentiza los scripts, perjudicando el rendimiento del sitio y la experiencia del usuario.

Para acelerar su sitio WordPress y mejorar la experiencia del usuario, debe abordar el problema del gran tamaño del DOM. Veamos cómo solucionar este problema.

Entendiendo el DOM

El DOM, o Document Object Model, representa la estructura y el contenido de un sitio WordPress. Organiza elementos como encabezados, contenido, recursos visuales y botones en un orden específico, facilitando su acceso y modificación mediante lenguajes de programación como HTML, CSS y JavaScript.

Piense en el DOM como un árbol genealógico. Al igual que un árbol genealógico con padres, hijos y parientes, un sitio WordPress tiene varios elementos (nodos) con diferentes niveles (profundidad). Esta jerarquía continúa hasta llegar al último elemento (nodo hijo). Un DOM con demasiados nodos se denomina "Tamaño Excesivo del DOM".

Conceptos clave:

• Nodos: También conocidos como etiquetas HTML, son los elementos esenciales del DOM.
• Profundidad: Se refiere a la profundidad que alcanza una rama en el árbol del DOM.
• Elemento hijo: Un elemento listado bajo otro elemento, ubicado entre etiquetas HTML de apertura y cierre. Por ejemplo:
  Hello World

Ahora que comprende el DOM.

¿De dónde proviene el tamaño excesivo del DOM?

Los tamaños grandes del DOM ocurren cuando su página web tiene demasiadas etiquetas HTML o cuando están anidadas demasiado profundamente. Esto hace que el navegador del usuario trabaje más, ralentizando los tiempos de carga y reduciendo sus puntuaciones de velocidad de página.

La ejecución lenta de JavaScript y CSS a menudo se debe a que el navegador tiene que procesar más nodos, lo que retrasa el renderizado de la página.

Un DOM extenso aumenta el uso de memoria, retrasa el procesamiento de estilos y provoca costosos reflujos de diseño. Al modificar objetos del DOM, puede controlar qué elementos de la página se muestran al usuario. Puede encontrar esto en las DevTools de su navegador o en las pantallas Inspect Element:

Sin embargo, si utiliza una herramienta como Google Lighthouse, puede ver una advertencia de rendimiento al respecto.

El mensaje es claro: debe ‘Avoid an excessive DOM size’. Google Lighthouse informa de esta advertencia en tres áreas:

1. Número total de elementos: Si su página tiene más de 800 elementos en el árbol DOM, verá una advertencia.
2. Profundidad máxima del DOM: Este valor muestra la sección de código con los elementos más profundamente anidados.
3. Nodo padre con muchos nodos hijos: Lighthouse marca cualquier nodo padre con más de 60 nodos hijos.

Aunque esto es un ‘Diagnóstico’ en Lighthouse, mantener pequeño el tamaño del DOM mejora el rendimiento del sitio y la experiencia del usuario, aumentando su puntuación de Core Web Vitals.

Razones del tamaño excesivo del DOM

Un tamaño grande del DOM puede ralentizar significativamente sus páginas web. Estos son los factores clave que contribuyen a este problema:

1. Páginas sobrecargadas: Una página web que contiene demasiados elementos debido a diseños complejos o código redundante resulta en un árbol DOM sobrecargado. Esto no solo ralentiza la página sino que también degrada la experiencia del usuario.
2. Anidamiento excesivo: Las estructuras HTML profundamente anidadas crean un árbol DOM complejo, dificultando que los navegadores rendericen la página de manera eficiente. Esto conduce a un procesamiento más lento de CSS y JavaScript.
3. Temas y plugins sobrecargados: Los temas y plugins a menudo añaden elementos innecesarios, como JavaScript o CSS. Muchos temas incluyen funciones predeterminadas que sobrecargan el DOM, mientras que los plugins pueden introducir scripts y estilos adicionales, aumentando los tiempos de carga incluso cuando estas funciones no se utilizan.

Identificar el tamaño excesivo del DOM: herramientas y técnicas

Comprender y gestionar el tamaño del DOM de su sitio web es esencial para un rendimiento óptimo. Aquí hay algunas herramientas y técnicas para ayudarle a identificar y abordar este problema:

1. Google Lighthouse

Google Lighthouse es una herramienta gratuita y de código abierto que ayuda a identificar problemas de rendimiento del sitio web, incluyendo el tamaño excesivo del DOM. Así se utiliza:

• Abra Chrome y navegue hasta su página web.
• Haga clic derecho en la página y seleccione "Inspect" para abrir las Herramientas para desarrolladores.
• Haga clic en la pestaña "Lighthouse" y luego en "Analyze page load."

2. Chrome DevTools

Chrome DevTools ofrece una vista detallada del DOM de su página web. Ayuda a contar los nodos del DOM y a identificar los elementos que contribuyen a un tamaño grande del DOM. Siga estos pasos:

• Abra su página web en Chrome.
• Haga clic derecho y seleccione "Inspect" para abrir las DevTools.
• Vea el árbol DOM en la pestaña "Elements" y cuente los nodos.

3. WebPageTest

WebPageTest es una herramienta en línea que ofrece un análisis detallado del rendimiento de su página web, incluyendo un desglose de los elementos del DOM. Así se utiliza:

• Visite WebPageTest.org.
• Introduzca la URL de su página web.
• Haga clic en "Start Test".

4. GTmetrix

GTmetrix es otra herramienta valiosa que analiza el rendimiento de su página web, incluido el tamaño del DOM. Así se utiliza:

• Vaya a GTmetrix.com.
• Introduzca la URL de su página web.
• Haga clic en "Test your site" y revise el informe detallado, centrándose en las métricas relacionadas con el DOM.

5. PageSpeed Insights

PageSpeed Insights de Google ofrece información sobre el rendimiento de su página web, incluyendo problemas de tamaño del DOM. Así se utiliza:

• Visite PageSpeed Insights.
• Introduzca la URL de su página web.
• Haga clic en "Analyze" para obtener un informe detallado sobre el rendimiento de su página web, con recomendaciones específicas sobre la optimización del tamaño del DOM.

Con estas herramientas, puede diagnosticar y optimizar eficazmente el tamaño del DOM de su sitio web para obtener un mejor rendimiento.

Solucionar el problema del tamaño excesivo del DOM: consejos y trucos

Antes de poder solucionar la advertencia "avoid excessive-DOM size", debe identificar sus causas.

Primero, utilice Google Lighthouse para encontrar la Profundidad máxima del DOM y los Elementos hijos máximos. Luego, utilice el inspector de DOM de su navegador web para revisar el DOM.

Su objetivo es identificar qué está causando el número excesivo de nodos del DOM.

1. Evite plugins y temas mal codificados

Usar un plugin como una línea de tiempo, un calendario o un slider que crea demasiados nodos del DOM puede ralentizar su sitio web. Para mejorar el rendimiento, sustitúyalo por un plugin más eficiente.

Del mismo modo, los temas y plantillas mal codificados pueden perjudicar la velocidad de su sitio. Puede mejorar su sitio web eliminando código innecesario usando un editor optimizado o modificando su plantilla.

2. Reducir los nodos del DOM de JavaScript

A veces JavaScript puede añadir demasiados nodos del DOM a una página, ralentizando el sitio web. Por ejemplo, un widget de chat podría crear un número excesivo de nodos.

Considere eliminar el archivo JavaScript problemático o cambiar a un widget más eficiente. Este simple cambio puede mejorar significativamente el rendimiento y la velocidad de su sitio.

3. Evite los constructores de páginas que producen HTML excesivo

Los constructores de páginas como WP Bakery, Elementor y Gutenberg a veces pueden generar demasiados nodos del DOM, ralentizando su sitio. Estas herramientas son útiles pero pueden crear código voluminoso e ineficiente.

Para solucionarlo, limpie el código excedente y optimice su flujo de trabajo. Recientemente, los desarrolladores de Elementor han realizado mejoras para reducir el bloat y aumentar la eficiencia. Por el contrario, Gutenberg tiende a producir HTML más limpio, lo que puede ayudar a mantener una estructura más ligera.

Revise y simplifique su HTML regularmente para mantener su sitio web rápido y fácil de usar. Esto garantizará tiempos de carga más rápidos y una mejor experiencia para sus visitantes.

4. Optimice el HTML de su sitio WordPress

Para optimizar la organización del HTML de su sitio WordPress, esto es lo que puede hacer:

Elija un tema sencillo como Hello Elementor o Elementor, que mantiene sus páginas limpias sin elementos innecesarios.

Revise sus páginas y entradas en el editor de WordPress. Elimine los shortcodes no utilizados, las etiquetas div adicionales o los elementos vacíos.

Haga clic derecho en su sitio WordPress y elija "View Page Source" o pulse "CTRL + U". Busque secciones de código repetitivas, como múltiples etiquetas div con la misma clase o atributos de estilo.

Navegue al panel de WordPress → ‘Apariencia’ → ‘Editor de temas.’ Aquí puede editar los archivos PHP de su tema.

Elimine cualquier código anidado innecesario.

Después de realizar cambios, guarde el archivo y pruebe su sitio para asegurarse de que todo funciona correctamente.

Haga clic derecho en su sitio y seleccione "Inspect". Vaya a la pestaña Lighthouse y haga clic en "Analyze page load" para generar un informe. Esto verificará las advertencias sobre "Avoid an Excessive DOM Size".

5. Reduzca la carga del sitio web gestionando los scripts

Para reducir eficazmente el tamaño del DOM de su sitio web, es esencial gestionar cuidadosamente los scripts y plugins que utiliza. Aquí hay un enfoque paso a paso:

Audite sus plugins: Revise todos los plugins instalados en su sitio web. Identifique cuáles son esenciales y cuáles no se utilizan. Los plugins que no se usan o que ralentizan significativamente su sitio deben desactivarse o eliminarse por completo para agilizar el rendimiento de su sitio.

Optimice los scripts: Considere usar plugins como WP Rocket o Asset CleanUp. Estas herramientas ayudan minimizando y combinando scripts. Minimizar elimina caracteres innecesarios del código sin cambiar su funcionalidad.

Por el contrario, combinar scripts reduce el número total de archivos que el navegador de un usuario necesita descargar, reduciendo así las solicitudes y minimizando el tamaño del DOM.

Consejos para reducir el tamaño del DOM y mejorar el rendimiento

¿Tiene curiosidad por reducir el tamaño del DOM de su sitio web? Aquí hay algunos consejos prácticos:

• Use Lazy Loading y Scroll Infinito – El lazy loading retrasa la carga de ciertas partes de su sitio, como imágenes en páginas de categorías, hasta que sean necesarias. Limitar el número de entradas de blog o de elementos en páginas de productos a alrededor de diez también puede acelerar los tiempos de carga.
• Divida páginas largas en varias páginas – En lugar de tener una página larga con mucho contenido (como blogs, formularios de contacto y productos), cree páginas separadas para cada uno. Use una barra de navegación para enlazarlas.
• Mejore el renderizado de página con CSS – Pruebe la propiedad ‘content-visibility’ de CSS. Hace que el navegador omita el renderizado de elementos hasta que sean necesarios, lo que puede mejorar el rendimiento.
• Simplifique CSS y JavaScript – Evite estilos CSS complejos y código JavaScript pesado. Pueden aumentar el tamaño del DOM y ralentizar su sitio. Simplificarlos puede marcar una gran diferencia.

Conclusión

¡Así es como aborda la advertencia ‘Avoid Excessive DOM Size’ en WordPress! Ha aprendido sobre el problema y explorado formas de resolverlo, haciendo que su sitio web sea más optimizado y receptivo.

Cada optimización hace que su sitio sea más rápido, más eficiente y más fácil de usar. Tenga estos consejos en cuenta a medida que desarrolla sus habilidades web.

Artículos Relacionados

• Cómo Solucionar el Error de WordPress "Barra Lateral No Aparece"
• Por Qué WordPress Es Lento + Cómo Solucionarlo
• ¿Por Qué Son Necesarios el Respaldo de Datos y la Recuperación ante Desastres para WordPress?
• Cómo Reparar y Optimizar la Base de Datos de WordPress
• Cómo Deshacer Cambios en WordPress (Revisiones, Autoguardados, Snapshots)