Si has realizado recientemente un análisis de tu web en PageSpeed y uno de los errores que se muestran es que tienes que evitar un tamaño excesivo de DOM y no sabes qué significa realmente y cómo solucionarlo has llegado al sitio indicado.
Empezamos…
¿Qué es el DOM?
DOM significa Document Object Model (modelo de objetos del documento). Piensa en tu web WordPress como una gran estructura de árbol. ¿Ya? Cada elemento de tus páginas, como encabezados de texto , imágenes, menús y botones, es como una rama o una hoja de este árbol. Estos elementos individuales se denominan nodos DOM.
El DOM es una representación de la estructura HTML de una página web e incluye todos los elementos, atributos y contenido de la página.
La cantidad total de nodos en la estructura de árbol de tu web es el tamaño de tu DOM. Cuantos más elementos tengas en la página más grande será el árbol DOM.
El DOM se compone de estos elementos:
- Nodos : todos los elementos HTML en el DOM se denominan nodos (también conocidos como «hojas» en el árbol).
- Profundidad : la longitud de la «rama» en un árbol se denomina profundidad. Por ejemplo, en el diagrama anterior, la etiqueta «
» tiene una profundidad de 3. (HTML -> body -> ul -> li). - Elementos secundarios : todos los nodos secundarios de un nodo (sin ninguna ramificación adicional) son elementos secundarios.
Por ejemplo, una página simple con solo un encabezado y un párrafo podría tener un tamaño de DOM más pequeño en comparación con una página compleja con múltiples secciones, imágenes, formularios de contacto y contenido incrustado. Creo que es fácil de entender esta parte ¿verdad?
A más elementos en tu página, mayor tamaño del DOM, del documento, con todos sus componentes que lo componen.
¿Qué significa en PageSpeed que evite un tamaño excesivo del DOM?
Si has analizado tus páginas en la herramienta PageSpeed de Google y has visto entre las distintas informaciones que ofrece el mensaje de «Evita un tamaño excesivo del DOM» debes saber un par de cosas al respecto.
PageSpeed utiliza el motor de Google Lighthouse, que empieza a advertir de un excesivo DOM cuando…
- Tiene más de 818 nodos en total.
- Tiene una profundidad mayor a 32 nodos.
- Tiene un nodo padre con más de 60 nodos secundarios.
Y, a partir de ahí hace diferencia entre advertencia o error, que distingue con distintos iconos y colores (naranja para advertencia y rojo para error):
marca las páginas con árboles DOM de la siguiente manera:
- Advertencia cuando el elemento
tiene más de 818 nodos. - Error cuando el elemento
tiene más de 1,400 nodos.
Como siempre me habrás oído, no hay que hacer caso ciegamente a PageSpeed, pero sí aprender de sus informes, advertencias y avisos de error, para poder mejorar la usabilidad y carga de nuestra web, y en esta ocasión es lo mismo.
¿Por qué afecta negativamente el tamaño del DOM a la velocidad de carga de las páginas?
Lo vas a comprender enseguida, sobre todo si entendiste lo anterior, y es que cuanto mayor sea el tamaño del DOM, más elementos y contenido tendrá que procesar el navegador que usa el visitante, desde su ordenador o dispositivo móvil, lo que puede afectar negativamente la experiencia del usuario y la velocidad de la página.
Una página con menos elementos, un DOM más pequeño, tarda menos en cargarse al completo que una página con montones de elementos ¿a que es pura lógica?
Hay montones de motivos por los que un tamaño excesivo del DOM afecta negativamente a una web:
- Un tamaño de DOM grande puede ralentizar la representación de la página, lo que da como resultado un mayor tiempo de carga . Esto puede ser especialmente problemático para los usuarios de dispositivos móviles o usuarios con conexiones a Internet más lentas, ya que pueden experimentar tiempos de carga más prolongados y una mala experiencia de usuario.
- Los motores de búsqueda como Google utilizan la velocidad de la página como un factor de clasificación, por lo que una página de carga lenta puede afectar negativamente tus esfuerzos de optimización para los motores de búsqueda (SEO).
- Puede provocar un mayor uso de memoria, ralentizar la representación de la página y afectar negativamente la experiencia del usuario y tus costes de alojamiento web (hosting).
- Cuando un navegador carga una página con demasiados nodos DOM, se requiere más potencia de procesamiento para procesar la página, lo que puede provocar un retraso en la reproducción de la página. Este retraso puede resultar frustrante para los usuarios y hacer que abandonen el sitio web. Si no optimizas o perderás visitas o incurrirás en costes adicionales en recursos de alojamiento.
- Aumenta el TTFB : a medida que aumenta el tamaño del DOM, aumenta el tamaño del documento HTML (en KB). Como se deben transferir más datos a través de la red, esto aumenta el TTFB .
- Mayor tiempo de análisis y renderizado (INP) : un árbol DOM grande y reglas de estilos complicadas suponen un gran trabajo para el navegador. El navegador tiene que analizar el HTML, construir un árbol de renderizado, etc. Cada vez que el usuario interactúa o algo en el HTML cambia, el navegador tiene que volver a calcularlo.
Por lo tanto, reducir el tamaño del DOM puede ayudar a mejorar el rendimiento y la velocidad del sitio web. Eso sí, es importante tener en cuenta que la reducción del tamaño del DOM no debe hacerse a expensas de la experiencia del usuario.
Garantizar que tu web sea fácil de navegar y proporcione contenido relevante sigue siendo la máxima prioridad. Sin embargo, al optimizar el tamaño del DOM, puede ofrecer una mejor experiencia de usuario y, al mismo tiempo, mejorar el rendimiento de la web.
Con esto quiero decir que no incurras en la sobre optimización, que en lo que se refiere al DOM sería quitar tantos elementos y recursos de la página que al final no cumpliese su objetivo de ofrecer contenido o productos valiosos al visitante de una manera sencilla de navegar y entender.
Haz la página tan pequeña como puedas, mientras siga siendo sencilla y de utilidad para el usuario.
¿Qué beneficios tiene reducir el tamaño del DOM?
Creo que la siguiente duda es obvia, y fácil de responder.
A continuación tienes algunas de las razones importantes por las que necesitas reducir el tamaño del DOM.
Mejoras de conversión
Un DOM demasiado grande se traduce en tiempos de carga de páginas más lentos, especialmente en dispositivos con procesadores más débiles o conexiones a Internet más lentas. En el entorno actual de rápido movimiento, los usuarios necesitan gratificación instantánea y una web lenta puede obligarlos a buscar alternativas. Por lo tanto, es necesario optimizar la velocidad de las páginas de toda la web .
El rendimiento y conversión de tu sitio está estrechamente vinculado a la satisfacción del usuario. Los estudios han demostrado que incluso un retraso de un segundo en el tiempo de carga de una página puede provocar una caída significativa en la participación del usuario.
Por lo tanto, optimizar tu DOM para reducir los tiempos de carga es fundamental para retener a los visitantes y mantenerlos interesados en tu contenido o productos.
Mejoras de accesibilidad
Una estructura DOM optimizada mejora la accesibilidad y simplifica la interpretación y la navegación del contenido.
La accesibilidad web es esencial y un requisito legal en muchos países.
Un DOM bien estructurado garantiza que todos los usuarios, incluidos aquellos con discapacidades, puedan acceder y navegar por su contenido sin barreras. Esto no solo amplía tu audiencia, sino que también te ayuda a cumplir con los estándares de cumplimiento legal.
Beneficios del SEO
Google y otros motores de búsqueda prefieren los sitios web que se cargan rápidamente. Un tamaño de DOM más pequeño contribuye a tiempos de carga más rápidos, lo que mejora indirectamente tu posicionamiento en los motores de búsqueda.
La optimización de motores de búsqueda (SEO) es un aspecto fundamental de la visibilidad en línea. Un sitio web que se carga más rápido tiene más probabilidades de obtener una mejor posición en las páginas de resultados de los motores de búsqueda (SERP), lo que genera tráfico orgánico a tu sitio.
Al reducir el tamaño de tu DOM, mejoras el rendimiento SEO de tu sitio web , haciéndolo más fácil de descubrir para los visitantes potenciales.
Mantenimiento simplificado
Los DOM más pequeños son por lógica más manejables y más fáciles de depurar. Reducen la complejidad de la base de código, minimizan los errores y facilitan un mantenimiento mínimo.
Los sitios web no son estáticos, requieren de un mantenimiento y actualizaciones constantes. Un DOM limpio y bien organizado simplifica este proceso, lo que facilita la identificación y la solución de problemas. Esto, a su vez, reduce los costos de desarrollo y mantenimiento a largo plazo.
¿Cuáles son las razones para un tamaño excesivo del DOM?
Las páginas web pueden volverse lentas y tener un rendimiento deficiente debido a un tamaño de DOM grande. Este es un problema común que vale la pena examinar al optimizar el rendimiento web. Veamos las principales razones que contribuyen a este problema:
Demasiados elementos en una página
Los diseños complejos o el código redundante pueden generar demasiados elementos en una página. Si el diseño no está optimizado para el rendimiento, se obtiene un árbol DOM desordenado. Esto puede ralentizar la página y afectar la experiencia del usuario.
Estructuras profundamente anidadas
La anidación profunda en HTML puede causar problemas de rendimiento. Cuando hay muchas incrustaciones, el árbol DOM se vuelve complejo. Esta complejidad puede dificultar que los navegadores representen la página de manera eficiente, lo que ralentiza el procesamiento de CSS y JavaScript.
Temas y plugins no optimizados
Los temas y complementos pueden agregar elementos innecesarios, JavaScript o CSS. Los temas suelen tener funciones predeterminadas que sobrecargan el DOM, mientras que los plugins pueden agregar scripts y estilos que aumentan los tiempos de carga, incluso si esas funciones no se utilizan.
Mal uso de maquetadores
Los maquetadores web como el editor de bloques, Divi o Elementor, por decir unos pocos, facilitan mucho la vida a la hora de diseñar webs, pero un mal uso de sus elementos puede contribuir a generar un DOM sobrecargado si no se entiende cómo está estructurado el DOM, algo que vimos al principio, y cómo hacer un uso eficaz de estas herramientas para no aumentar excesivamente el tamaño del DOM, usando elementos innecesarios, excesivos, o mal anidados.
Cómo reducir el tamaño del DOM
Visto todo lo anterior, un ejemplo práctico, en HTML, de reducción del DOM sería como pasar de esto…
A una estructura más sencilla, pero con igual resultado, como esta:
Pero como estamos hablando de WordPress, vamos a ver cómo hacerlo teniendo en cuenta sus peculiaridades, ya que no vamos a tener el HTML disponible, sino plugins, temas, editores, etc.
¡Al lío!
Cómo reducir el tamaño del DOM con WordPress
Cuando usamos WordPress no «escribimos» directamente el HTML resultante en el navegador, que forma el DOM, sino que lo generamos a partir de una serie de elementos, que son los que tenemos a nuestra disposición: el tema, plugins y el editor de WordPress.
Esta magnífica triada es la que nos permite crear webs fantásticas, pero debemos de ser conscientes de cómo crean el contenido, y en este caso, cómo afectan al tamaño del DOM de cada página de nuestro sitio web.
El modo de mantener controlado el tamaño del DOM con WordPress lo podemos conseguir con la siguiente lista:
Limita el uso de plugins
Parece demasiado obvio pero debes razonar y justificar el uso de cada plugin que tengas instalado en tu web, y en lo que se refiere al tamaño del DOM especialmente aquellos que añadan contenido o elementos dentro del HTML de las páginas del sitio.
Evita, en lo posible, todo plugin que agregue cualquier elemento dentro del DOM, como iconos, separadores, divisores, adornos, etc.
Es muy común, por ejemplo, sobre todo en las entradas de blog, añadir todo tipo de elementos al DOM, como por ejemplo…
- Caja de suscripción a la newsletter.
- Iconos para compartir en múltiples redes sociales.
- Caja de autor del contenido.
- Lista de entradas relacionadas, con su título, imagen, incluso extracto de texto.
- Por supuesto, los comentarios, con todos sus extras.
No digo que no pongas nada, pero limítalo en lo posible. Por ejemplo, muestra 3 entradas relacionadas en vez de 5, ¿de verdad necesitas la caja de autor?, ¿en tantas redes sociales tienes perfil y comparten contenido tus lectores?, creo que me entiendes …
¿Plugins multifunción o un plugin para cada cosa?
No solo hay que usar solo los plugins imprescindibles, sino elegirlos bien, y me refiero a que te puedes encontrar en dudas como si usar un plugin para varias funcionalidades, tipo Jetpack, o un plugin para cada necesidad.
Y no hay una regla.
Si el plugin multipropósito está bien programado, y sobre todo optimizado, solo cargará los recursos necesarios en cada página según necesidad y las funcionalidades activas, pero puede pasar todo lo contrario, que cargue estilos y scripts «por si acaso», como hace Contact Form 7 o también Jetpack. Puedes optimizarlos (mira los enlaces) pero debes analizar el uso del DOM que hace cada plugin, y no dar nada por sentado, por mucho que confíes en la empresa o desarrollador, pues no siempre están «a todas».
Así que analiza siempre qué añaden y qué no los plugins, cada uno, sin dar nada por sentado, y por eso te he puesto arriba un ejemplo de plugin unifuncional y plugin multifuncional, y ambos lo hacen mal.
Elige un tema WordPress ligero y bien estructurado
Hay miles de temas WordPress gratuitos, y otros tantos de pago, todos fantásticos en su aspecto y funcionalidades, pero algunos simplemente añaden demasiadas cosas, a veces innecesarias.
Comprueba en qué afecta el tema que elijas al DOM. La prueba es sencilla:
- Haz una selección de los temas que te gustan para tu web e instálalos en una web de pruebas.
- Crea en la web de pruebas una página o entrada con texto, listas, alguna imagen, vídeo y encabezados y publícala.
- Activa los temas uno a uno y analiza la página antes creada en PageSpeed de Google para comprobar el tamaño del DOM con cada tema activo.
Como el contenido de la página es siempre el mismo, el elemento diferenciador, que afecta al DOM, será el tema activo en cada momento. Simplemente elige el que entregue el DOM de menos tamaño.
Reduce la cantidad de contenidos a mostrar en cada página
Esto es muy sencillo, tanto si tienes una página de productos de tu tienda como un blog con el listado de entradas del mismo, cuantos menos elementos a mostrar haya más pequeño será el DOM.
Esto puedes controlarlo muy fácilmente, en lo que se refiere a entradas de blog en los ajustes de lectura de WordPress puedes elegir cuántas mostrar, y si es una tienda online, en los ajustes de personalización del tema para WooCommerce casi siempre es posible elegir cuántos productos mostrar por página.
Separa páginas muy grandes en varias más pequeñas
¿A que se te había ocurrido ya?, ¿y por qué no habías hecho?
Los sitios de página única son muy prácticos para ciertos usos, pero no son para todas las webs, y menos si por ello generas un DOM enorme.
Si en tu web tienes una página con todo, la presentación, detalle de tus contenidos, formulario de contacto, fotos de la familia y tu blog de aventuras, igual deberías crear páginas separadas para cada apartado de esa enorme página única ¿no crees?
¿No quieres crear páginas nuevas?, recuerda que puedes separar una página en varias sin salir del editor de WordPress.
Aplica carga diferida a todo
Si no puedes prescindir de mostrar contenidos en la página, siempre puedes forzar la carga diferida, el lazy load, a todos aquellos elementos que estén aún debajo de la pantalla actual del dispositivo del visitante, y que solo se carguen cuando el usuario haga scroll para seguir navegando por la página.
Puedes hacer carga diferida de imágenes, de vídeos, hasta de contenidos, productos, de todo. Algunos temas ya contienen esta funcionalidad y puedes activarla, y sino siempre puedes utilizar plugins como WP Rocket o Speed Optimizer para conseguirlo.
También puedes aplazar la carga de comentarios, por ejemplo, con plugins como Lazy Load for comments.
Simplifica la estructura de tus diseños y maquetación
¿Te acuerdas que al DOM le afecta tanto la cantidad de elementos como la cantidad de anidaciones? Si tienes siempre esto en cuenta a la hora de crear contenidos puedes reducir con mucho el tamaño del DOM usando la menor cantidad posible, y necesaria, de componentes.
Por ejemplo, si vas a mostrar dos imágenes una a continuación de la otra no es necesario anidarlas dentro de un bloque de fondo o de columnas, ni siquiera de agruparlas en una fila, puedes añadirlas como bloques simples de imagen, y el HTML resultante será mucho menor, tendrás un DOM más ligero.
Aquí tienes un ejemplo muy básico pero que muestra a lo que me refiero: distinta cantidad de elementos usados para maquetar, mismo aspecto, distinto DOM…
Usa un tamaño adecuado para las imágenes
Evita la redimensión de imágenes mediante HTML. Si el espacio disponible en un contenedor de la página para la imagen es de 300×400 píxeles no subas la imagen a 600×800 o similar y dejar que el tema o plugins adapten la imagen al tamaño disponible.
Este tipo de prácticas consumen más recursos del navegador, y en consecuencia del dispositivo, y además añaden más código al HTML, o sea, agrandan el DOM.
Minimiza todos los códigos HTML, CSS y JS
Esto está chupado, utiliza tu plugin favorito de optimización para optimizar, reducir, minimizar, como lo quieras llamar, todos los códigos, eliminando líneas huérfanas y montones de elementos que hacen más grande el DOM, y no sirven de nada.
Lo mismo para los comentarios de código, si puedes evitarlos no los añadas, el código se explica por sí mismo y cualquier programador debe ser capaz de interpretarlo, sin necesidad de ayudas de texto del desarrollador anterior (salvo casos raros).
Reduce el contenido de CSS que no se use
Plugins, el tema, y uno mismo, pero sobre todo los plugins, a veces añaden código CSS a todas las páginas, da igual si cada página en concreto lo usará o no. Todo ese código, de nuevo, añade tamaño al DOM.
Utiliza WP Rocket para eliminar automáticamente todo el CSS que no se use, en esta optimización este plugin es imbatible.
No uses CSS para ocultar elementos
Vale, me vas a recordar la cantidad de veces que he compartido trucos para ocultar elementos mediante CSS, pero hoy no toca ¿vale? :D
Hoy estamos a tope con reducir el DOM, y oye, que no siempre hay que reducir el DOM a lo loco, a veces es DOM está estupendo y no pasa nada por ocultar «cosas» mediante CSS.
Dicho esto, si tienes problemas de tamaño excesivo del DOM, a veces, es posible, podría pasar, que estuvieses ocultando elementos mediante CSS más allá de lo razonable, y quizás haya otro método más limpio de ocultar ciertas cosas.
Por ejemplo, y solo te doy uno, si quieres ocultar el botón de añadir al carrito en las páginas de producto de WooCommerce, en vez de ocultarlo mediante CSS, así:
.woocommerce .add_to_cart_button, .woocommerce .single_add_to_cart_button { display: none; }Igual puedes desactivarlo usando acciones de WooCommerce (que se puede), en vez de ocultarlo, lo que es más eficiente y limpio, o sea, así:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
Utiliza sprites CSS para iconos y gráficos pequeños
Combina varias imágenes pequeñas, como iconos, en un único archivo de imagen utilizando sprites CSS.
Esto reduce la cantidad de solicitudes HTTP y elementos DOM, lo que ayuda a mantener un tamaño de DOM manejable.
¿Y qué pasa con los maquetadores?
Eso lo vemos otro día, ¿mañana quizás?, veremos…
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
