Reducir el tamaño del DOM es algo que deberías intentar para mejorar tu SEO técnico

— Aunque parezca qué no es así, a veces tener un tamaño más pequeño es positivo. Pues, un tamaño grande del DOM en un sitio web, puede hacer qué este se vuelva más lento. ¿Qué? ¿Pensaban qué hablaba de otra cosa? Pues, no, mi ciela.

Tengo un amigo con un sitio web de e-commerce con varios artículos. Dentro de lo que cabe, el sitio está bastante bien posicionado, pero tiene un problema con la velocidad de carga. Luego de hacerle un simple testeo de velocidad, descubrimos qué el principal factor limitante era el tamaño del DOM.

Buscamos cómo solucionar este cuello de botella, y el tiempo de carga mejoró de manera relevante. En consecuencia, el rendimiento del sitio mejoró mucho. Pues, optimizar el SEO «en este caso, SEO técnico» es importante para el sitio. Sí bien el DOM, generalmente no es un gran problema en los tiempos de carga, cada pequeña mejora ayuda.

Entonces, el tamaño del DOM de una determinada URL es un granito de peso extra en cada URL. Pues, es mejor mantener el sitio lo más limpio posible.

¡Sin más por agregar, veamos de qué se trata esto del tamaño del DOM! (Eso si, te recomiendo ver esta guía antes de comenzar)

---

¿Qué es el DOM?

Bueno, toca tema técnico. DOM es la abreviatura de Document Objetct Model, qué es básicamente, la estructura de los objetos qué el navegador genera cuando se carga una URL.

Entonces, el DOM es una estructura jerárquica con diferentes bloques y objetos dependientes o independientes entre sí. Podría compararse esta estructura con la de un árbol, donde cada una de las ramificaciones es una sección de la URL.

Esta estructura es representada en el lenguaje de programación HTML, donde se encuentran las distintas tags o etiquetas.

— ¿Entonces? ¿quién lee esto? Cuando entramos a una página web, el navegador lee el código y nos devuelve una interfaz. Para ver el código cómo lo muestra el navegador debemos presionar Ctrl+U «Windows» o Cmd+U «Mac».

Por eso, cada vez qué el explorador ve un documento HTML, lo transforma en una estructura ramificada, a la que llamamos DOM o árbol DOM. Cabe destacar que no es únicamente HTML el código. Pues, puede contender código JavaScript, el cual accede al DOM para modificarlo. Un ejemplo claro de ello son los Snippets.

---

Tamaño del DOM y velocidad de carga

Sí bien es cierto qué el tamaño del DOM no afecta demasiado a la velocidad de carga de un sitio. El tener un DOM muy grande y pesado puede afectar significativamente el tiempo de carga del sitio.

Pues, genera tres efectos principales:

1. Eficiencia de la red y tiempo de carga

Una URL suele tener varias etiquetas y demás elementos HTML. Entonces, cuando el DOM es muy grande, este efecto se multiplica. También hay que tener en cuenta otra cosa, qué hay Scripts HTML qué no son visibles la primera vez qué un visitante visita el sitio.

Esto genera un aumento excesivo en el tiempo de carga de la página. Pues, se requieren más datos para cargar estos scripts, y en consecuencia el sitio carga un poco más lento.

2. Rendimiento en el tiempo de ejecución

— ¿Te pasó de qué arrancas a ver un sitio y va muy bien, pero conforme avanza el tiempo, se vuelve más lento? Bueno, esto se debe a qué puede haber demasiados scripts poco relevantes en el sitio.

Pues, a medida qué los usuarios interactúan con estos, el explorador debe analizar continuamente el efecto de estos. El estilo de las etiquetas y el HTML en general debe ser recalculado con cierta frecuencia.

3. Rendimiento de la memoria

Esto está relacionado con el punto anterior. Pero esto depende más de nuestra computadora. Pues, un código más grande, requerirá más memoria de RAM por parte de nuestro equipo.

Cómo dato de color, Google Chrome consume mucha memoria. Generalmente, para analizar sitios uso Firefox.

Reducir el tamaño del DOM

Desde un punto de vista técnico, para reducir el tamaño del DOM debemos depurar y acortar nuestro código todo lo qué podamos.

Para esto, lo ideal es eliminar todos los Scripts y demás elementos HTML innecesarios. Pues, si no lo hacemos, los tiempos de carga podrían verse penalizados.

Veamos un pequeño ejemplo. Supongamos qué tenemos un Script de navegación «navigation-mail» y debajo tenemos una lista sin órden «ul o unordered list». Cómo se ve en el ejemplo 1.

Una idea interesante sería combinar los dos en uno. Como se mostrará en el ejemplo 2.

Ejemplo 1

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

Ejemplo 2

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

Nodos del DOM

Antes de ver lo qué son los nodos, debemos recordar cómo es la estructura del DOM. — ¿Se acuerdan qué hablamos de una estructura de árbol? Bueno, eso. Tenemos las distintas secciones de nuestro sitio: head; body; footer; etc.

Todas estas secciones son las ramas del árbol. Pero los árboles además de las ramas, tienen hojas. Acá es donde entran los nodos.

Tenemos dos tipos de Nodos, los primarios y los secundarios. Se clasifican con esa nomenclatura cuantitativa dependiendo de la cantidad de contenido qué posean.

Nodos Primarios

Los nodos primarios son aquellos elementos HTML del DOM, que tienen porciones activas en los Scripts. Un ejemplo de ello puede ser el qué vimos más arriba. Y sí seguimos con la analogía de los árboles, el DOM serían las hojas.

Nodos Secundarios

Los nodos secundarios son aquellos que no tienen más ramas. Es el Script o pedazo de código minimizado. Cómo en el segundo ejemplo.

Profundidad del DOM

Ahora vamos con los estándares que establece Google en sus directrices para Google Search Console. En ella establece qué los sitios web que se desarrollan deben tener más o menos 1500 nodos DOM. Ergo, los sitios no deben ser demasiado complejos. De aquí también, el éxito de los nichos.

Conforme propiamente a la profundidad del árbol, este debe estar formado por menos de 32 nodos primarios, y menos de 60 nodos secundarios.

— Ok, no pasa nada sí te pasas de los límites, pero deberías entender qué, posiblemente, empieces a notar pequeños problemas de rendimiento.

---

Reduciendo el tamaño del DOM en WordPress y otros gestores

Reducir el tamaño del DOM en WordPress puede hacerse de varias maneras. Ahora veremos 5 maneras puntuales de cómo hacerlo:

1. No pongas muchos bloques diferentes en una URL

No me refiero al tamaño de contenido en general, sino a la diversidad de bloques «contenedores». Esto genera una carga lenta de manera diferida y en definitiva, penaliza nuestro PageSpeed.

Limitar el número de entradas por página también ayuda. Hasta 10 por página está bien. Lo mismo podría aplicarse a los productos en un sitio de e-commerce, 9 productos por página está bien, más de 12 empieza a penalizar.

2. Reducir el tamaño del DOM dividiendo las URLs grandes en varias pequeñas

Hay ocasiones en las que si es útil tener todo en una sola URL. Pero, para los contenidos en general, podría ser una mejor opción tener varios pequeños, en lugar de uno inmenso.

Esta práctica, además podría beneficiarte con otros aspectos SEO. Pues, sí el usuario visita más de una página en tu sitio web, favorecerá a varios al SEO.

Una idea interesante es enlazar de una u otra manera los contenidos relacionados.

3. Activar algún plugin lazy load

Activar un plugin para el Lazy Load es tan simple cómo ir hasta el buscador de Plugins o complementos y escribir “Lazy Load“. Allí encontrarás diversas aplicaciones qué te ayudarán con esto.

Aunque también hay otras herramientas como WP Rocket u otras qué te ayudarán con esto. Hay muchísimas, todas hacen lo mismo, minimizan el Lazy Load. En otros sitios también los podés encontrar cómo “minify“. Pero es todo lo mismo.

4. Eliminar los elementos innecesarios del tema

También puede ocurrir, qué eliminar ciertos elementos qué no se utilizan puede ser beneficioso. Es qué tanto en WordPress, cómo en otros gestores de sitios web, hay cosas qué no necesitamos.

Dependiendo de las necesidades, estos elementos qué podemos borrar pueden ir desde Plug-ins qué no usamos hasta características del Theme. Eliminar estos elementos puede contribuir a una mejora en el PageSpeed, pues, todo contribuye a reducir el DOM.

5. Usar un Theme depurado para minimizar el tamaño del DOM

Tener un buen Theme «temas» depurados a nivel código afecta directamente al DOM. Este quizás sea el punto más relevante.

Yo actualmente estoy usando el Astra Theme, es un poco caro, aunque funciona bien. Lo que sí, te perjudica un poco a nivel interfase de creación, pero eso es otra historia.

Pues, muchos de los maquetadores generan código basura «innecesario», pues se añaden muchos DIV tags y demás códigos sin utilidad. Este problema se ve mucho sí usas Elementor, o Divi. Se recomiendan utilizar otros cómo Oxygen Builders, qué no ponen tanto código extra. Pero, bueno, también cuesta su dinerillo.

A día de hoy yo prefiero depurar mi código de otra manera y usar Elementor. Utilicé Oxygen, pero, no lo sé Rick parece falso, no estoy seguro de qué valga lo qué cuesta. Pues, sí te das maña, entrás al editor de código del Theme, y cuando veas muchos DIV tags, los borrás y listo. En Shopify hago esto y funciona muy bien.

Otra cosa qué podrías hacer es usar un Hotjar u otro HeatMap para ver qué usan los usuarios y qué no. Quizás tenés una característica qué nadie utiliza, y podría ser eliminada del sitio.

BONUS: ¿Cómo Reducir el Tamaño del DOM Usando ChatGPT?

Reducir el tamaño del Document Object Model (DOM) es crucial para mejorar la velocidad de carga y la eficiencia de un sitio web. Aunque ChatGPT no puede modificar directamente el DOM de un sitio web, puede ofrecer asesoramiento y guías paso a paso para optimizarlo.

Aquí te mostramos cómo puedes utilizar ChatGPT para reducir el tamaño del DOM de tu sitio web:

1. Identificación de Problemas en el DOM

• Consulta sobre Herramientas de Diagnóstico: Pregunta a ChatGPT sobre herramientas y métodos para analizar el DOM de tu sitio web. Herramientas como Google Chrome DevTools pueden ser útiles para identificar elementos del DOM que son innecesariamente grandes o complejos.

2. Consejos de Optimización

• Solicita Consejos de Optimización: ChatGPT puede proporcionarte consejos generales sobre cómo reducir el tamaño del DOM. Esto puede incluir la minimización de la profundidad del árbol del DOM, la reducción del número de elementos innecesarios y la optimización de scripts y hojas de estilo.

3. Revisión de Código

• Revisión y Simplificación de Código HTML/CSS/JavaScript: Aunque ChatGPT no puede revisar directamente tu código, puedes preguntar sobre las mejores prácticas para escribir código HTML, CSS y JavaScript eficiente. ChatGPT puede ofrecer consejos sobre cómo evitar redundancias, cómo utilizar correctamente las clases y IDs, y cómo estructurar tu HTML de manera eficiente.

4. Implementación de Técnicas de Carga Diferida

• Información sobre Lazy Loading: ChatGPT puede explicarte cómo implementar la carga diferida (lazy loading) para imágenes, scripts y otros elementos. Esto puede reducir significativamente el tamaño inicial del DOM y mejorar el tiempo de carga.

5. Uso de Frameworks y Librerías

• Asesoramiento sobre Frameworks y Librerías: Si estás utilizando frameworks de JavaScript como React, Vue o Angular, ChatGPT puede ofrecerte consejos sobre cómo estos frameworks manejan el DOM y cómo puedes utilizarlos para optimizar el rendimiento de tu sitio.

6. Estrategias de Código Limpio

• Prácticas de Código Limpio: Pregunta sobre cómo mantener tu código limpio y organizado. Un código bien estructurado y limpio puede reducir significativamente el tamaño del DOM y mejorar la legibilidad y mantenimiento del código.

7. Consulta sobre Plugins y Herramientas

• Plugins para WordPress y Otros CMS: Si tu sitio está construido en un sistema de gestión de contenido como WordPress, ChatGPT puede sugerirte plugins que ayuden a optimizar el DOM.

Ejemplo de Prompt para ChatGPT:

Hola ChatGPT, estoy trabajando en la optimización de mi sitio web y me gustaría reducir el tamaño del DOM para mejorar la velocidad de carga. Actualmente, tengo un código HTML bastante extenso con muchas etiquetas anidadas y creo que podría estar afectando el rendimiento. ¿Podrías reducir el tamaño del DOM de mi código?

Y luego de pedirle que reduzca el tamaño del DOM, nos entregará algo así:

---

Conclusión

Bueno, llegamos al final del posteo. Tengamos siempre presente qué reducir el tamaño del DOM no es la principal prioridad, pero también es cierto qué un tamaño excesivo nos perjudica. Tenés qué intentar mantener la estructura de tu código lo más simple posible.

Revisá el DOM de las distintas URLs y quitá las qué son inútiles. Acelerarás tu PageSpeed, además de mejorar la UX «User Experience». También, deberías prestar atención a tu CSS.

Te dejé algunos consejos de cómo reducir el tamaño del DOM, y los efectos qué tiene. Sí te das maña podés hacer muchas cosas, sí no tenés ganas siempre se puede resolver con algún plug-in.

Si encontraste útil toda la información que hemos compartido, te agradecemos sinceramente tu apoyo. Si deseas colaborar con nosotros, puedes hacerlo mediante una donación a través de PayPal↗️ o Cafecito↗️. Tu generosidad nos ayuda a mantener nuestro contenido libre de publicidad y a seguir ofreciendo información valiosa para ti y para nuestra comunidad de lectores.

Si estás considerando crear tu propio sitio web, te recomendamos WordPress↗️. Es una plataforma fácil de usar y muy popular que te permitirá llevar tus ideas al mundo digital. Haz clic en el banner de abajo para obtener un descuento de $25 al crear tu sitio con WordPress↗️.

---

FAQs sobre el DOM:

¿Qué es el DOM?

DOM es la abreviatura de Document Objetct Model, qué es básicamente, la estructura.

¿Cómo mejorar el DOM?

Tenemos que reducir el código inútil de nuestro sitio. Dividir el contenido ayuda, pero gestionar un Plug-in de tipo Lazy Load es la mejor opción.

¿Cuál es la abreviatura de DOM?

La abreviatura de DOM es “Document Object Model”.

¿Cuál es la estructura del DOM?

El DOM sigue una estructura jerárquica de árbol, donde cada elemento del documento es representado como un nodo en el árbol, permitiendo la navegación y manipulación de los elementos de la página.

¿Cómo evitar un tamaño excesivo del DOM?

Se puede evitar un tamaño excesivo del DOM optimizando el código HTML/CSS/JavaScript, eliminando elementos innecesarios, y utilizando técnicas como la paginación o la carga bajo demanda para reducir la cantidad de información cargada inicialmente.

¿Cómo reducir el tiempo de ejecución de JavaScript en WordPress?

Para reducir el tiempo de ejecución de JavaScript en WordPress, se pueden utilizar prácticas de optimización como la minimización de scripts, la optimización de bucles y consultas, y el uso de herramientas de caché y compresión de archivos.

¿Qué es un DOM en el contexto de WordPress?

En el contexto de WordPress, el DOM se refiere al Document Object Model de la página web generada por WordPress. Es importante optimizar su tamaño y rendimiento para mejorar la experiencia del usuario y el SEO.