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

- Trong quá trình làm việc, cũng như là trong quá trình viết bài, khó tránh khỏi sai sót, rất mong các bạn, anh chị em bỏ qua. Đồng thời do trình độ lập trình & kinh nghiệm thực tiễn còn hạn chế nên giao diện và bài viết còn nhiều lỗi ! Em rất mong nhận được ý kiến đóng góp từ mọi người, để bản thân học hỏi thêm được nhiều kinh nghiệm và sẽ cố gắng hoàn thiện trong tương lai. Em xin chân thành cảm ơn !
- Mọi chi tiết xin liên hệ:
• Phone number: 038.689.7757
• Facebook: fb.com/leanhduc.pro.vn
• Email: Admin@leanhduc.pro.vn

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 Lê Anh Đức (leanhduc.pro.vn)
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 Lê Anh Đức (leanhduc.pro.vn)
(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 © Lê Anh Đức

1 nhận xét:


Cùng tham gia bình luận bài viết này nhé!

  1. ai không làm được thì comment link blog/website để mình support nhé :D

    Trả lờiXóa