SEO Técnico: Reducir el tamaño del DOM es algo que deberías intentar

— 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!


¿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.


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.

Sin más por añadir, me voy despidiendo, no sin antes dejarte un regalo de 25 dólares para tu próximo sitio en WordPress.

Consigue 25 dólares para tu próximo sitio WordPress
Post relacionados

Por si te quedaste con ganas de más...

Como seguramente seguis con muchas ganas de leer post de mni blog «dijo nunca, nadie», te dejo algunos otros post que podrían ser de interés, ordenados de manera completamente random.

¿Necesitás contactarte conmigo?

Si tenés ganas de ponerte en contacto porque necesitás ayuda particular o simplemente te falta uno para el fútbol, no dudes en dejarme un mensaje por mail o en las redes sociales.

error: Content is protected !!