Qué es el DOM o Document Object Model

Si te estás metiendo en todo lo que es optimización de tiempos de carga de sitio, seguramente escuchaste hablar del Document Object Model, o DOM. El DOM es un API de la maqueta HTML y XML (¡cuántas siglas!). Vamos por parte. API significa Application Programming Interface y sirve para hacer lo que su nombre explica: interactuar con una aplicación a través de código. A través del DOM, los programadores pueden crear documentos, navegarlos y agregarle, editarle o quitarle elementos, modificar sus atributos y alterar sus valores. Hablando mal y pronto, el DOM es la estructura o esqueleto de tu página web.

Seguramente te estarás preguntando qué relación hay entre el DOM y los tiempos de carga de un sitio. Al cargar una página, hay gran cantidad de elementos que se descargan: código HTML, imágenes, JavaScripts, hojas de estilo CSS, etc. Todos estos elementos pueden ser factores que hagan que tu página cargue más lento. Y, debido a que para Google un tiempo de carga bajo influye en el posicionamiento de un sitio, es importante asegurarse de que nada frene al DOM.

Si bien hay un ida y vuelta con respecto a Google y JavaScript, sigue siendo muy importante y muchas veces nos vemos obligados a usarlo en nuestros sitios. Es importante recalcar que JavaScript no es malo para SEO siempre y cuando el contenido no se muestre a través de él. Por ejemplo, si queremos que una serie de dropdowns se vaya actualizando según la opción seleccionada en el dropdown anterior, vamos a tener que recurrir a JavaScript. Dicho esto, hay formas y formas de mostrar el código JavaScript en una página.

Cuando se carga una página, un tag <script> puede frenar la descarga del Document Object Model hasta que se termina de procesar y luego continúa. Esto puede ser problemático si se tiene un script pesado en el <head> del código o en la parte superior del <body> por encima del contenido principal de la página. De ser así, el contenido no sería visible hasta que el código termine de procesar. A todos nos sucedió el estar navegando en una página que carga y carga y después de unos segundos aparece todo el contenido, las imágenes, etc. de golpe. Lo más probable es que en casos como esos haya un script que esté frenando al DOM de cargar y mostrarse rápidamente.

También es recomendable referenciar aquellos archivos JavaScript extensos para no tener gran cantidad de código cargando en la página misma (y más todavía si ese script aparece en todas las páginas). Para ciertos casos, va a resultar necesario usar el atributo async dentro del tag <script> para indicarle al navegador que no detenga la carga del Document Object Model a causa de ese script. El atributo async sólo se puede utilizar en los scripts referenciados y no en los que figuran en la misma página. Debajo mostramos cómo asincronar un script correctamente.

<script src="miscript.js" async></script>

Si decidís usar el atributo async, no olvides que se debe aplicar únicamente al código JavaScript que no tenga impacto con el contenido que se muestra. Por ejemplo, si tenés en la parte superior de tu código un script cuya función es cambiar la hoja de estilo según un valor seleccionado previamente por el usuario y lo cargás de manera asíncrona, se va a ver un diseño y luego va a cambiar automáticamente (porque el script corrió cuando se terminó de cargar el DOM).

En resumen, si se desea tener un tiempo de carga de página rápido, el primer paso es no frenar al DOM. En siguientes posts vamos a explicar más acerca de cómo optimizar una página web para que cargue más rápido.

Esperamos que esta breve explicación acerca de qué es el DOM o Document Object Model haya servido para entender un poco más la importancia del mismo llegado la hora de reducir los tiempos de carga de un sitio.