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!
Tabla de contenidos
¿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.
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 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.
Cada 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?
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 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, 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?
Para reducir el tamaño del DOM para que no afecte negativamente el rendimiento de la web debe 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 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 maneras 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 lazy loading (carga perezosa) 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 posts 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 predeterminada como 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
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 de domo excesivo perjudica el rendimiento de la web, ralentizando el tiempo de carga de la página. Manten tu estructura HTML simple sin elementos innecesarios. Revisa tu árbol DOM y desházte de los nodos que no añaden valor a tu sitio. No sólo acelerarás tu 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.
