Tăng Tốc Độ Blog/Website Với Lazy Load Hình Ảnh Và Quảng Cáo Adsense

GIỚI THIỆU

Tốc độ tải trang là một trong những yếu tố có ảnh hưởng trực tiếp đến kết quả SEO của bạn. Bạn khó có thể đạt được mục tiêu từ khóa nếu như tốc độ load trang quá chậm, mất nhiều thời gian của người dùng. Vậy làm sao để có thể cải thiện được tình trạng này một cách nhanh chóng và hiệu quả nhất? Sau đây, mình xin đưa ra 1 cách khắc phục hiệu quả vấn đề đó =)

Bạn đã từng nghe nói đến lazy load chưa ? Nếu chưa thì bài viết này chính là dành cho bạn! Lazy load là một hình thức load chậm tất cả các hình ảnh và quảng cáo adsense. Khi bạn không sử dụng lazy load thì đồng nghĩa mỗi lần tải trang tất cả các hình ảnh và quảng cáo sẽ đồng thời hiển thị (load 1 lần). Chính vì vậy, mà đối với những blog hay website nhiều hình ảnh và quảng cáo sẽ mất rất nhiều thời gian tải trang (gây khó chịu cho người dùng)

Điều này sẽ chấm dứt ngay khi bạn sử dụng lazy load. Hình ảnh và quảng cáo sẽ được load một cách từ từ (tiếp tục tải khi kéo xuống dưới). Cuộn trang đến đâu lazy load sẽ tải hình ảnh và quảng cáo đến đó (một hình thức tải chậm nhưng lại tăng tốc độ web lên rõ rệt)

Chú ý: Lazy Load sẽ làm blog/website của bạn tải nhanh hơn chứ không làm tăng điểm PageSpeed Insights

HƯỚNG DẪN

BƯỚC 1:

Truy cập phần chỉnh sửa HTML của blog/website

BƯỚC 2:

Thêm đoạn JavaScrip bên dưới vào ngay trước thẻ </body>

  <!-- Bắt đầu lazyload -->
 <script type='text/javascript'>
//<![CDATA[
// AdSense by Ngô Hoàng Anh Tuấn (ngohoanganhtuan.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 by Ngô Hoàng Anh Tuấn (ngohoanganhtuan.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://loading.io/spinners/balls/index.circle-slack-loading-icon.svg",effect:"fadeIn",threshold:"0"})});
//]]>
</script>
 <!-- Kết thúc lazyload -->
  

Các bạn có thay link SVG loading bằng link SVG/GIF khác tùy ý

BƯỚC 3:

Lưu lại và cảm nhận !

LỜI KẾT

Trên đây là toàn bộ code & hướng dẫn sử dụng lazy load hình ảnh/quảng cáo adsense (tăng tốc độ web). Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới (hoặc tại đây). Chúc các bạn một ngày học tập và làm việc thật hiệu quả !!!

Copyright © Ngô Hoàng Anh Tuấn