Cara Mempercepat Loading Template Blogger

Meningkatkan Performa Kecepatan Blog - Cara efektif optimasi pagespeed tamplate blogger yang berat agar menjadi ringan dan cepat (fast loading).

Lihat Template Blogger Keren.

Google memiliki banyak algoritma dengan tugasnya masing-masing. Pagespeed, salah satu algoritma penentu ranking hasil pencarian Google yang memperhatikan pada performa kecepatan website.

Algoritma ini sudah aktif sejak April 2010, saat itu algortma pagespeed fokus pada performa website untuk perangkat desktop. Namun pada awal 2018, google melakukan pembaharuan pada algoritma pagespeed yang sebelumnya fokus para perangkat desktop, kini menjadi faktor penentu pencarian mobile.

Tips Meningkatkan Pagespeed Blogger

Semakin baik kecepatan loading sebuah website, maka kualitas situs tersebut juga semakin baik. Bukan cuma SEO, pengalaman pengguna (UX) saat mengakses blog Anda juga baik.

Baca: Ciri Template Blog Yang Baik

Jika template yang dipakai memiliki kecepatan loading yang lambat dan berat, jangan terburu buru memutuskan untuk ganti template, mengganti template blogger bisa saja berdampak buruk pada blog dan Anda. Coba beberapa cara berikut ini untuk mempercepat loading template blogger:

Kompres Kode Dan Media

Cara pertama adalah menyingkat penggunaan kode, Anda bisa mengkompres semua kode CSS dan JavaScript template agar ukuran per halaman sedikit kecil. Jika perlu, Anda juga bisa menghapus semua tab space pada HTML. Selain source code, Anda juga harus mengkompres setiap media gambar yang dipakai.

Minimalkan Design Dan Fitur Template

Dengan meminimalkan tampilan dan fitur, bukan berarti desain template menjadi jelek/buruk.

Beberapa developer template sering menyediakan fitur keren yang (mungkin) menggunakan JavaScript eksternal. Bagus memang. Tapi, fitur tersebut biasanya dikhususkan untuk blog dengan topik tertentu.

Jadi, Anda harus pintar menggunakan fitur template, copot / hapus fitur yang jarang dipakai, apalagi tidak pernah digunakan.

Memasang Lazyload

Terakhir, untuk mendapatkan skor kecepatan loading blog yang maksimal, Anda perlu memasukan beberapa kode dan JavaScript ke dalam template blogger.

Cara Memasang Lazyload Untuk Gambar Blogger

Sebelum memasang lazyload gambar blogger, pastikan template yang Anda pakai sudah terpasang jQuery Library.

1. Pertama, masuk Editor template blogger,
2. Cari tag </head>, tidak ada? cari &lt;!--</head>--&gt;&lt;/head&gt;, maih tidak ada? tanyakan lewat komentar,
3. Selanjutnya, copy kode dibawah ini, paste diatasnya.
4. Simpan template.

<script>
//<![CDATA[
(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://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})
//]]>
</script>

Memasang Lazyload Google AdSense Dan Eksternal Script Lain

Caranya sama seperti memasang lazyload untuk gambar, hanya saja, tempat meletakan kode ini ada diatas tah </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script>
//<![CDATA[
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://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
    var a = document.getElementsByTagName("script")[0];
    a.parentNode.insertBefore(e, a)
  }(), lazyadsense = !0)
}, !0);
//]]>
</script>

Script diatas juga bisa Anda pakai untuk mendefer JavaScript eksternal lain.

Semoga artikel ini bisa membantu mempercepat loading blog Anda.