Cara Optimasi Template Blogger Lulus PageSpeed Insight

Cara Optimasi Template Blogger Lulus PageSpeed Insight - Template web, merupakan hal paling vital dari yang namanya blog dan berbagai jenis web di dunia maya ini. Template dari blog selain memperindah tampilan juga berperan penting bagi SEO dikarenakan struktur meta tag dan struktur data dari template itu sendiri yang digunakan google unutk mengenali isi blog kita.

Nah, faktor lain yang menjadi penentu apakah user betah di blog kita atau bukan, salah satunya adalah KECEPATAN LOADING. Cepat dan lambatnya blog, tata letak, dan terkait desain itu sendiri.

Kali ini, saya akan membagikan perubahan apa saja yang saya lakukan untuk optimasi kecepatan loading agar lulus pagespeed insight google. Sebagai catatan, dulu saya menerapkan optimasi ini menggunakan Template EvoMagz versi 5.0 dari Mas Sugeng, dan sekarang saya menerapkannya pada template Fletro Pro 5.2 dari JagoDesain.

Cara Optimasi Template Blogger Lulus PageSpeed Insight

1. Lazy Adsense,
   Yang pertama saya gunakan yaitu Lazy Adsense, script ini akan load kode adsense setelah kita menggulir tampilan. Kode didapat dari blog ArlinaDzgn.
   
   

   <script type='text/javascript'>
   //<![CDATA[
   // Lazy Load AdSense
   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>

   
   Cara pasangnya, Copy Paste kode diatas sebelum </body>.
   
   
2. Lazy Load,
   Yang kedua tentu saja lazy load untuk gambar. Jadi gambar tidak akan dimuat sampai gambar tersebut terlihat.
   
   

   <script type='text/javascript'>
   //<![CDATA[
   // Lazy Load
   (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:"",effect:"fadeIn",threshold:"-50"})});
   //]]>
   </script>

   
   Cara pasangnya sama seperti sebelumnya, Copy Paste kode diatas sebelum </body>.
   
   
3. Optimasi Disqus
   Komentar Disqus bisa dioptimasi menggunakan lazy load ataupun OnClick Event yang bisa dibaca lebih lanjut lewat link berikut;
   Cara optimasi kolom komentar Disqus pada Blogger.
   
   
4. Batasi Widget,
   Banyaknya widget yang terpasang pada blog juga mempengaruhi kecepatan loading. jadi kurangi widget-widget yang tidak perlu.
   
   
5. Kompresi CSS,
   CSS bisa dikompresi menggunakan tool yang ada di page ini, atau juga bisa menggunakan tool pihak ketiga, seperti;
   
   • http://www.csscompressor.com
   • https://www.cssportal.com/css-optimize
   • dll,
   
   
6. Tambahkan Tag Prefetch DNS atau Tag Preconnect,
   

   <link href='//ajax.googleapis.com' rel='dns-prefetch'/>

   Tambahkan kode diatas dengan tempat kita mengambil resource dengan mengganti link yang ditandai,
   Ditaruh dibawah kode meta tag dibawah <head>,
   
   
7. Optimasi Pemuatan Font Eternal,
   Panggil font external dengan menggunakan style @font-face, dengan contoh format sebagai berikut, ganti font-family dan url() dengan font yang dipakai serta pastikan kode tersebut memiliki atribut font-display:swap.
   

   @font-face{
    font-family:'Ubuntu';
    font-style:normal;
    font-display:swap;
    font-weight:400;
    src:local('Ubuntu Regular'),local('Ubuntu-Regular'),url(https://fonts.gstatic.com/s/ubuntu/v14/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
   }

   Ditaruh didalam tag <style>...</style>, dibawah meta tag, atau diatas <b:skin>,
   
   Alternatif lain jika menggunakan Font dari Google Fonts, bisa menambahkan kode berikut saat memanggil Font-nya;
   

   <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">

   
   
8. Nonaktifkan Bundle CSS dan Widget JS bawaan Blogger,
   

   Peringatan:
   jika menonaktifkan kedua fitur ini maka beberapa fitur dan widget blogger seperti; fitur balas komentar, widget form kontak, widget statistik postingan, widget slideshow gambar, widget arsip, widget wikipedia, fitur lightbox (slideshow gambar di postingan), dan Newsreel tidak akan berfungsi.

   
   Untuk menonaktifkan CSS dan JS bawaan Blogger, bisa menambahkan kode yang ditandai ke dalam tag <html ... >, Kode didapat dari Web DTE Project.
   

   <html b:css='false' b:js='false'> ... </html>

   
   Penjelasan Kode:
   

   <b:css>

   Default bernilai true; Memanggil semua deklarasi styling atau CSS dari tag <b:skin> ... </b:skin> dan disisipkan ke output HTML; jika false maka tidak memanggil Bundle CSS tersebut, meliputi authorization.css dan bundle.css.
   

   <b:js>

   Default bernilai true; Menyisipkan sekumpulan kode JavaScript dan me-register-kannya ke bagian akhir dari hasil keluaran HTML-nya; jika false maka tidak disisipkan, JS tersebut antara lain widget.js dan kode JS inline untuk mengatur layout.
   
   

   Tambahan:
   Jika pada Template Blogger sebelumnya telah menerapkan kode perangkap Blogger, maka kode tersebut bisa diganti menggunakan tag HTML seperti biasa.

   
   
9. Menggunakan CSS Variable untuk Styling-nya,
   Cara ini hanya opsional saja, karena blogger sudah menyediakan fitur editor template yang keren, dan karena template yang saya gunakan tidak support Pengeditan Template Secara Langsung, maka mau tidak mau saya merombak semua kode bawaan template ini sehingga mendukung CSS Variable.
   Contoh CSS Variable sebagai berikut:
   

   :root{
     --color:black;
     --border-color:silver;
   }
   button{
     color:var(--color);
     border:1px solid var(--border-color);
   }

   Inti dari CSS Variable adalah kita hanya perlu mendeklarasikan nama style dan value sekali, lalu kita dapat memanggilnya sesuka hati, dan misalkan kita telah bosan dengan value tersebut kita bisa menggantinya dengan mudah tanpa harus mencari kode tersebut satu persatu.
   
   Jika ingin merombak semua kode styling CSS pada template bloggernya, maka disarankan untuk membuat backup terlebih dahulu, dan mengeditnya secara offline menggunakan text editor.
   
   Untuk tutorial yang lebih detail, bisa membaca artikel tentang Penerapan CSS Variables di Blogger.
10. Untuk optimasi lainnya, akan saya lanjutkan lain waktu.

Demikian artikel tentang Cara Optimasi Template Blogger Lulus PageSpeed Insight pada template blogger EvoMagz dan Fletro Pro, semoga bermanfaat.

---

Referensi:
[1] ArlinaDzgn
[2] DTE