Cara Mempercepat Loading Blog/Website Dengan Lazy Load #2

Tulisan IKO - Hallo sahabat internet, pada tutorial kali ini kita akan membahas lagi Cara Mempercepat Loading Blog/Website Dengan Lazy Load. Pada tutorial sebelumnya kita sudah pernah membahas tutorial ini ya, namun pada tutorial kali ini cara yang saya pakai agak berbeda.

Sebelum itu cek terlebih dahulu kecepatan loading blog anda pada situs yang bernama PageSpeed Insights - Google Developers. Berikut link URL-nya.

https://developers.google.com/speed/pagespeed/insights

Ok, mungkin kita langsung saja ke Cara Mempercepat Loading Blog/Website Dengan Lazy Load #2.

1. Buka dashboard blogger anda.
2. Masuk ke pilihan Tema dan pilih Edit HTML.
3. Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;. Agar lebih cepat dalam mencarianya silahkan pencet tombol Shift+F.
4. Pastekan kode dibawah ini diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;.

<script type="text/javascript">
//<![CDATA[
!function(t,e){"object"==typeof exports?module.exports=e(t):"function"==typeof define&&define.amd?define([],e(t)):t.LazyLoad=e(t)}("undefined"!=typeof global?global:this.window||this.global,function(t){"use strict";const e={src:"data-src",srcset:"data-srcset",selector:".lazyload"},r=function(){let t={},e=!1,s=0,o=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],s++);let n=function(s){for(let o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e&&"[object Object]"===Object.prototype.toString.call(s[o])?t[o]=r(!0,t[o],s[o]):t[o]=s[o])};for(;s<o;s++){n(arguments[s])}return t};function s(t,s){this.settings=r(e,s||{}),this.images=t||document.querySelectorAll(this.settings.selector),this.observer=null,this.init()}if(s.prototype={init:function(){if(!t.IntersectionObserver)return void this.loadImages();let e=this;this.observer=new IntersectionObserver(function(t){t.forEach(function(t){if(t.intersectionRatio>0){e.observer.unobserve(t.target);let r=t.target.getAttribute(e.settings.src),s=t.target.getAttribute(e.settings.srcset);"img"===t.target.tagName.toLowerCase()?(r&&(t.target.src=r),s&&(t.target.srcset=s)):t.target.style.backgroundImage="url("+r+")"}})},{root:null,rootMargin:"0px",threshold:[0]}),Array.prototype.forEach.call(this.images,function(t){e.observer.observe(t)})},loadAndDestroy:function(){this.settings&&(this.loadImages(),this.destroy())},loadImages:function(){if(!this.settings)return;let t=this;Array.prototype.forEach.call(this.images,function(e){let r=e.getAttribute(t.settings.src),s=e.getAttribute(t.settings.srcset);"img"===e.tagName.toLowerCase()?(r&&(e.src=r),s&&(e.srcset=s)):e.style.backgroundImage="url("+r+")"})},destroy:function(){this.settings&&(this.observer.disconnect(),this.settings=null)}},t.lazyload=function(t,e){return new s(t,e)},t.jQuery){const e=t.jQuery;e.fn.lazyload=function(t){return(t=t||{}).attribute=t.attribute||"data-src",new s(e.makeArray(this),t),this}}return s}); $('img').addClass('lazyload'); $("img").each(function() { var $this = $(this), src = $this.attr("src"); $this.attr( "data-src", src ); $this.removeAttr("src"); }); $('img').attr('src', "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV0sfAkKlBIyqHmaeLoG_Q7PjHE2iX2ahZDRLmdi2tIHGHC3GRa9SS5f85HWJRNoSzjnTJrgHIO8lXYuTYyS3y7y1K9_efvWaAAUZX-XNkA8QQS6MF36TglvrA3Tnl1CHv2Pwmo6iHjjlO/s1600/Bars-1s-200px.gif"); window.addEventListener("scroll", function(event) { lazyload(); }); $(window).on('load', function () { $('img').each(function () { if (lazyload(this)) { $(this).attr('src', $(this).data('src')).removeAttr('data-src'); } }); });
//]]>
</script>

5. Klik simpan dan lihat perbedaannya di PageSpeed Insights - Google Developers. Linknya ada diatas.

Kecepatan pada sebuah website sangatlah penting karena kecepatan merupakan salah satu teknik SEO On-Page. Jika website anda lambat untuk diakses maka visitor atau pengunjung tidak akan betah dan kemungkinan tidak akan mengakses website anda lagi.

Pemilihan tema yang tepat, mengurangi widget yang tidak perlu, mengkompres gambar, mengurangi jumlah iklan, mengurangi jumlah CSS serta javascript merupakan salah satu faktor yang dapat mempercepat loading website anda. Apabila anda hanya mengandalkan Lazy Load saja maka hasilnya tidak akan sempurna.

Mungkin segitu saja tentang artikel Cara Mempercepat Loading Blog/Website Dengan Lazy Load #2. Apabila artikel kali ini bermanfaat silahkan comment dibawah dan share keteman-teman anda ya. Terima Kasih.....

Share this post