Carga diferida del Javascript (defer loading)

Llamarme rarito, pero soy de los que le gusta tener una nota lo más alta posible en los test de “Page Speed” y me gusta que mis páginas carguen lo más rápido posible. Para intentar conseguir esto una de las recomendaciones es cargar tus ficheros Javascript de manera diferida, después de que el contenido de la página haya sido cargado y mostrado, pero esto no es tan fácil como podría parecer.

Hay varios métodos, y no todos ellos valen para todos los navegadores. Según he leído en el artículo Defer loading of javascript de Patrick Sexton este es el método que recomienda Google:

<script type="text/javascript">
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}
if (window.addEventListener)
  window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
  window.attachEvent("onload", downloadJSAtOnload);
else
  window.onload = downloadJSAtOnload;
</script>

Esta porción de código la debemos de insertar justo antes de la etiqueta </body>, al final de nuestro documento html.

Asegúrate que la ruta al fichero es correcta. En este ejemplo el fichero defer.js debe de estar en el mismo directorio que el fichero HTML.

Parece una práctica fácil de implementar y con buenos resultados, así que ¿por qué no usarla?

Escribe una comentario