Mejora el rendimiento de tu web aplazando la ejecución de javascript

El aplazamiento de la ejecución del javascript que utilizas en tus páginas web puede mejorar bastante el rendimiento con el que tus páginas se dibujan en el navegador de tus usuarios.

En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio web por medio de GTMetrix.

GTMetrix es un servicio de análisis rendimiento de la compañía de hosting GT.net. Es capaz de realizar los test más exigentes para analizar la velocidad de carga de todos los recursos de un sitio web, indicando así su velocidad de carga y localizando posibles "cuellos de botella" que afecten a su rendimiento.

Entre las pruebas que realiza para comprobar la velocidad de carga de una web se encuentra la conocida Google Pagespeed y Yahoo YSlow.

Veamos punto por punto, qué mejoras debes implementar en tu web para conseguir un buen rendimiento y, por consiguiente, buenas puntuaciones en Google Pagespeed y Yahoo YSlow.

Mejoremos en definitiva el rendimiento web para conseguir una mejor experiencia de usuario.

Optimiza el rendimiento de tu web paso a paso con GTMetrix: Google Pagespeed y YSlow:

Este artículo es parte de una guía que te ayudará a optimizar al completo el rendimiento neto de tu web, mejorando así su ejecución en cualquier dispositivo (móviles, tabletas, ordenadores) y permitiéndote una mejora en tu posicionamiento en buscadores.

La guía consta de los siguientes capítulos:

• Analiza el rendimiento integral de tu web con GTMetrix.

• Mejora el rendimiento de tu web aplazando la ejecución de javascript

• Mejora el rendimiento de tu web optimizando sus imágenes

• Mejora el rendimiento de tu web optimizando sus hojas de estilo.

• Mejora el rendimiento de tu web utilizando jascript asíncrono

Puedes ejecutar cada entrega por separado, es recomendable seguir el orden planteado para una mejor comprensión.

Comprueba el rendimiento de tu web con GTMetrix

Lo primero es realizar el análisis de rendimiento de GTMetrix para poder visualizar si tenemos algún aviso que nos indique la necesidad de utilizar la ejecución aplazada de Javascript.

Así pues, ejecuta primero esta guía que te explica cómo analizar el rendimiento de tu web con GTMetrix.

Si en el resultado del análisis de tu página te aparece el siguiente aviso: "Defer parsing of Javascript", lo mejor es que ejecutes los siguientes pasos que explico a continuación para mejorar el rendimiento de tu web.

Aplazamiento de la ejecución de Javascript (Defer parsing of Javascript)

El aplazamiento de la ejecución de Javascript conocido como "Defer parsing of Javascript", consiste en la colocación del código javascript que pueda bloquear el dibujado de una página, al final de la misma, permitiendo que ésta se pinte sin esperar a que termine su ejecución.

• Los Javascripts o secuencias de comandos que se utilizan para añadir funcionalidades que requieren cálculo o precálculo de información a una página (carga de botones para redes sociales con contadores, dibujado de sliders o carruseles de imágenes, etc...) pueden producir importantes retardos en el primer dibujado de una página en el navegador de nuestros usuarios.

• Los scripts requieren un tiempo para realizar sus cálculos y toma de datos que posteriormente servirán para mostrar la página. Si además el javascript en cuestión está encapsulado en un archivo .js externo, el navegador tendrá que descargarlo, interpretarlo y después aplicarlo al documento HTML sobre el que debe aplicarse.

Claramente uno de los elementos más lentos en el dibujado de una página es el javascript y por ello su ejecución debe postergarse en lo posible para que ésta pueda comenzar a dibujarse rápido.

¿Cómo puedo aplazar la ejecución del Javascript de una web? 

En primer lugar es necesario realizar un pequeño análisis del código fuente en busca del conocido como "Critical path" o el camino de ejecución crítico que será el que "dibuje" la página en el navegador.

Es necesario que el comienzo del dibujado de una página en el navegador de un usuario sea instantáneo. Por ello, el comienzo de la página debería estar lo más libre posible de ejecuciones de Javascript que sea posible.

Hay que distinguir entre el Javascript que es necesario colocar al principio de la página (después del </head> del HTML) y aquel que no necesitas al comienzo de ésta. Sólo debe utilizarse al comienzo de la página si contiene alguna variable o algún parámetro de utilización o sirve para el dibujado de alguna parte de la página, que hace obligatorio su uso al principio de la misma.

Como norma general, casi cualquier Javascript puede ejecutarse al final de la página, es decir, justo antes del cierre del body (</body>).

La ejecución aplazada de Javascript es un modo de acceso a cualquier script externo almacenado en un archivo .js, que pospone la descarga e interpretación del mismo al momento en que el documento HTML ha sido cargado y mostrado.

Un ejemplo de carga diferida de javascript sería el proporcionado por la página Feedthebot:

<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>

En este caso el archivo .js, al igual que sucede con el modo síncrono, debe ser descargado e interpretado pero la página "no tiene que esperar" a que el javascript se haya ejecutado. Bajo la mayor parte de circunstancias esta manera de ejecutar el código pospone su ejecución al final de la página. 

Este tipo de llamadas a archivos .js externos se debe colocar antes del </body> y es ideal para no sobrecargar el <head> con declaraciones síncronas. Es una buena forma de evitar el bloqueo por la utilización de .js al principio del documento HTML y para optimizar en general el rendimiento de la página. 

Ejemplo práctico de aplazamiento de ejecución de Javascript en una página

Un ejemplo para realizar una carga aplazada de la librería Javascript JQuery y de otras funciones Javascript dependientes de la misma que se cargan una vez ésta se encuentra disponible en la página:

<html>

<head>

</head>

    <body>

        <!-- TODO TU CÓDIGO DEL BODY hasta antes del </BODY> -->

        <script>  <!-- ANTES del </BODY> en diferido -->

var dfLoadStatus = 0;

var dfLoadFiles = [

    ["https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"],

    [

        "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",

        "blabla..."

    ]

]; <!-- CARGA DE LAS LIBRERÍAS JQUERY A UTILIZAR -->

function downloadJSAtOnload() {

    if (!dfLoadFiles.length) return;

    var dfGroup = dfLoadFiles.shift();

    dfLoadStatus = 0;

    for (var i = 0; i < dfGroup.length; i++) {

        dfLoadStatus++;

        var element = document.createElement('script');

        element.src = dfGroup[i];

        element.onload = element.onreadystatechange = function () {

            if (!this.readyState || this.readyState === 'complete') {

                dfLoadStatus--;

                if (dfLoadStatus === 0) {

                    if (dfGroup.length === 1) { //if jquery was loaded, then load other js

                        downloadJSAtOnload();

                    } else { //all is already loaded, perform deffered actions

                        performDeferredActions();

                    }

                }

            }

        };

        document.body.appendChild(element);

    }

}

if (window.addEventListener) {

    window.addEventListener("load", downloadJSAtOnload, false);

} else if (window.attachEvent) {

    window.attachEvent("onload", downloadJSAtOnload);

} else {

    window.onload = downloadJSAtOnload;

}

function performDeferredActions() { <!-- VAS CARGANDO LOS .JS QUE NECESITAS EN TU WEB Y QUE REQUIEREN JQUERY-->

   $.ajax({

        type: "GET", 

        url: "http://CADA_JS.js", 

        dataType: "script", 

        cache: true /* or false if you don't want to cache it*/ 

    }); 

}

        </script>

    </body>

</html>

Como vemos en el ejemplo, justo antes del cierre del </body> colocas esta forma de llamar a tus Javascript dependientes de JQuery, conseguirás que la página se dibuje primero y que los Javascript no bloqueen el dibujado de la misma en el navegador. El resultado ofrecerá una mayor fluidez y sensación de velocidad para tus usuarios.

Igualmente, si tienes otro Javascript que tenga módulos independientes y que no necesite JQuery para dibujarse al inicio, puedes ponerlo a ejecutarse justo antes del cierre del </body> para posponer su ejecución tras el dibujado de la página.

Para usuarios de Blogger, no dudes en seguir la guía de rendimiento para bloggers, te ofrece paso a paso cómo mejorar el rendimiento de este particular sistema de publicación de Blogs de Google.