Lazy Load hình ảnh và Adsense cho Blogspot (Giúp blogspot tải nhanh hơn) - Blog Hồng - Thủ Thuật Blogspot- Facebook - Marketing

Lazy Load hình ảnh và Adsense cho Blogspot (Giúp blogspot tải nhanh hơn)

Nếu bạn đang dùng Blogspot mà chưa biết đến Lazy Load thì đây là bài viết dành cho bạn. Lazy Load là hình thức load chậm cho hình ảnh và Google Adsense. Khi bạn chưa sử dụng đoạn code này đồng nghĩa khi khách hàng vào website blogspot của bạn tất cả hình ảnh hay quảng cáo từ trên xuống dưới sẽ đồng loạt load lên 1 lần, làm blog của bạn rất lâu để tải hết trang.
Lazy Load hình ảnh và Adsense cho Blogspot (Giúp blogspot tải nhanh hơn)
Lazy Load hình ảnh và Adsense cho Blogspot (Giúp blogspot tải nhanh hơn)
Chính vì vậy khi sử dụng đoạn code lazy load blogspot và Google Adsense dưới đây mình chia sẻ cho các bạn thì blog của bạn sẽ tải dần dần. Khi vào website thì blog sẽ tải trang những gì mà họ nhìn thấy. Và tiếp tục tải nếu khách hàng cuộn xuống bên dưới.

Cuộn trang đến đâu Lazy Load sẽ tải hỉnh ảnh và quảng cáo đến đó cho nên mình mới gọi đây là hình thức tải chậm giúp Blogspot của bạn sẽ tải nhanh hơn trông thấy.

Các bạn lưu ý rằng Lazy Load sẽ làm blogspot của bạn tải nhanh hơn chứ không làm tăng điểm PageSpeed Insights. PageSpeed Insights nhiều khi nó chỉ là một cái gì đó Ảo diệu thôi. Mình nói vậy chắc các bạn hiểu chứ.

Cách thêm Lazy Load hình ảnh và Google Adsense vào Blogspot

#Bước 1 : Chủ đề > Chỉnh sửa HTML > Tìm đến thẻ đóng </body> hoặc /body

#Bước 2 : Thêm đoạn code sau bên trên thẻ vừa tìm được

<script type='text/javascript'>
//<![CDATA[
// AdSense by Bloghong.com
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/arlinablock.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
// Lazy Load bloghong.com
(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://3.bp.blogspot.com/-xtM_7x0_cU4/XIok1BisovI/AAAAAAAAPUc/QGJpBJZ3QBM_Spkd9r3-SMurEUbRI1pOQCLcBGAs/s1600/loadingku.gif",effect:"fadeIn",threshold:"0"})});
//]]>
</script>
#Bước 3 : Lưu mẫu lại và thử tải lại trang chủ để xem thành quả nhé.

Chúc các bạn có sự trả nghiệm blogspot tuyệt vời.

Hãy tham gia cộng đồng Blogspot trên Facebook để cho đi và nhận lại những điều ý nghĩa hơn

Đỗ Mạnh Hồng Designer, Developer

Tôi là Đỗ Mạnh Hồng chắc các bạn làm Blogger biết đến tôi cách đây vài năm trước rồi nhỉ, tôi xây dựng lên Blog Hồng với mong muốn lưu trữ những gì tôi trải nghiệm được mà không nhớ nổi để sau này tìm lại dễ dàng hơn và chia sẽ lại cho ai đó cần đến, những bài viết ở đây có một số tôi Coppy và tự viết.
Tôi mong rằng những bạn đến với Blog Hồng hãy văn minh lịch sự
URL : Copy
| https://www.bloghong.com/2019/09/lazy-load-hinh-anh-va-adsense-cho-blogspot.html

7 nhận xét: