DOMContentLoaded: ¿Sigue Siendo Relevante en 2024?

hace 7 años

★★★★★Valoración: 4.74 (6416 votos)

El evento DOMContentLoaded ha sido una métrica clave en el rendimiento web durante mucho tiempo, utilizándose para medir la velocidad de carga de las páginas. Sin embargo, en la actualidad, métricas más modernas y centradas en la experiencia del usuario, como las Core Web Vitals, han ganado protagonismo. En este artículo, exploraremos en detalle el evento DOMContentLoaded, cuándo se activa, cómo medirlo y si todavía es relevante utilizarlo hoy en día.

How to reduce DOM content loaded time? — There are several ways to optimize the DOMContentLoaded event for improved website performance and user experience. One way is to minimize the size of resources such as images, CSS, and JavaScript, which can reduce the time it takes for the event to fire.

¿Qué es el evento DOMContentLoaded?

DOMContentLoaded es un evento del navegador que se dispara en el objeto document de un sitio web. Esto significa que se pueden añadir manejadores de eventos utilizando JavaScript, y las páginas pueden ejecutar código en respuesta a la activación de este evento. Al formar parte del proceso de carga de la página, DOMContentLoaded también se ha utilizado como una métrica de rendimiento web para medir la rapidez con la que se carga una página.

Para añadir un listener o escuchador a este evento, se utiliza JavaScript de la siguiente manera:

document.addEventListener("DOMContentLoaded", function() { // Tu código JavaScript aquí });

¿Cuándo se activa DOMContentLoaded?

El evento DOMContentLoaded se activa una vez que el documento HTML ha sido completamente parseado por el navegador. Generalmente, esto ocurre después de que se ha alcanzado la etiqueta de cierre </html>. Es importante destacar que DOMContentLoaded también se activa después de que los scripts diferidos (deferred scripts) se han ejecutado.

Los scripts en línea y síncronos que se encuentran en el documento bloquean el analizador HTML. Por lo tanto, estos scripts también retrasan la activación del evento DOMContentLoaded. En la siguiente captura de pantalla de cascada de peticiones, se puede observar un ejemplo de cuándo se activa el evento DOMContentLoaded, específicamente después de la carga y ejecución de un script diferido.

DOMContentLoaded vs. Evento Load

Es crucial distinguir DOMContentLoaded del evento Load. El evento Load se activa después de que todos los recursos de la página, como hojas de estilo, imágenes y scripts (incluso los asíncronos), se han cargado por completo. Por lo tanto, DOMContentLoaded siempre ocurre antes del evento Load.

Para ilustrar la diferencia temporal entre ambos eventos, podemos utilizar el siguiente código JavaScript para medir sus tiempos de activación:

addEventListener("DOMContentLoaded", (e) => console.log("DCL", e.timeStamp + " ms") ); addEventListener("load", (e) => console.log("Load", e.timeStamp + " ms"));

Al ejecutar este código en una página de ejemplo, podemos obtener datos como los siguientes:

DCL 657 ms Load 1226 ms

Estos resultados demuestran claramente que DOMContentLoaded se activa significativamente antes que el evento Load, lo que subraya su utilidad para medir la rapidez con la que el HTML básico de una página está listo para la interacción.

¿Cómo Medir DOMContentLoaded?

Para medir el tiempo de DOMContentLoaded en Chrome DevTools, puedes realizar una grabación de rendimiento (Performance recording). Dentro de la grabación, el evento se mostrará en la sección de Timings. Al hacer clic en el marcador de DOMContentLoaded, se mostrará la marca de tiempo exacta en la que se activó.

How to trigger DOMContentLoaded? — DOMContentLoaded event triggers on document when DOM is ready. We can apply JavaScript to elements at this stage. Script such as or block DOMContentLoaded, the browser waits for them to execute.

Histórico de DOMContentLoaded

El HTTP Archive ha recopilado mediciones de DOMContentLoaded desde 2013. Sin embargo, es importante tener en cuenta que ha habido cambios en el entorno de prueba a lo largo del tiempo, lo que dificulta determinar si las variaciones en las métricas se deben a cambios en la web en sí o a la forma en que se recopilan los datos.

Desde 2016, el agente de prueba ha utilizado Chrome. En ese momento, la métrica típica de DOMContentLoaded era de 2.6 segundos en dispositivos de escritorio. El valor más reciente, de noviembre de 2017, fue de 2.7 segundos, lo que sugiere que la métrica se había mantenido relativamente estable durante ese periodo.

El HTTP Archive también rastrea métricas de usuarios reales del Chrome User Experience Report (CrUX) de Google. En este informe, Google indica si la métrica alcanza una calificación "Buena", lo que significa una puntuación de DOMContentLoaded por debajo de 4 segundos.

Los datos muestran que DOMContentLoaded ha mejorado significativamente desde 2021. Esto podría deberse a que los usuarios reales tienen redes y dispositivos más rápidos, mientras que los datos de laboratorio del HTTP Archive utilizan un entorno de prueba consistente.

CSS y JavaScript: ¿Cómo Afectan a DOMContentLoaded?

En general, el CSS no bloquea el analizador HTML, por lo que el evento DOMContentLoaded puede activarse antes de que se haya cargado el CSS. (Sin embargo, aunque el CSS no bloquee el analizador, las hojas de estilo sí bloquearán el renderizado de la página).

No obstante, el código JavaScript en la página sí bloquea el analizador HTML y DOMContentLoaded, incluso si se utiliza el atributo defer. Esto significa que si el analizador HTML se encuentra con un script en línea o ha terminado de analizar y está ejecutando scripts diferidos, primero tendrá que esperar a que se cargue el CSS antes de que los scripts puedan ejecutarse y antes de que se active el evento DOMContentLoaded.

Esto se debe a que los scripts pueden depender de los cambios de estilo aplicados por el CSS. Por lo tanto, para optimizar el tiempo de DOMContentLoaded, es fundamental minimizar el impacto del JavaScript y, en menor medida, del CSS en el proceso de carga.

How to call JavaScript function after DOM loaded? — Use DOMContentLoaded event callback You can use the DOMContentLoaded event as the trigger for executing your code. Do this by using document. addEventListener() to tie a custom function to the event. This example shows you how to define a custom function that will execute only after the DOM is loaded.

Limitaciones de DOMContentLoaded y Alternativas

La principal desventaja de DOMContentLoaded es que no informa sobre la experiencia del usuario. A diferencia de un hito de renderizado de página como Largest Contentful Paint (LCP), DOMContentLoaded se activa independientemente de si el contenido que importa al usuario está visible o no.

Sin embargo, DOMContentLoaded sí proporciona una buena indicación de cuánto tiempo se tarda en cargar el conjunto inicial de recursos de la página. Además, es compatible con todos los navegadores, mientras que Largest Contentful Paint solo funciona en Chrome y Firefox.

Para una comprensión más profunda de los casos de uso de DOMContentLoaded, se recomienda consultar los artículos detallados de Harry Roberts.

Consejo: Utiliza DOMContentLoaded para depurar problemas de rendimiento, pero emplea métricas centradas en el usuario para evaluar el rendimiento general de tu sitio web.

Herramientas como DebugBear permiten rastrear DOMContentLoaded mediante pruebas sintéticas continuas, así como análisis de usuarios reales.

Para las pruebas basadas en laboratorio, puedes abrir la pestaña Metrics en los resultados de tus pruebas para ver una serie de hitos de tiempo de carga, incluyendo DCL y el evento Load.

What is load() in JavaScript? — The load() method loads data from a server and puts the returned data into the selected element. Syntax: $(selector). load(URL,data,callback);

Como parte de las funcionalidades de monitorización de usuarios reales, DebugBear también ofrece un panel dedicado a la métrica DOMContentLoaded. En este panel, puedes visualizar el valor promedio de DCL, así como un histograma que indica cómo se distribuyen las experiencias de DCL entre tus visitantes.

También puedes consultar las páginas principales de tu sitio web e identificar áreas donde el rendimiento es lento, facilitando la optimización específica de páginas con problemas.

¿Cómo Llamar a una Función JavaScript Después de que se Cargue el DOM?

Al escribir código JavaScript para un navegador web, a menudo surge la necesidad de que el código se ejecute solo después de que la página se haya cargado por completo. Esto es especialmente cierto si tu JavaScript manipula o utiliza el DOM HTML. Si tu JavaScript intenta hacer referencia a un elemento que aún no se ha cargado, fallará.

Como se mencionó anteriormente, el evento DOMContentLoaded es la solución ideal para este problema. Puedes utilizar el evento DOMContentLoaded como el disparador para ejecutar tu código, utilizando document.addEventListener() para vincular una función personalizada al evento. El siguiente ejemplo muestra cómo definir una función personalizada que se ejecutará solo después de que se haya cargado el DOM:

document.addEventListener("DOMContentLoaded", function () { // Tu código JavaScript se ejecuta aquí console.log("El DOM se ha cargado completamente"); });

Usando jQuery

Si estás utilizando jQuery, un popular framework de JavaScript, también existe una manera sencilla de diferir la ejecución del código hasta que la página se haya cargado:

$(document).ready(function() { // Tu código jQuery se ejecuta aquí console.log("El DOM se ha cargado (con jQuery)"); });

Asegúrate de incluir la librería jQuery en tu página web antes de utilizar este código.

¿Cómo Reducir el Tiempo de DOMContentLoaded?

Optimizar el tiempo de DOMContentLoaded es crucial para mejorar la percepción de velocidad de carga de tu sitio web. Para evaluar el impacto de la optimización de DOMContentLoaded en la experiencia del usuario, es fundamental comparar el comportamiento de los usuarios antes y después de realizar mejoras.

Algunas métricas clave para medir este impacto incluyen:

Vistas de página y Tasa de Rebote: Indican cuántos usuarios permanecen en tu página y cuánto tiempo permanecen en ella. Una mejora en DOMContentLoaded puede traducirse en una menor tasa de rebote y más páginas vistas.
Tasa de Conversión e Ingresos: Muestran cuántos usuarios completan una acción o transacción deseada en tu página. Un DOMContentLoaded más rápido puede mejorar la tasa de conversión al reducir la frustración de los usuarios.
Comentarios y Satisfacción del Usuario: Métodos como calificaciones, reseñas, encuestas o entrevistas pueden proporcionar datos cualitativos sobre cómo se sienten tus usuarios con respecto al rendimiento y la usabilidad de tu página.

Reducir el tiempo de DOMContentLoaded implica optimizar varios aspectos de tu sitio web, incluyendo:

Optimización de JavaScript: Minimizar y diferir la ejecución de JavaScript que no sea esencial para la carga inicial de la página. Utilizar la carga asíncrona o diferida para scripts no críticos.
Optimización de CSS: Minimizar y optimizar el CSS. Considerar la posibilidad de CSS crítico en línea para la primera visualización y cargar el resto de forma asíncrona.
Optimización de Recursos: Optimizar imágenes y otros recursos para reducir su tamaño y tiempo de carga. Utilizar formatos de imagen modernos y compresión.
Hosting y CDN: Utilizar un hosting de calidad y una red de distribución de contenidos (CDN) para acelerar la entrega de recursos a los usuarios.

Conclusión

Si bien el evento DOMContentLoaded ha perdido parte de su protagonismo frente a métricas más centradas en el usuario como las Core Web Vitals, sigue siendo una herramienta valiosa para diagnosticar y depurar problemas de rendimiento relacionados con la carga inicial de recursos de una página web. Entender cuándo se activa, cómo medirlo y cómo optimizarlo puede ayudarte a mejorar la velocidad de carga percibida por tus usuarios y, en última instancia, su experiencia general en tu sitio web. Recuerda combinar el análisis de DOMContentLoaded con métricas más modernas para obtener una visión completa del rendimiento de tu sitio y centrarte en la experiencia real de tus visitantes.