¿Qué es el DOM?
DOM son las siglas de Document Object Model. Traducido al español sería Modelo de Objeto de Documento. El DOM nos permite ejecutar código en el navegador para así acceder e interactuar con cualquier nodo del documento.
Dicho así puede parecer algo complejo, lo sabemos, así que tranquilx, intentaremos simplificarlo lo máximo posible para hacértelo más fácil. ¡Allá vamos!
Al visitar una página web, para poder visualizarla e interactuar con ella necesitamos un navegador, ya sea Chrome, Microsoft Edge, Mozilla Firefox, Opera o cualquier otro. Indistintamente, para que podamos ver el contenido se realiza un proceso.
Este proceso es llamado Critical Rendering Path, el cual se encarga de traducir el código (HTML, CSS o Javascript) de nuestra web en píxeles, lo que permite que se muestren en pantalla imágenes, animaciones y demás elementos.
Aunque el Critical Rendering Path es bastante más complejo de lo que tocaremos en este artículo, la parte de este proceso que nos interesa en esta ocasión es el DOM. El DOM es algo así como un árbol en el que se estructuran los datos de una web en HTML. Su complementario es el CSSOM que se encarga de dar estilos a ese HTML, mediante otros lenguajes como CSS.
El HTML en una web contiene dos etiquetas fundamentales; el head y el body. Dentro de estas etiquetas es donde introducimos el resto de etiquetas, desde un título (H1, H2,…) a otros “contenedor” de contenido como los <div>, que a su vez pueden incluir contenedores de contenidos estructurados dentro de los mismos.
Veamos un ejemplo gráfico:
Como podemos observar la estructura de datos del DOM se asemeja a la de un árbol, uno conformado por distintos nodos.
¿Por qué es importante reducir el tamaño del DOM?
La estructura del DOM en las páginas webs ha sido algo que durante mucho tiempo estuvo relativamente consensuado. Por ejemplo, para crear cuatro columnas de contenido, con tres elementos en cada una de ellas, lo normal era crear un contenedor para situar en su interior otros cuatro contenedores, y a su vez dentro de cada uno de esos cuatro otros tres.
Si sumamos todos los contenedores necesarios para crear cuatro columnas con distintos contenidos, en este caso; icono, título y párrafo, nos da un total de 17 contenedores.
Como vemos se crea un amasijo de contenedores que engordan el DOM, y esto se traduce en un tiempo de carga de la web mucho más lento, esto es porque el renderizado tiene más nodos que reconocer en el proceso necesario para que se visualice la web (o como hemos visto anteriormente; Critical Rendering Path). Y claro, una carga lenta se traduce en un peor posicionamiento y en una tasa de rebote de los clientes mucho mayor.
Podría parecer que hemos estado desarrollando los sitios webs de manera equívoca, pero en realidad lo que han cambiado son los parámetros que los medidores de carga como Google PageSpeed Insights o GTMetrix en los últimos años. El uso de DOMs excesivos ya estaba penalizado, pero ahora se le da mucha más importancia.
Esta carga excesiva de contenedores no debe caer exclusivamente en el diseñador o en cómo han cambiado los parámetros de las herramientas de medición. Realmente, herramientas como Elementor o Beaver Builder han sido decisivas en la forma en la que construimos sitios webs, por su facilidad de uso tanto para el cliente, como para los diseñadores. Y ¡sorpresa!, la mayoría de estos constructores funcionan de la forma anteriormente descrita.
Aunque aparentemente 17 contenedores no deberían aumentar mucho el tiempo de carga de renderizado, ninguna landing consta de cuatro columnas exclusivamente. Al multiplicar el número de elementos por página individual, veremos un incremento significativo de varios segundos en el tiempo de carga del sitio web.
¿Cómo afecta el uso abusivo del DOM en el posicionamiento SEO?
La carga del sitio web es decisiva en el posicionamiento SEO de cualquier página web. Una carga rápida reducirá la tasa de rebote, ayudará a mejorar el CRO (Conversion Rate Optimization) ; es decir, mejorará la conversión de visitantes en leads y, por supuesto, mejorará la indexación.
Según un análisis de Kissmetrics, el “40% de los visitantes abandonan las páginas que llevan más de 3 segundos para cargar” y cada segundo de más reduce un 7% las conversiones.
Una diferencia de milésimas de segundo puede ser la diferenciación entre tu empresa y la de tus competidores pudiendo hacer que tus clientes potenciales no pasen por caja.
¿Cómo medir el DOM?
Cómo hemos citado, existen varias herramientas con las que medir la velocidad de carga de una página web. Las más famosas son Google Pagespeed Insights y GTMetrix.
Medir en una herramienta externa como GTMetrix
Para ver qué elementos están tardando más en cargar dentro de nuestro DOM, simplemente entraremos a GTMetrix.com, introduciremos la URL que queremos analizar y la web nos dará la información pertinente.
En “Avoid an excessive DOM size” podremos ver la cantidad de nodos que contiene la landing que estamos visitando hipotéticamente.
Medir desde el navegador (nuestra opción favorita)
También es posible medir el DOM sin necesidad de herramientas externas. Dentro del mismo navegador podemos encontrar, en “Herramientas para Desarrolladores” el apartado “Red” o “Network”, el cual, tras recargar la página nos dará los resultados de la medición.
En la medición de esta página desarrollada por alGenio, hemos destacado en azul el número de peticiones, en rojo el tiempo de carga del DOM y en verde el tiempo de carga en general de la web.
Vamos, ¡reduzcamos el DOM!
¿Cómo reducir el DOM? Para poner el Document Object Model a dieta debemos reducir el número de contenedores al máximo, cambiar la forma en la que construimos nuestros sitios webs.
Veamos un par de prácticas sencillas que podemos llevar a cabo para reducirlo al máximo.
Prestar atención a todas las landings de una página.
No debemos caer en pensar que la optimización del DOM es algo exclusivo de un sitio web a título general. Debemos calcular con mimo la utilización de los contenedores en cada una de las landings. Al final esto repercutirá en una experiencia fluida en toda la página.
Gutemberg es mejor que Elementor, al menos por ahora
Aunque nos duela por la facilidad que nos ofrece, ya que Elementor es más sencillo en la maquetación y los posteriores cambios que solicite el cliente, Gutemberg está mejor optimizado en el uso de contenedores, reduciendo el número de los mismos para hacer básicamente lo mismo.
Probablemente, prefieras continuar usando Elementor o cualquier otro constructor visual, pero es un hecho que Gutemberg, el constructor nativo de WordPress, está creando un ecosistema enfocado a optimizar recursos de una forma mucho más eficiente y enfocada al SEO.
Me quiero quedar en Elementor, ¿puedo hacerlo?
Elementor actualmente está a punto de lanzar una funcionalidad que, aunque se encuentra en beta, ya podemos usar y recomendamos encarecidamente: Container; el uso de contenedores que engloban todos los elementos que queramos añadir de una forma más eficiente.
Si no quieres usar la versión beta de Container, también puedes trabajar con porcentajes desde las opciones avanzadas de cualquier widget, gracias a la pestaña “Posicionamiento”. Aunque algo escondida te ayudará a conseguir el mismo efecto.
Es cierto que la curva de aprendizaje de esta nueva forma de trabajar es un poco alta, y que quizás encontremos más fácil el sistema anterior, pero sin duda se notan los resultados.
Esta opción, que se encuentra dentro del apartado de “Experimentos” dentro de la pestaña herramientas de las opciones de Elementor, se puede complementar con “Servir el DOM optimizado”.
Esta última optimizará automáticamente el código para reducirlo al máximo con el contenido ya existente. También se encuentra en beta, pero en este caso el uso o no de la función deberá determinarla el propio diseñador, ya que puede entrar en conflicto con ciertos addons, animaciones o transiciones, sobre todo si se ha incluido CSS personalizado en la página, ya que puede romper ciertas cosas en el sitio.
Si desarrollas a medida; cambia la mentalidad, si no; también
Para proyectos de gran envergadura es común recurrir a diseños a medida. El uso de porcentajes para distribuir los contenidos dentro de un único contenedor es mucho mejor que crear varios contenedores dentro del mismo. Evitar las etiquetas <div> repetitivas puede ser determinante en estos casos.
Esto es aplicable también si trabajas en proyectos con constructores como Elementor. Con la función Container podrás evitar abusar de ellos mediante porcentajes.
No todos los constructores visuales son el terror de la optimización
Actualmente, vemos una clara tendencia a la optimización de las herramientas de construcción visual para WordPress. Pero tenemos que hacer una mención especial a una herramienta que nace bajo la premisa de la optimización, que evita el uso de temas (de hecho los desactiva) y te permite construir webs limpias desde cero. Hablamos de Oxygen.
Oxygen nace bajo el pretexto de crear webs desde WordPress con el código estrictamente necesario. Mientras otras herramientas cargan recursos que no se muestran en la web pero están ahí, Oxygen evita este tipo de problemas, ya que la maquetación se hace en un lienzo en blanco, sin trampas.
Aunque esta herramienta es para desarrolladores algo más avanzados, sin duda es para tenerla en cuenta.
Si te interesa este tipo de constructores y te pica la curiosidad sobre Oxygen hazlo saber en los comentarios y puede que próximamente lo analicemos en profundidad y lo comparemos con algunos que ya están asentados en el mercado.
En conclusión
El DOM es un factor a tener en cuenta en el desarrollo de cualquier proyecto web y un pilar fundamental en el correcto renderizado de una página. Pero no es el único punto a tener en cuenta. La carga web es un tema extenso y muy interesante, que de desarrollarse con planificación previa y durante la ejecución, mejorará considerablemente la experiencia de usuario y aumentará la tasa de conversión de cualquier tipo de negocio.
¿Te gustaría conocer más sobre la velocidad de los sitios web y cómo mejorarla?
