SEO Técnico

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! (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.


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 sitio WordPress
Consigue 25 dólares para tu próximo sitio WordPress

11 Comments

  1. Pablo Corazón Ardura Reply

    Muy interesante, tendr√°s algun curso o algo? Estoy intentando entrar en este mundo del SEO pero a√ļn no encuentro nada bueno.

Deja un comentario