Tamaño DOM

Las claves para reducir el tamaño del DOM de un sitio web

Víctor Pérez Vas

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

Por eso vamos a explicar cómo un DOM puede considerarse excesivamente grande y cómo reducirlo. Pero primero, empezaremos por lo básico, explicando qué es el DOM y qué significa reducir su tamaño.

¡Empecemos!

 

¿Qué es el DOM?

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

Modelo de objeto de documento
Fuente de la imagen: Wikipedia

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

En otras palabras, cuando el navegador prepara una página para mostrarnos, construye un árbol de objetos compuesto por todos los elementos de una página basada en su estructura HTML.

Cada vez que el navegador recibe un documento HTML, tiene que convertirlo en esta estructura en forma de á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 al rendimiento de tu web?

Velocidad Web

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

  • Eficiencia de la red y rendimiento de la carga. Si el DOM es excesivamente grande, suele incluir elementos HTML que no son visibles la primera vez que el usuario carga la página, aumentando innecesariamente el consumo de datos y haciendo 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, el navegador puede necesitar más memoria para procesarlo.

 

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

Para reducir el tamaño del DOM y que no afecte negativamente al rendimiento de la web, hay que 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>

En cuanto a la estructura del árbol, necesitamos saber los siguientes términos:

  • Nodos: Todos los elementos HTML del DOM. También se conocen como las "hojas" del árbol.
  • Nodos secundarios: Aquellos nodos que no tienen más ramas.

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 1.500 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 las páginas grandes en varias páginas

¿Tienes una sola página que muestre diferentes tipos de contenido de tu sitio? Por ejemplo, formularios de contacto, entradas 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.


Activar el plugin de carga perezosa y dividir todos los elementos posibles en páginas

Puedes habilitar un módulo de carga perezosa en todos los elementos que lo permitan. Puedes hacerlo con vídeos de YouTube, utilizando Youtube Lite o Lazy Load de WordPress WP-Rocket.

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

Hay una opción para cambiar el número de publicaciones por página. Ve al submenú Configuración > Lectura, cambia el valor de las páginas del blog que se muestran como máximo y guarda los cambios.

También recomendamos que se limite el número de publicaciones relacionadas a un máximo de tres o cuatro.


Eliminar los elementos innecesarios incluidos en el tema predeterminado del paquete de trabajo

En algunos casos, puede ser necesario eliminar ciertos elementos que vienen por defecto con su tema de WordPress, como el botón "Añadir a la cesta" en las páginas de productos, 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.


Usar temas bien codificados o creadores de páginas

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

Los constructores 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 del HTML.

Herramientas como HotJar te permiten ver lo que los usuarios están usando y lo que no funciona para ellos. Ejecutar un análisis detallado es fundamental para obtener el tamaño correcto de DOM.


Reflexiones finales

Un tamaño excesivo de Dom perjudica el rendimiento de tu 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 aportan valor a tu sitio. No sólo acelerarás tu sitio web, sino que también ofrecerás una mejor UX.

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

Última actualización el 18 de octubre de 2022 por Hannah Dango

Compártelo

Ver más artículos relacionados

SEO Indicadores clave de rendimiento

17 SEO Indicadores clave de rendimiento que debería conocer en 2024

El seguimiento de los KPI de SEO debería ser una parte esencial de su estrategia de SEO . Para saber si una campaña de marketing de contenidos está...

Leer más
enlaces rotos

Cómo encontrar enlaces rotos en un instante con FandangoSEO

Los enlaces, también llamados hipervínculos, son elementos de un sitio web normalmente constituidos por texto o imágenes que, al ser seleccionados, redirigen al usuario a...

Leer más
@johnmu comienza su presentación en la Conferencia de Webmasters de Google en Tel Aviv

Claves de la Conferencia para webmasters de Google en Tel Aviv 2019

El 4 de diciembre, tuvimos la gran oportunidad de asistir a la Conferencia de Webmasters de Google en Tel Aviv, Israel. Estas conferencias...

Leer más
Arrow-up

Antes de que te vayas...

Si no quieres perderte ningún consejo o actualización de FandangoSEO, suscríbete a nuestra newsletter.

+5000 SEO confía en nosotros, únete a la comunidad