Acelera la carga de tu página web: Cómo maximizar el retraso de JavaScript

Durante un tiempo he estado buscando la manera perfecta de retrasar la carga de jаvascript en mis sitios web. Mi objetivo principal era asegurarme de que esto no afectara al First Contentful Paint (FCP) y al Largest Contentful Paint (LCP), ya que esto podría resultar en un deterioro de los Core Web Vitals (y una penalización en la Búsqueda de Google). 

Finalmente encontré una solución que funcionó para mí durante un tiempo. Junto con otros trabajos de optimización, logré alcanzar mi objetivo. Sin embargo, de vez en cuando notaba un aumento en el PageSpeed Insight para algunas páginas y no entendía qué más podía hacer para asegurarme de que Google Analytics {Reduce el contenido jаvascript que no se use} no afectara al rendimiento de mi sitio web.

El retraso en la carga de jаvascript se asegurará de que se cargue solo cuando sea necesario. No solo afectará al First Contentful Paint {FCP} y al Largest Contentful Paint (LCP), sino que también se puede utilizar con otros scripts de manera similar. Antes de implementarlo, es importante realizar pruebas exhaustivas. Es posible que no funcione con algunos efectos basados en jаvascript para imágenes en el sitio web, pero sí funcionará para Google Analytics.

La carga de jаvascript se puede realizar mediante una etiqueta, utilizando el parámetro async o defer. Cada uno de ellos tiene ventajas y desventajas. La decisión final dependerá de la importancia del script y su impacto en el sitio web.

En primer lugar, necesitaremos implementar un retraso (preferiblemente en el pie de página).

<script>
const autoLoadDuration = 5; //en segundos
const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];

const autoLoadTimeout = setTimeout(runScripts, autoLoadDuration * 1000);

eventList.forEach(function(event) {
    window.addEventListener(event, triggerScripts, { passive: true })
});

function triggerScripts() {
    runScripts();
    clearTimeout(autoLoadTimeout);
    eventList.forEach(function(event) {
         window.removeEventListener(event, triggerScripts, { passive: true });
    });
}

function runScripts() {
    document.querySelectorAll("script[delay]").forEach(function(scriptTag) {
        scriptTag.setAttribute("src", scriptTag.getAttribute("delay"));
    });
}
</script>

Este breve guion esperará la interacción del usuario al presionar la tecla, mover el ratón o tocar la pantalla. Esta es la verdadera interacción del usuario, no la máquina que solo está probando el rendimiento. Después de esta interacción, se activarán todos los guiones retrasados. Ahora debemos decidir cuáles son. Por este motivo, cambiamos la parte encargada de cargar nuestro jаvascript de la siguiente manera:

<script delay="tuscript.js" defer></script>

Verás que se ha sustituido "src" por "delay" para invalidar los validadores de HTML. Dado que en HTML no existe un parámetro como "delay" y "src" es obligatorio, el script simplemente no se cargará. Y eso es precisamente lo que buscamos. Ahora nuestro retardador implementado previamente hará su función mágica. Cuando detecte una interacción real por parte del usuario, iniciará el script cambiando la palabra "delay" (que por cierto, puede ser cualquier otra palabra) por "src" para hacerla válida y que vuelva a funcionar. De esta manera, después de cargar nuestra página (cuando PageSpeed genere su resultado), nuestro script se cargará correctamente.

Puedes seguirle la pista al comportamiento del retardador echándole un vistazo al sitio web utilizando las herramientas de desarrollo que vienen integradas en tu navegador (échale un ojo a la pestaña de Red). 

Si tu sitio web utiliza unos cuantos scripts pesados (como el original de Google Analytics, si no usas Minimal Analytics, o incluso anuncios que se envían de esta manera), retrasarlos puede mejorar un montón el rendimiento de tu sitio web (Asegurado), al menos a los ojos de los robots de rendimiento de Google.

La sección anterior sobre el retraso de jаvascript, en pocas palabras, se centra en Delay jаvascript to Boost Web Vitals Score de SpeedVitals. Échale un vistazo a su publicación para adentrarte más en ese tema. Gracias a Dariusz Więckiewicz que dio con esta novedosao método para solucionar los problemas de optimización de nuestro sitio web, que desde mi punto de vista son los script de Google y anuncios.

En resumen, maximizar el retraso de jаvascript en tu página web puede ser un desafío, pero con paciencia y dedicación, es posible lograrlo sin afectar negativamente los indicadores clave de rendimiento. Recuerda revisar regularmente tu página web, optimizar el código y eliminar elementos innecesarios para mantener un rendimiento óptimo. ¡No te rindas y sigue trabajando para ofrecer la mejor experiencia posible a tus usuarios