Cách Thêm Lazy Loading Cho Blogspot - Tăng Tốc Blogspot

Lazy loading là gì ?

Lazy loading chính là việc tải (load) các nội dung trên website khi người dùng cuộn chuột đến phần nội dung đó, chính vì thế lazy loading sẽ giúp tăng tốc website của bạn đáng kể khi văn bản, hình ảnh không đồng lượt tải cùng một lúc. Lazy loading tốt cho SEO đặc biệt là nó không gây cản trở quá trình index website của bạn. 

Trong bài viết này, mình sẽ hướng dẫn các bạn cách thêm lazy loading cho Blogspot giúp trải nghiệm người dùng khi đến thăm website tốt hơn, đặc biệt là chiếm nhiều điểm hơn trên Google PageSpeed Insights nhé.

Thêm Lazy Loading cho Blogspot

Lợi ích của Lazy  Loading

• Giảm thời gian tải trang, đặc biệt là trang có nhiều hình ảnh, từ đó trang web sẽ mang lại trải nghiệm tốt hơn cho người dùng.
• Bảo tồn tài nguyên website, tải trang với lazy loading sẽ giúp bảo toàn tài nguyên máy chủ và máy khách, vì chỉ một số hình ảnh, script và mã khác thực sự chỉ hiển thị khi cần thiết.
• Nó tốt cho SEO vì Google luôn đánh giá cao những trang web có tốc độ tải nhanh.

Hướng dẫn thêm Lazy loading cho Blogspot

1. Đầu tiên hãy copy đoạn script dưới đây.

<script type='text/javascript'>

//<![CDATA[

// Lazy Loaa

(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/AVvXsEjAYHmGNx4iQfKdhMeJqucPSdRJYFrHN5qeBb_G91ZZ3ckdAzBoJinzD_xkc60rh8ho87OgCorfUpbC5J84pm3D796XOQoepJm7tbdpVStPXVr_GwuHdluServqD0l1g_Yy5sowAcWK_q1i/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>

2. Tiếp theo vào trang quản lí blog > Chủ đề > click vào nút mũi tên kế bên nút Tùy chỉnh > Chỉnh sửa HTML.

3. Nhấn tổ hợp phím Crtl + F và tìm thẻ </body> và paste đoạn code vừa copy ở bước 1 phía trước thẻ body. Lưu lại và xong.

Kết thúc bài viết

Với vài bước đơn giản bạn đã có thể thêm Lazy loading cho blogspot rồi, các bạn có thể tham khảo thêm một số cách tăng tốc Blogspot. Cảm ơn bạn đã ghé thăm website.