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

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

#NotiGoogle #BlogTopSEO #SubirEnGoogle ...

Datos estructurados ¿dónde ubicarlos? Ep8 #AskGoogleWebmasters

Ya está en línea el episodio de esta semana. Para la serie de Pregúntale a los expertos de Google; John Mueller responde dónde ubicar los datos estructurados de JSON. Acompáñame a descubrir cual es la mejor ubicación dentro de la página. ¡Vamos! La pregunta sobre los datos estructurados JSON El usuario de Twitter Virginie Clève ha preguntado: ¿Es posible colocar los datos estructurados JSON al fin ...

internet

IMPEDIR QUE COPIEN TEXTO DE SU PÁGINA EN BLOGGER

Para impedir que otros usuarios copien texto de su página web y la peguen en la de ellos, hay un par de códigos que nos van a servir. Existen dos códigos: (Se les agrega a <body>, es decir, antes de </body> que está al final de la plantilla) 1) PARA IMPEDIR QUE COPIEN SOMBREANDO CON EL MOUSE Y HACIENDO CLIC CON EL BOTÓN DERECHO <script language="Javascript" type="tex ...

propuestas

Qué es AMPHTML

Al navegar por Internet con nuestro móvil, muchas veces nos encontramos con pequeños bloqueos, interrupciones en el dibujado de la página porque se están cargando anuncios, o imágenes... en diversas ocasiones percibimos la navegación como algo poco fluido o inmediato. La iniciativa de código abierto AMP (Accelerated Mobile Pages) viene a crear un nuevo "ecosistema" de programación que pe ...

general medios sociales promocionar tu blog

Cómo poner otros botones para compartir en el blog

Os habréis dado cuenta ya que los iconos para compartir que trae Blogger, son bastante pequeñitos y discretos: Por eso yo los cambié hace ya tiempo por otros que pasan un pelín menos desapercibidos: Tampoco quiero ser "pesada" y poner unos gigantescos, pero esos me parece que se ven lo suficientemente bien como para "recordar" a la gente que pueden compartir mi post en las re ...

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 social

Cómo poner botones para redes sociales al final de tus entradas

Muchos Bloggers prefieren añadir botones para redes sociales al pie de sus entradas para que los usuarios puedan compartir el contenido que ha sido de su agrado. Vamos a aprender a colocar en el pie de entradas botones para compartir en Facebook, Twitter y Google+ nuestras creaciones.¿Qué son los botones para las redes sociales en un Blog?: Los componentes oficiales o no oficiales de las distinta ...

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

recursos blog tutoriales

Tutorial: Boton "pin it" personalizado actualizado

Hola! hola!!! Hoy vengo a enseñarte un tutorial para personalizar tu blog, se trata del código html para poner el boton "pin it" pero personalizado. Si tu ya lo tenias puesto en el blog te habrás dado cuenta que desde hace tiempo ya no funciona, ya no te aparece la imagen que tenias puesta y no te deja pinear las fotos :( y eso se debe a que el javascript dejo de funcionar. Por lo visto ...