miércoles, 15 de octubre de 2014

Ascelerar la carga de blogger

Ascelerar la carga de blogger.

ajuda para tu blog rapido

Carga de imagenes con Jquery.

Como tener un blog que cargue rapido. 


Tener un blog que cargue rapido es muy importante para nuestros visitantes y para Googgle mucho mas.
Porque?
1* porque a nadie le gusta esperar mucho tiempo hasta que el sitio esta listo para disfrutar de su contenido. Si sucede eso, los visitantes se retiran y los perdemos.
2* porque de acuerdo a las nuevas directivas de Google se va a dar prioridad en el posicionamiiento a los sitios que carguen rapido. Google observa con mucho empeño esta situacion y quien no lo acepte y optimize el site tendra menos visitas.
Lo que puede resumirse en esta simple ecuacion:

Sitios mas rapidos=mas visitantes.
Sitios lentos=menos visitantes.

Por este motivo, voy enseñar un simple truco para optimizar tu blogger con un script en JQUERY.

Optimizar la carga de imagenes con Lazy load images.


El efecto lo pueden
VER AQUI. Notese que las imagenes se van  pre-cargando solo despues de que  el sitio ya se hubo cargado.
Entonces, si des
eas un blog mas rapido, acorde a las preferencias de los usuarios y de acuerdo a las directivas de Google, deberas poner lo siguiente:

1) Recomendacion:
Haz un backup por 2 cuestiones:
A- Por si arruinas algo podras restablecer el archivo.xml.
B- Porque vas a trabajar con una copia de la copia descargada.

De esta manera consevaras una copia del "antes" y del "despues" para revisar optimizaciones o configuraciones futuras.
Yo siempre trabajo asi y tengo archivadas en mi ordenador cada optimizacion que he realizado a lo largo de la linea de tiempo. De esta manera puedo revertir los pasos cuando asi lo deseara.

2) Recomendacion:
Para evitar cualquier cambio de codigo que sea realizado en la lectura del codigo por parte del explorador he subido un archivo.txt para que descargues y copies y pegues directamente de ahi para asi evitar cualquier fallo. 

DESCARGAR ARCHIVO TXT AQUI 

 3) Recomendacion: haz un testeo de velocidad de carga del site en GTmetrix para luego comprovar que en verdad tu sitio carga mas rapido luego que hayas aplicado este script.

Empezemos con el tutorial para ascelerar la carga de imagenes en tu blog con Lazy load images.


1. Nos dirigimos a Configuracion de Blogger/ Plantilla/  Editar HTML y descargamos un backup.
2. Hacemos una copia de ese backup para trabajar con el en nuestro ordenador.
3. Abrimos esa copia y buscamos la etiqueta </head> y justo antes de ella pegaremos el codigo que haz descargado.
(No copies directamente el codigo desde esta pagina. Ya te explique el porque).
ayuda para tu blog rapido

<script src='http://ajax.googleapis.Com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* Lazy Load - jQuery plugin for lazy loading images
* Copyright (c) 2007- 2012 Mika Tuupola
* Licensed under the MIT license:
* http://www.opensource.Org/licenses/mit-license.php
* Project home:
* http://www.appelsiini.Net/projects/lazyload
*/
(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options){$.extend(settings,options);}
var elements=this;if("scroll"==settings.event){$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});}
this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"));}
if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder);}else{$(self).removeAttr("src");}
self.loaded=false;}else{self.loaded=true;}
$(self).one("appear",function(){if(!this.loaded){$("<img />").bind("load",function(){$(self).hide().attr("src",$(self).attr("original"))
[settings.effect](settings.effectspeed);self.loaded=true;}).attr("src",$(self).attr("original"));};});if("scroll"!=settings.event){$(self).bind(settings.event,function(event){if(!self.loaded){$(self).trigger("appear");}});}});$(settings.container).trigger(settings.event);return this;};$.belowthefold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).height()+$(window).scrollTop();}else{var fold=$(settings.container).offset().top+$(settings.container).height();}
return fold<=$(element).offset().top-settings.threshold;};$.rightoffold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).width()+$(window).scrollLeft();}else{var fold=$(settings.container).offset().left+$(settings.container).width();}
return fold<=$(element).offset().left-settings.threshold;};$.abovethetop=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollTop();}else{var fold=$(settings.container).offset().top;}
return fold>=$(element).offset().top+settings.threshold+$(element).height();};$.leftofbegin=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollLeft();}else{var fold=$(settings.container).offset().left;}
return fold>=$(element).offset().left+settings.threshold+$(element).width();};$.extend($.expr[':'],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"});})(jQuery);
$(document).ready(function($){ $('img').lazyload({ effect:'fadeIn',
placeholder:'http://lh3.googleusercontent.Com/-9nuRfZdo5ro/T5cYmFT_X9I/AAAAAAAACa8/K9aG-gcgsaI/s1/bg_placeholder.png'
});
});
//]]>
</script>

Una vez pegado el codigo. Guardas y te diriges nuevamente a la configuracion de blogger pero esta vez subiras ese archivo.xml al cual le haz agregado el codigo que te facilite. Y listo. El script ya estara funcionando. Lo podras checkear tu mismo ingresando al home de tu site.

Ahora dirigete nuevamente a Gtmetrix y comprueba que en verdad si se ha cargado mas rapido tu site.

Nota:
Cabe destacar que se ha utilizado la versión mas actual de JQUERY por ser la más estable y no causar problemas con imágenes en los gadgets y widgets.

Listo amigos. ¿Que les parecio?
¿Es excelente no? Como siempre, agradecer no cuesta nada y puedes hacerlo dando un Like o compartiendo este tutorial en twitter o facebook.
Estoy seguro que te ha sido de gran utilidad.
Eso es todo. Te invito a comentar y ver las demas entradas.

No hay comentarios.:

Publicar un comentario

En Gadgetts4blogger apreciamos todo lo que puedas comentar, pero no te excedas porque los comentarios seran moderados por un administrador. Comentarios sin sentido y solo para dejar un enlace seran eliminados.