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 el logro de un buen posicionamiento SEO en una página web es su rendimiento de carga. Y este es un tema en el que el tamaño del 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.

¡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 de 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 el objeto principal del que dependen los demás objetos secundarios. El DOM representa el la estructura HTML de la página como un árbol...compuesto 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.

ECada vez que el navegador recibe un documento HTML, tiene que convertirlo en esta estructura 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?

Rendimiento de la web

La verdad es que el tamaño del DOM afecta el rendimiento de una página. Un DOM excesivamente grande puede disminuir la velocidad del sitiowebya 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, lo que aumenta innecesariamente el consumo de datos y hace 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.
  • El 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?

Reducir el tamaño del DOM para que no afecte negativamente el rendimiento de la webdebe eliminar todos los elementos HTML que no sean necesarios. Como hemos visto, si no tomamos las medidas necesarias, hay varias razones por las que retrasarí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: Esos nodos que no tienen más ramas.

Dicho esto, 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 cuando se desarrollen sitios web, las páginas contengan menos de 1.500 nodos DOMlo que significa que los diseños no deben ser demasiado complejos.

 

Cómo reducir el tamaño del DOM en WordPress

Hay varias maneras de reducir el tamaño del DOM en WordPress:

Segmentar las páginas grandes en varias páginas

¿Tiene una sola página que muestre diferentes tipos de contenido de su 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 perezoso en todos los elementos que lo permiten. Puedes hacerlo con videos de YouTube, usando Youtube Lite o Lazy Load de WordPress WP-Rocket.

También es esencial limitar el número de entradas por página de blog. Un número máximo razonable de puestos 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 para eliminar ciertos elementos que vienen con el tema de WordPress de forma predeterminadacomo el botón "Add to Cart" en las páginas de productos, fecha de publicación, información sobre el 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

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

Pensamientos finales

Un tamaño de domo excesivo perjudica el rendimiento de la web, ralentizando el tiempo de carga de la página. Mantenga su Estructura HTML simple sin elementos innecesarios. Revise su árbol DOM y deshágase de los nodos que no añaden valor a su sitio. No sólo acelerará su sitio web, sino que también ofrecerá un 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. 

Compártelo

Ver más artículos relacionados

optimización del rendimiento de la web

Cómo optimizar la velocidad de su sitio web

En este artículo, encontrará las mejores prácticas para optimizar la velocidad de su sitio web. Para ello, también le mostraremos cómo...

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
supervisar el SEO

¿Por qué es tan importante monitorear su SEO?

En resumen, en la optimización de los motores de búsqueda, el seguimiento, la medición y la supervisión son cruciales porque así una empresa puede detectar y...

Leer más
Arrow-up