Diarios de la nube Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Mejora el rendimiento de tu web con GTMetrix: Defer Parsing of Javascript



En Diarios de la nube vamos a ir ayudándote a resolver cada respuesta que GTMetrix pueda devolverte al analizar tu web.
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.

Comprueba el rendimiento de tu 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 dont 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.

Fuente: este post proviene de Diarios de la nube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

SEO con imágenes

Las imágenes que utilizas en tu Blog, en tu web, no son sólo un reclamo o un añadido decorativo para tus contenido. Pueden servir a los buscadores web para comprender mejor la información que proporci ...

Etiquetas: rendimiento

Recomendamos

Relacionado

rendimiento

Mejora el rendimiento de tu web utilizando jascript asíncrono

El rendimiento es algo fundamental para la mejora de la experiencia de usuario y, junto a la calidad de los contenidos que se ofrecen en una web, un gran impulsor del posicionamiento en buscadores. 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 l ...

rendimiento

Mejora el rendimiento de tu web optimizando sus imágenes

Optimizar las imágenes, en términos de rendimiento web consiste en hacer que, sin perder su calidad, ocupen menos espacio en KB para que su descarga desde el servidor al navegador del cliente sea lo más rápida posible. Analizaremos varias formas de optimización de imágenes. En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio we ...

rendimiento

Mejora el rendimiento de tu web optimizando sus hojas de estilo css

Optimizar las hojas de estilo mejora considerablemente el rendimiento del dibujado de una página web. Las hojas de estilo de tu sitio web o blog son las encargadas de darle presentación a los componentes que sirven para formar tu página web. El cuidado y optimización de las mismas suele ser pasado por alto con frecuencia, normalmente nos basta con que "funcione la presentación" pero no n ...

general rendimiento

Cómo localizar problemas de rendimiento en tu web

Muchas veces tenemos problemas de rendimiento en nuestras web que son de difícil detección. En ocasiones las imágenes, otras veces algún script o componente que hemos instalado y ralentiza su dibujado en los navegadores de nuestros usuarios... Problemas que son de difícil detección si no se poseen suficientes conocimientos técnicos. Te propongo una manera sencilla de detectar qué puede estar afect ...

rendimiento

Analiza el rendimiento integral de tu web con GT METRIX

El rendimiento de una web es fundamental para mantener una buena experiencia de usuario. Un sitio web lento, que expone sus contenidos con "bloqueos", "parones" o lentitud, genera un enorme número de abandono de visitas por parte de sus usuarios. Un rendimiento malo incrementa notablemente el porcentaje de rebote, dado que los usuarios no pueden interactuar con el sitio web deb ...

general propuestas

El servicio de Google para realizar el aviso de uso de cookies en tu web: Cookiechoices.

Al navegar por múltiples sitios en Internet todos nos hemos encontrado con algún tipo de aviso o alerta que alude al "uso de cookies" en el sitio por el cual estamos navegando. Este mensaje es fruto de la legislación europea publicada en su directiva 2009/136/CE referente a los derechos de los usuarios y la necesidad de que estos sean informados cuando un sitio web haga uso de las mismas ...

Herramientas SEO y posicionamiento Uncategorized ...

Importante! mejora la velocidad de carga de tu blog

Importante! mejora la velocidad de carga de tu blog La velocidad de carga es muy importante en las webs y en los blogs, la velocidad es una característica que debemos intentar mejorar lo máximo que podamos para mejorar la calidad de nuestro blog. La velocidad de carga afecta directamente a muchos aspectos que repercuten en el éxito o fracaso de un blog como son los siguientes: Abandono de página, ...

Google Posicionamiento Web medir tiempo de carga web ...

Problemas de velocidad de carga web

Bienvenid@ a un nuevo post de Coach2Coach. ¿Problemas de velocidad de carga web? Quizá la solución es más tonta de lo que crees. Si eres consciente de que tienes un problema de velocidad de carga web, quiere decir que, seguramente también sabes el impacto que la misma tiene sobre la usabilidad y por tanto de tu posicionamiento. Los escenarios en que se pueden presentar problemas de velocidad de c ...

general social

Cómo insertar una publicación de Google+ en tu web

Una publicación e Google+ no es simplemente un mensaje que se comparte en una red social para que lo lean nuestros seguidores. Muchos creadores de contenidos web han descubierto la ventaja en materia de posicionamiento que supone utilizar esta red social. Al encontrarse plenamente integrada con el buscador, ambos forman una sinergia de la que ninguna otra red social del mundo dispone. Los "po ...

general desarrollo web html5 ...

Creacion de Juego con HTML5 y JavaScript

En esta nueva serie de tutoriales y videos, veremos los aspectos generales para la creacion de un game con HTML5, JavaScript y jQuery. Bienvenidos a otro tutorial de HTML5!Hoy iniciaremos la creación de un simple videojuego (bastante simple :)), utilizando apenas HTML5 y Javascript. hablaremos de algunos aspectos basicos de programacion con JavaScript, dando por hecho que ya tenés un poco de noció ...