Uno de los factores más críticos para que nuestra página sea posicionada en los buscadores es el tiempo que tarda la página en estar operativa, sin embargo, lograr que la página cargue rápido es complicado, pero aun más que este operativa rápidamente y es allí cuando los scripts juegan un papel muy importante.
Hoy en día es común ver que las páginas web importan una gran cantidad de Script de terceros, como lo son Chat integrados, Jquery, librerías de terceros como Paypal o Strip, Google Tag, Facebook Pixel, etc. Todos estos Script sin duda son necesario para que nuestro sitio web funcione, sin embargo, tiene el problema que todos estos script impactan directamente el tiempo de carga de la página, pero sobre todo, retrasan el tiempo que una página esta operativa. Por otro lado, estos Script no son necesario al momento de la carga de la página, por lo que podríamos pensar en trazar su carga y es justo de lo que hablaremos en este artículo.
Como todos seguramente sabremos, cuando una página es accedida, el navegador descarga el documento HTML de la página y comienza a interpretarlo de arriba a bajo, de esta forma, los elementos de más arriba son cargados primero, por lo que muchos optan por poner los script más pesado al final del <body>, de esta forma, esperamos que el navegador de preferencia al contenido principal, sin embargo, esto logrará que la página se muestre más rápido, pero seguirá afectando el tiempo hasta que la página este operativa y Google lo sabrá.
<body>
...
<script> ... </script>
<script> ... </script>
</body>Por este motivo, hay quienes utilizan estrategias como un `setTimeout` para retrazar la carga, sin embargo, un retrazo muy largo podría afectar el funcionamiento de la página y uno muy corto podría provocar que se termine cargando junto con el resto del documento si la conexión es lenta, como en el caso de los dispositivos móviles. Entonces, que podríamos hacer para garantizar que los Scripts se carguen exactamente cuando la página este operativa, la respuesta es fácil, una señal indiscutible de la operatividad de una página es el Scroll, en este sentido, si detectamos un evento de Scroll quiere decir que el usuario ya comenzó a utilizar la página y es justo allí cuando podemos iniciar la carga de los Script pesados.
<script type="text/javascript">
window.addEventListener('scroll', () => {
setTimeout(() => {
// LOAD SCRIPTS
var script = document.createElement("script");
script.innerHTML = "SCRIPT URL";
document.body.appendChild(script);
}, 1000), {once: true}
})
</script>El ejemplo anterior puede no resultar gran cosa, pero si observamos con detenimiento, todos los scripts que carguemos en este punto, no afectarán el tiempo de carga de la página, pues el script no será descargado de inmediato, si no que comenzará la descarga en cuando tengamos el primer evento de Scroll. Por otra parte, estamos utilizando el parámetro `once:true` del método `addEventListener`, el cual hace que el evento se ejecute una sola vez y después de eso se elimine automáticamente, lo que garantiza que solo se ejecuta una solo una vez.
Cuando nosotros agregamos un Script al final de body lo que hacemos es retrazar la carga del script hasta que el navegador llegue al final del documento, sin embargo, cuando este llegue al final terminará cargando los scripts, lo que al final impactará en la carga de la página. En esta nueva estrategia, los Scrips no son cargados durante la carga inicial de la página, pues los elementos `<script>` no están en el documento, si no que son agregados dinámicamente al documento HTML en cuando se hace el primer Scroll, y es justo en ese momento en que comenzará la descarga y ejecución de los Scripts, lo que mejorará drásticamente la experiencia del usuario.
Finalmente, tenemos que tener presente que solo podemos cargar de esta forma todos los scripts que no son vitales para el correcto renderizado de la página y que podemos darnos el permiso de cargar de forma perezosa.