Hướng dẫn sử dụng Lazy Load để tăng tốc độ tải trang cho Blogspot mới nhất

1. Lazy load là gì?

Lazy Load chính là việc load dữ liệu khi bạn cần sử dụng đến chúng. Ví dụ như khi nhiều người cùng vào 1 page sẽ không kéo xuống hết đến cuối trang để đọc nội dung thì điều bạn cần làm là load nội dung trước. Việc nên làm đó chính là khi người dùng scroll đến đâu bạn sẽ load dữ liệu đến đó. lazy loading có thể áp dụng cho bất cứ resource nào trên 1 page, thậm chí là cả file JavaScript.

Lazy Load là một khái niệm mà ứng dụng trì hoãn việc tải các đối tượng cho đến thời điểm mà người dùng cần nó. Nói một cách đơn giản là tải theo yêu cầu của người dùng chứ không phải tải đối tượng không cần thiết.

Lợi ích của việc này là giảm thiểu số lượng yêu cầu, giảm thiểu số lượng tài nguyên thừa cần tải cho tới khi người dùng cần đến chúng thực sự. Hơn nữa kỹ thuật này còn để áp dụng cho việc tải các mã JavaScript từ bên ngoài để tránh dừng tải (blocking download). Về bản chất khi tải mã JavaScript trình duyệt sẽ dừng tất cả các hoạt động tải tài nguyên khác và chờ cho tới khi mã này được tải hoàn thành thì các tiến trình khác mới bắt đầu được tải.

Chính vì thế khi phát triển sản phẩm có liên quan đến các hệ thống thứ ba cần cân nhắc sử dụng kỹ thuật tải bất đồng bộ và Lazy Load. Một ứng dụng phổ biến sử dụng kỹ thuật Lazy Load rất hiệu quả là Facebook. Chúng ta biết khi người dùng cuộn trang đến đâu thì dòng thời gian và ảnh mới tiếp tục tải về cho người dùng.

Tương tự như vậy nếu chúng ta nếu chúng ta sử dụng Lazy Load vào trong blogspot của các bạn thì các hình ảnh sẽ ko được load cùng lúc mà chúng sẽ chỉ xuất hiện dần khi chúng ta lăn chuột. 

2. Cách sử dụng:

Copy đoạn code phía dưới rồi dán vào trước thẻ đóng </body>

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var
c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var
d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var
e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else
if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return
false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var
b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img
/>").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return
this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var
d=a(window).height()+a(window).scrollTop()}else{var
d=a(c.container).offset().top+a(c.container).height()}return
d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var
d=a(window).width()+a(window).scrollLeft()}else{var
d=a(c.container).offset().left+a(c.container).width()}return
d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var
d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return
d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var
d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return
d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.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);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDZGoNKuBrnutKfg_4Al7_8iCDu4Nxp4QAzaqXtKrUSiwOmHbaLCTVdKDFLxrIfdxC7cDWUwFM5hrqRLNUFhI6j3utz56ktOmdMCVlxRmlHW7NawckicldkdhKLEu8eFEhnzCu8oCYhl_W/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Sau đó ' Save " để lưu lại.