Carga no bloqueante (non-blocking loading) de archivos javascript y css

¿Quieres aumentar la velocidad de carga de tu página web? A continuación se muestra un pequeño código javascript que realiza la carga no bloqueante de archivos CSS y JS.

Pero como siempre, un poco de teoría. ¿Qué es el non-blocking loading o carga no bloqueante?

Cuando una página web es renderizada por el navegador, éste ejecuta el código HTML según lo encuentra, así que si detecta una referencia a un script javascript o a un archivo css, éste detiene el proceso de renderizado para obtener los archivos encontrados. Una vez los archivos son obtenidos del servidor, el navegador continua el renderizado del HTML.

Pero, ¿influye esto en la velocidad de carga de una página web? La respuesta es sí, es más, esto influye en el SEO de la web, ya que los motores de búsqueda favorecen las páginas que tienen una mayor velocidad de carga.

A continuación se muestra el código javascript que realiza la carga de archivos javascript y css de forma no bloqueante. La idea es añadir los archivos bloqueantes mediante javascript una vez descargado el código HTML, lo que reduce el tamaño de la web a descargar por los motores de búsqueda:

  1: <script type="text/javascript">
  2: // Función para carga de archivos javascript
  3: function nonBlockingScript(url) {
  4:     // Crea un elemento "script"
  5:     var js = document.createElement("script");
  6:     // Asigna la url proporcionada al elemento recién creado
  7:     js.src = url;
  8:     // Obtiene el head de la página
  9:     var head = document.getElementsByTagName("head")[0];
 10:     // Incluye el elemento "script" dentro del head
 11:     head.appendChild(js);
 12: }
 13: 
 14: // Función para la carga de archivos css
 15: function nonBlockingStylesheet(url) {
 16:     // Crea un elemento "link"
 17:     var link = document.createElement("link");
 18:     // Asigna la url proporcionada al elemento recién creado
 19:     link.href = url;
 20:     // Asigna el tipo css al "link" y el "rel"
 21:     link.type = "text/css";
 22:     link.rel = "stylesheet";
 23:     // Obtiene el head de la página
 24:     var head = document.getElementsByTagName("head")[0];
 25:     // Incluye el elemento "script" dentro del head
 26:     head.appendChild(link);
 27: }
 28: 
 29: // Ejemplos de uso
 30: nonBlockingScript("/script.js");     // Script /script.js
 31: nonBlockingStylesheet("/style.css"); // Hoja de estilos /style.css
 32: </script>

Como vemos, en pocas líneas hemos creado un completo sistema de carga de archivos javascript y css no bloqueante, lo que nos permitirá aumentar la velocidad de carga de nuestra web de cara a las arañas de los motores de búsqueda y sin perjuicio para los usuarios.

Y vosotros, ¿conocéis otro método para evitar la carga bloqueante de archivos?