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

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

1 comentario en “SEO Técnico: Reducir el tamaño del DOM es algo que deberías intentar”

  1. Pingback: Páginas AMP: ¿Qué son?, ¿Cómo funcionan? • Tupac Bruch

Deja un comentario Cancelar respuesta

Heavy User: Todo lo que necesitás sobre este peso pesado

Sí bien lo políticamente correcto es decir que queremos a todos los usuarios por igual. Lo mismo sucede con los padres y los hijos. Pero, lo cierto es que las empresas siempre tienen predilección por esos usuarios más cotizados, uno de estos es conocido como Heavy User. Identificar a este tipo de consumidores es de

Read More »

Hashtag: La herramienta digital que marca la diferencia en tus redes sociales

— En los tiempos que corren, los Hashtag son la principal moneda de cambio que tenemos en el mundillo del Marketing Digital. Pues, en la jungla online, donde las redes sociales encuentran y des-encuentran personas, compartir contenido es parte del día a día. Pero, así mismo, también nos saturamos con mensajes que no queremos, y

Read More »

Keyword Research Tradicional: Autocompletar y búsquedas relacionadas

Cuando optimizamos nuestro contenido para posicionarlo en Google, es decir, hacemos SEO. Pensamos en los motores de búsqueda, la planificación de palabras clave «Keyword Research», y demás factores relevantes conforme al posicionamiento. Para ello, hoy vamos a valernos tanto de la función Autocompletar, cómo las búsquedas relacionadas. Sin embargo, los problemas aparecen principalmente en dos

Read More »

HTML: ¿Qué es y como se relaciona con el CSS y JavaScript?

Sin duda, la digitalización de las empresas está cambiando el mercado como lo conocemos. Pues, este proceso imparable está transformando todos los sectores a un ritmo cada vez más acelerado. Esto puede darse gracias a las nuevas estrellas del mercado, los programadores. Siendo los especialistas en HTML, Python, y JavaScript, entre otros, como los más cotizados y buscados en

Read More »

Anchor Text: Dominar este concepto es crucial para tu SEO

A la hora de hablar del Anchor Text o los textos anclas debemos entender qué los barcos tienen once anclas. Pues, siempre dicen: «eleven anclas» estas son lo qué nos permite alcanzar cierta parte de nuestro sitio haciendo un salto calculado. Este Anchor text es el texto visible de un enlace, en el cual un

Read More »

Keyword Stuffing: ¡No abuses de las palabras clave!

— A nadie le gusta el chamullo, pero mucho menos a Google. Esto es así a tal punto, qué incluso a esta práctica se pone un nombre: «Keyword Stuffing«. El cual es una mala práctica de SEO que consiste en la repetición exagerada de palabras clave con el fin de manipular al algoritmo. Esto funcionó

Read More »
error: Content is protected !!