Claves para reducir el tamaño del DOM de un Sitio Web

Uno de los aspectos que influyen en conseguir un buen posicionamiento SEO en una página web es su rendimiento de carga. Y este es un tema en el que el tamaño del DOM de una página juega un papel fundamental.

Por eso vamos a explicar cómo un DOM puede considerarse excesivamente grande y cómo reducirlo.

¡Vamos a empezar!

¿Qué es el DOM?

En pocas palabras, cuando hablamos del DOM, nos referimos a la estructura de los objetos que genera el navegador cada vez que carga una página . Debe su nombre a las siglas Document Object Model.

Es una estructura jerárquica en la que hay diferentes objetos, unos de los cuales dependen de otros. La estructura es similar a un árbol ya que existe el objeto principal del que dependen otros elementos secundarios. El DOM representa la estructura HTML de la página como un árbol , compuesto por una serie de etiquetas.

En otras palabras, cuando el navegador prepara una página para mostrárnosla, construye un árbol de objetos formado por todos los elementos de una página en base a su estructura HTML.

Cada vez que el navegador recibe un documento HTML, tiene que convertirlo en esta estructura similar a un árbol, que llamamos DOM o árbol DOM. El código JavaScript puede acceder a ese DOM y modificarlo.

¿Cómo afecta el tamaño del DOM a tu rendimiento web?

La verdad es que el tamaño del DOM afecta el rendimiento de una página. Un DOM excesivamente grande puede ralentizar la velocidad del sitio web , ya que tiene los siguientes impactos:

• Eficiencia de red y rendimiento de carga. Si el DOM es excesivamente grande, a menudo incluye elementos HTML que no son visibles la primera vez que el usuario carga la página, lo que aumenta innecesariamente el consumo de datos y hace que el sitio se cargue más lentamente.
• Rendimiento en tiempo de ejecución. A medida que los usuarios y los scripts interactúan con una página, el navegador debe recalcular continuamente la posición y el estilo de las etiquetas HTML.
• Rendimiento de la memoria . Si el árbol DOM es demasiado grande, es posible que el navegador necesite más memoria para procesarlo.

¿Cómo reducir técnicamente el tamaño del DOM?

Para reducir el tamaño del DOM para que no afecte negativamente al rendimiento web , debe eliminar todos los elementos HTML que no sean necesarios . Como hemos visto, si no tomamos las medidas necesarias, hay varias razones por las que se ralentizaría la página.

En lugar de usar este código;

 <div id = ”navigation-main”>   <ul>           etc ..   </ul> </div>

Sería mejor usar este otro;

 <ul id = ”navigation-main”>   etc .. </ul>

Con respecto a la estructura de árbol, necesitamos conocer los siguientes términos:

• Nodos : Todos los elementos HTML del DOM. También se les conoce como las 'hojas' del árbol.
• Nodos Secundarios : Aquellos nodos que no tienen más ramas.

Dicho esto, lo mejor es que la profundidad del árbol está formada por :

• Menos de 32 nodos.
• Menos de 60 nodos secundarios por cada nodo.

Google recomienda que al desarrollar sitios web, las páginas contengan menos de 1500 nodos DOM , lo que significa que los diseños no deben ser demasiado complejos.

Cómo reducir el tamaño del DOM en WordPress

Hay varias formas de reducir el tamaño del DOM en WordPress:

Segmentar páginas grandes en varias páginas

¿Tiene una sola página que muestra diferentes tipos de contenido de su sitio? Por ejemplo, formularios de contacto, publicaciones de blog, productos, etc.

En ese caso, es mejor clasificar todos esos elementos en diferentes páginas y enlazarlos a través de la barra de navegación.

Active el complemento de carga diferida y divida todos los elementos posibles en páginas

Puedes habilitar un módulo de carga diferida en todos los elementos que lo permitan. Puede hacer esto con videos de YouTube, usando Youtube Lite o Lazy Load de WordPress WP-Rocket.

También es fundamental limitar el número de publicaciones por página de blog . Un número máximo razonable de publicaciones sería de 10 por página. Esta práctica también se aplica a la cantidad de productos que deben aparecer en cada página.

Hay una opción para cambiar el número de publicaciones por página. Vaya al Menú de configuración > Submenú de lectura, cambie las Páginas de blog que se muestran al máximo valor y Guarde los cambios . .

También recomendamos limitar el recuento de publicaciones relacionadas a un número máximo de tres o cuatro.

Eliminar elementos innecesarios incluidos en el tema WP predeterminado

En algunos casos, puede ser necesario eliminar ciertos elementos que vienen con tu tema de WordPress por defecto , como el botón “Agregar al carrito” en las páginas del producto, la fecha de publicación, la información del autor, etc.

Revisa la configuración del tema de WordPress para ver si hay una opción para eliminar esos elementos, y si no, busca el código PHP correspondiente para eliminarlos.

Usa temas o creadores de páginas bien codificados

La calidad del tema de WordPress afecta directamente el tamaño del DOM. Por lo tanto, es recomendable utilizar temas bien codificados, como Astra o GeneratePress.

Los creadores de páginas también suelen insertar demasiadas etiquetas div, por lo que es importante utilizar soluciones como Oxygen Builders, que no inyectan elementos no deseados y permiten un mayor control sobre la estructura HTML.

Herramientas como HotJar le permiten ver qué usan los usuarios y qué no les funciona. Ejecutar un análisis detallado es fundamental para obtener el tamaño correcto de DOM.

Pensamientos finales

Un Dom Size excesivo perjudica el rendimiento de su web, ralentizando el tiempo de carga de la página. Mantenga su estructura HTML simple sin elementos innecesarios . Revisa tu árbol DOM y deshazte de aquellos nodos que no agregan valor a tu sitio. No solo acelerará su sitio web, sino que también ofrecerá una mejor experiencia de usuario.

Sin duda, Google considerará el tamaño del DOM en la actualización de Page Experience que se lanzará en los próximos meses. Asegúrate de tener uno adecuado, para que no afecte el rendimiento de tu web.