8 Cara Mempercepat Loading Blog Blogger (Blogspot)

Siapa sih yang suka dengan website yang lambat? Makanya, cari tahu dulu dong cara mempercepat loading blog Blogger berikut ini.

Kecepatan website adalah salah satu faktor penting yang harus dimiliki website sukses. Website yang mudah diakses tidak hanya baik untuk pengunjung saja, tapi juga bagus untuk bot mesin pencari. Faktanya, pagespeed adalah salah satu faktor yang diperhitungkan Google dalam menentukan ranking website.

Jadi jika kamu memiliki sebuah blog, jangan hanya memperhatikan tampilannya saja, buat situs kamu cepat juga!

Lalu bagaimana caranya meningkatkan kecepatan loading blog? Tenang, khusus pengguna Blogger (Blogspot), simak caranya di sini yah!

Cara Meningkatkan Kecepatan Loading Blogspot

Sebelum belajar cara mempercepat loading blog, ada baiknya jika kita memeriksa kecepatan loading blog kita saat ini. Untuk melakukannya, kita bisa memakai tools online gratis seperti Page Speed Insight, GTMetrix, atau Pingdom.

Tidak hanya bisa dipakai untuk mengetahui kecepatan akses blog kita, dengan tools ini kita juga bisa melihat apa saja yang membuat website kita lambat dan bagaimana cara mengatasinya.

Jika kamu menerima hasil yang kurang baik, beberapa cara ini bisa kamu lakukan untuk mempercepat loading blog Blogger kamu.

1. Gunakan template Blogger yang fast-loading

Langkah pertama yang bisa kamu lakukan untuk mempercepat loading blog Blogger adalah dengan memakai template fast loading. Template yang dibuat dengan baik biasanya akan dieksekusi dengan baik pula sehingga blog Blogspot bisa muncul dengan cepat.

Saya sendiri pernah membuktikan hal ini ketika mengganti template dari ThemeXpose dengan template Viomagz milik mas Sugeng. Hanya dengan memakai template tersebut, blog Blogger saya mengalami banyak perbaikan sebagai berikut,

• PageSpeed Score: 78% ► 94%
• YSlow Score: 72% ► 82%
• Fully Loaded Time: 1.4s ► 0.9s
• Total Page Size: 772KB ► 469KB
• Request: 46 ► 25

2. Optimalkan gambar

Jika kamu sudah memeriksa kecepatan website dengan GTMetrix atau Page Speed Insights, mungkin kamu bisa melihat jika salah satu komponen website terbesar yang biasanya membuat loading blog lambat adalah gambar/foto. Semakin besar ukurannya, semakin lama pula waktu yang dibutuhkan untuk menampilkan gambar tersebut.

Untuk mengoptimalkan gambar di blog, kita bisa mulai dengan memakai gambar seperlunya saja. Dan untuk memperkecil ukurannya, kita bisa melakukan beberapa hal berikut ini:

a. Pilih Format Gambar yang Tepat

Format gambar yang biasa dipakai dan kompatibel dengan segala jenis browser adalah JPEG, PNG, dan GIF. Setiap format gambar memiliki kelebihan masing-masing dan akan cocok dipakai pada beberapa jenis gambar tertentu.

Sebagai contoh, format JPEG akan lebih cocok dipakai untuk menyimpan gambar berbentuk foto berisi objek nyata seperti pemandangan atau manusia. Jika kamu menyimpannya dalam format PNG, gambar semacam ini tidak akan terlihat natural dan malah memiliki ukuran yang lebih besar.

Format PNG sendiri lebih cocok dipakai untuk menyimpan gambar geometri atau hasil render vektor yang memiliki sedikit warna (sekitar 256 warna). Sebagai contoh kamu bisa melihat banyak gambar ‘cartoonish’ atau beberapa skrinsut WordPress yang ada di situs ini. Jika kita menyimpan gambar-gambar tersebut dengan format JPEG, gambar tidak akan terlihat tajam dan cenderung blurry. Selain itu ukurannya akan lebih besar jika dibandingkan format PNG.

Terakhir, format GIF umumnya dipakai untuk menyimpan gambar bergerak. Meski begitu, GIF juga cocok untuk menyimpan gambar dengan ukuran kecil yang memiliki sedikit warna seperti logo.

b. Gunakan Ukuran Gambar yang Sesuai dengan Dimensi Blog

Secara logika, gambar dengan dimensi yang besar akan memilki ukuran yang lebih besar pula. Karena itulah, memakai gambar yang sesuai dengan dimensi blog kita akan membuat ukuran gambar lebih optimal tanpa merusak tampilan blog.

Sebagai contoh, jika lebar blog kita hanya 700px, maka memakai ukuran gambar lebih dari itu akan sangat mubazir. Tergantung tema yang kamu pakai, blog biasanya akan memuat gambar dalam ukuran asli meski nantinya ditampilkan sesuai dengan ukuran lebar blog kita.

Nah, untuk mengetahui lebar blog, kita bisa memakai tools Inspect Element yang ada di browser.

c. Kompresi Gambar

Cara lain yang bisa kamu lakukan untuk mengoptimalkan gambar adalah dengan melakukan kompresi. Kompresi gambar sendiri dilakukan dengan menghilangkan meta data pada gambar. Selain itu kompresi juga memakai algoritma khusus agar gambar dapat disimpan dalam ukuran yang lebih kecil tanpa mengurangi kualitasnya.

Untuk mengkompresi gambar, kita bisa memakai beragam tools online gratis berikut ini:

d. Gunakan Script Lazy Load

Lazy Load adalah teknik yang bisa dipakai untuk menunda loading gambar sampai dibutuhkan oleh pengunjung. Dengan kata lain, gambar yang belum terlihat di area layar tidak akan di-load sampai pembaaca scroll ke area tersebut.

Untuk menggunakan lazy load di Blogger, cari dulu menu TEMA ► EDIT HTML, lalu salin kode berikut ini sebelum tag </body> atau &lt;!--</body,

<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>

3. Hati-hati saat memakai gambar untuk header atau background website

Menyambung poin sebelumnya, pemakaian gambar umumnya akan menambah jumlah beban yang harus diload oleh server. Tidak hanya gambar yang ada di artikel saja, tapi juga gambar yang kamu gunakan sebagai header dan gambar yang dijadikan background blog.

Sebagai penganut aliran minimalis, saya sendiri tidak terlalu menyarankan untuk memakai gambar semacam ini. Tapi beda blogger beda pula seleranya. Jika kamu ingin memakai gambar pada header atau background blog, ada beberapa hal yang bisa kamu perhatikan agar blog kamu tetap tampil cantik tanpa mengorbankan loading speed blog kamu.

Pertama, kamu bisa mengoptimalkan gambar terlebih dahulu dengan cara yang sudah saya sebut di atas.

Kedua, Kamu bisa memilih gambar dengan jumlah objek dan warna yang terbatas. Misalnya gambar langit atau dinding memiliki ukuran yang lebih kecil dibanding gambar yang lebih kompleks seperti taman bunga atau tempat rekreasi.

Ketiga, kamu bisa memakai gambar pola seamless yang berukuran lebih kecil namun bisa diatur agar tampil berulang-ulang dengan CSS sperti contoh berikut ini.

body {
  background-image: url("background.png");
  background-repeat: repeat; /*untuk mengulang gambar secara vertikal dan horizontal*/
}

Keempat, jika kamu hanya ingin menampilkan warna gradien, kamu juga bisa menambahkan kode CSS seperti contoh berikut ini.

body {
  background-image: linear-gradient(-90deg, red, yellow);
}

4. Kompresi script JavaScript dan CSS

Selain mengkompresi gambar, kita juga bisa mengkompresi script yang ada di blog Blogger untuk mempercepat loadingnya. Secara umum semua script dalam template Blogger bisa kamu kompresi mulai dari HTML, JavaScript, hingga CSS.

Kompresi script sendiri dilakukan dengan menghapus komentar dan karakter yang tidak penting tanpa mengubah fungsi script tersebut. Dan kamu tidak perlu melakukannya secara manual karena kita bisa memakai bantuan tools online untuk memperkecil ukuran script.

Pada beberapa template premium, Javascript yang digunakan biasanya sudah dikompresi, namun kebanyakan kode CSS-nya belum. Untuk mengkompresi CSS, buka template Blogger dan kopi kode yang berada di antara <b:skin> dan </b:skin>.

Setelah itu kita bisa menyalinnya di CSSminifier.com atau Minifier.org dan mengkompresinya. Jika sudah, salin kode yang sudah diperkecil menggantikan kode CSS sebelumnya.

5. Jangan menggunakan terlalu banyak jenis font

Hampir pada setiap template kita bisa mengatur tampilan font untuk masing-masing elemen blog mulai dari menu navigasi, header, post, sidebar, dsb. Meski menyenangkan bisa mempercantik tampilan blog kita, ada baiknya jika kamu tidak memakai terlalu banyak font, terutama font-font Google. Semakin banyak font Google yang kamu pakai, semakin berat pula loading blog kamu nantinya.

Untuk mempercepat loading blog Blogger, ada baiknya jika kamu hanya memakai dua jenis font saja. Selain itu hindari font stylish seperti kaligrafi yang biasanya berukuran lebih besar dibanding font serif atau sans-serif.

6. Batasi jumlah postingan pada homepage Blogger

Secara default, Blogger akan menampilkan 10 postingan pada beranda blog kita. Namun jika kamu ingin mempercepat loading Blogspot, kamu bisa membatasinya hanya 3-7 saja sesuai selera kamu.

7. Kurangi widget/gadget yang tidak perlu

Dibandingkan mengurangi jumlah postingan di halaman depan blog, saya sendiri lebih merekomendasikan untuk mengurangi jumlah widget/gadget yang tidak penting.

Beberapa widget yang biasanya membuat blog lambat adalah Widget Adsense, Widget Banner Afiliasi, Widget yang menampilkan postingan media sosial kita.

a. Widget Adsense

Yang namanya iklan pasti bikin website makin lemot. Namun jika kamu ingin tetap memasang iklan Adsense di sidebar, mungkin ada beberapa hal yang bisa dipertimbangkan terlebih dahulu.

Pertama, cek penghasilan iklan yang dipasang di sidebar dengan iklan di tempat lainnya. Untuk melakukannya, kamu bisa membuat Ad Unit dan memasangnya hanya di satu tempat saja. Setelah itu bandingkan hasilnya selama sebulan. Jika hasilnya jauh lebih kecil, lebih baik dihapus saja.

Dari pengalaman saya, pendapatan terbesar Adsense biasanya berasal dari iklan yang diletakan di header atau di dalam postingan. Sidebar sendiri menjadi tempat yang lumayan buruk, apalagi jika pengunjung blog kamu banyak yang berasal dari perangkat mobile.

b. Widget Banner Afiliasi

Sebenarnya tidak ada yang salah dengan memasang widget ini. Hanya saja pada banner afiliasi, gambar yang digunakan umumnya mengambil dari situs penyedia afiliasi yang kadang belum dioptimasi.

Jadi jika kamu memasang banner afiliasi, ada baiknya jika kamu mengunduh dan menyimpan gambar banner tersebut di blog kamu sendiri.

c. Widget Media Sosial

Widget media sosial seperti fans page atau widget yang menampilkan postingan terakhir kamu di sosmed adalah widget yang juga harus kamu hindari.

Jika kamu ingin memakainya, lebih baik memakai widget link biasa berupa teks atau logo yang jika diklik akan mengarahkan pengunjung ke akun sosial media kamu.

8. Batasi iklan

Kalau yang ini rasanya tidak perlu dijelaskan panjang-lebar. Semakin banyak iklan yang kamu tampilkan, semakin lambat pula loading blog kamu. Makanya, kalau kamu ingin mempercepat loading blog Blogger, kurangi saja jumlah iklannya jika terlalu banyak.

Meski tidak ada bantuan plugin seperti pada WordPress, ternyata ada banyak cara mempercepat loading blog Blogger yang bisa kamu lakukan dengan mudah kan! jadi rasanya tidak ada alasan nih untuk tidak mencobanya sendiri di blog Blogspot yang kamu punya.

Seperti biasa, jika ada saran atau pertanyaan seputar tutorial ini, jangan segan untuk meninggalkan komentar kamu di bawah ini yah!