8 Cara Mempercepat Loading Blog Blogger atau Blogspot – Pusat Pengetahuan

8 Cara Mempercepat Loading Blog Blogger atau Blogspot

Diposting pada

cara mempercepat loading blog blogger – Pengunjung mana sih yang suka dengan website yang super lambat? Makanya, sebelum kamu ngeblog alangkah baiknya cari tahu dulu dong ilmunya mengenai cara mempercepat loading blog Blogger berikut ini.

Kecepatan website merupakan salah satu faktor penting yang harus dimiliki website sukses agar memiliki banyak pengunjung. Website yang profesional ialah website yang mudah diakses, engga cuma terlihat baik untuk pengunjung saja, tapi juga bagus untuk bot mesin pencari agar mudah di index dan dikenali oleh Google. Faktanya, pagespeed merupakan salah satu faktor yang diperhitungkan oleh Google dalam menentukan ranking website dan otoritas website sehingga website cepat di index oleh google.

Jadi untuk kamu yang memiliki sebuah blog, jangan hanya memperhatikan tampilan yang menarik saja, buatlah situs kamu cepat untuk diakses juga!

Terus bagaimana sih cara mempercepat kecepatan loading blog blogger? Tenang gaes wkwk, khusus pengguna Blogger (Blogspot), simak caranya di artikel sini yah sob!

Cara Mempercepat Loading Blog Blogger

Cara Mempercepat Loading Blogger atau Blogspot

Sebelum kita belajar cara mempercepat loading blog blogger, alangkah baiknya kita memeriksa terlebih dahulu kecepatan loading blog kita saat ini. Untuk memeriksa kecepatan website, kita bisa menggunakan sebuah tools online gratis yang sudah disediakan seperti Page Speed Insight, GTMetrix, atau Pingdom.

Tidak hanya mengetahui kecepatan akses blog yang kita miliki lhoo, dengan tools ini kita juga bisa mengetahui penyebab yang membuat website kita lambat dan bagaimana cara mengatasinya permasalahan tersebut.

Jika kamu mendapatkan hasil yang kurang baik atau hasilnya merah, kamu bisa mencoba cara ini yang bisa kamu lakukan untuk cara mempercepat loading blog Blogger kamu.

1. Gunakan template Blogger yang mendukung fast-loading

Langkah pertama yang bisa kamu lakukan untuk mempercepat loading blog Blogger kamu yaitu gunakan template yang support fast loading. Template yang dibuat dengan baik biasanya akan dieksekusi dengan baik pula sehingga blog blogger atau blogspot kamu bisa mempercepat loading blog blogger kamu.

Sesuai pengalaman bisablog.com sendiri pernah membuktikan hal ini ketika mengganti template dari ThemeXpose dengan template Viomagz milik mas Sugeng. Hanya dengan menggunakan template viomagz tersebut, blog Blogger dia 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

Kalau misalkan kamu sudah memeriksa kecepatan website tools diatas (GTMetrix atau Page Speed Insights) mungkin kamu bisa melihat hasil yang sudah di cek di tools tersebut bahwa jika salah satu komponen website terbesar yang biasanya membuat loading blog lambat itu adalah gambar/foto. Semakin besar ukurannya maka semakin lama pula waktu yang dibutuhkan untuk menampilkan gambar tersebut.

Untuk mengoptimalkan gambar di blog, kita juga harus menggunakan gambar seperlunya saja. Dan untuk memperkecil atau kompress ukuran gambar, kita menggunakan beberapa cara berikut ini:

a. Pilih Format Gambar yang Tepat

Format gambar yang biasa digunakan oleh banyak blogger dan sangat kompatibel dengan segala jenis browser yaitu gambar yang memiliki format JPEG, PNG, dan GIF. Lalu setiap format gambar memiliki kelebihan serta kekurangan masing-masing format dan akan terlihat cocok dipakai pada beberapa jenis gambar tertentu.

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

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

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

b. Gunakan Ukuran Gambar yang Sesuai dengan Dimensi Blog

Secara logika, gambar yang berdimensi besar pastinya memilki ukuran yang lebih besar pula. Karena itulah, gunakanlah gambar yang sesuai dengan dimensi blog kita akan membuat ukuran gambar lebih optimal dan tidak blur tanpa merusak tampilan blog.

Kita ambil contoh kasus, jika lebar blog kita hanya memiliki batas gambar 700px, maka jika kita memakai ukuran gambar lebih dari itu akan sangat mubazir dan mungkin juga bisa merusak tampilan blog kita. Kembali lagi dengan tema yang kamu gunakan, biasanya blog akan memuat gambar dalam ukuran asli meski nantinya ditampilkan sesuai dengan ukuran lebar blog kita.

Nah, untuk mengetahui batas lebar blog kita, kita bisa menggunakan tools atau fitur pada web browser yaitu Inspect Element.

c. Kompresi Gambar

Cara mempercepat loading blog blogger yang bisa kamu lakukan untuk mengoptimalkan gambar adalah dengan melakukan kompresi gambar. Fungsi kompresi gambar sendiri dilakukan dengan menghilangkan meta data pada gambar tersebut. Selain itu kompresi juga menggunakan sebuah algoritma khusus agar gambar yang kamu miliki dapat disimpan dalam ukuran yang lebih kecil dengan gambar aslinya tanpa mengurangi kualitasnya.

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

d. Gunakan Script Lazy Load

Cara mempercepat loading blog blogger selanjutnya yaitu dengan tekik Lazy Load. Lazy Load adalah teknik yang bisa dipakai untuk menunda loading gambar sampai gambar tersebut memang dibutuhkan oleh pengunjung. Dengan kata lain, gambar yang belum terlihat di area layar pembaca, maka gambar tersebut tidak akan di-load sampai pembaca scroll ke area tersebut.

Untuk menggunakan lazy load di Blog Blogger, Kamu perlu setting ke TEMA ► EDIT HTML, lalu salin semua 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 (memberatkan website blog kamu) yang harus diload oleh server. Tidak hanya gambar yang kamu terapkan di artikel saja, tetapi gambar yang kamu gunakan sebagai header dan gambar yang kamu dijadikan background blog itu sebenarnya menambah beban yang perlu diload oleh server.

Sebagai penganut aliran minimalis hehe, saya pribadi tidak terlalu menyarankan kamu untuk menggunakan gambar semacam ini. Tapi beda orang beda selera pastinya. Tapi Jika kamu ingin menggunakan gambar pada header atau background blog, saya akan memberikan beberapa tips yang bisa kamu perhatikan agar blog kamu akan tetap tampil cantik tanpa mengorbankan loading speed blog kamu.

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

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

Ketiga, kamu bisa memakai gambar dengan pola seamless yang berukuran lebih kecil namun bisa diatur agar tampil berulang-ulang dengan menggunakan kode 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 dengan pola gradien, maka kamu juga bisa menambahkan kode CSS seperti contoh berikut ini.

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

4. Kompresi script JavaScript dan CSS

Cara mempercepat loading blog blogger kali ini yaitu kompresi script javascript dan css. Ternyata selain mengkompresi gambar, kita juga bisa melakukan kompresi script yang ada di blog Blogger kita untuk mempercepat loading blog blogger kita. Secara umum, semua script dalam template Blogger kamu bisa kamu kompresi mulai dari kode HTML, kode JavaScript, hingga kode CSS.

Cara kerja Kompresi script sendiri dilakukan dengan cara menghapus semua komentar dan karakter yang dianggap tidak penting tanpa mengubah fungsi script tersebut. Dan kamu juga tidak perlu melakukannya dengan mengecek satu per satu kode secara manual karena kita bisa memakai bantuan tools online yang tentunya gratis untuk memperkecil ukuran script.

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

Setelah itu kita bisa menyalinnya di website CSSminifier.com atau Minifier.org dan mengkompresi kode CSS dari template website kita. Jika sudah terkompresi, selanjutnya ialah salin kode yang sudah diperkecil menggantikan kode CSS sebelumnya.

5. Jangan menggunakan terlalu banyak jenis font

Cara mempercepat loading blog blogger selanjutnya yaitu jangan menggunakan terlalu banyak jenis font. Karena hampir setiap template yang kita temui bisa mengatur tampilan atau merubah font untuk masing-masing elemen blog contohnya mulai dari menu navigasi, header, post, sidebar, dan sebagainya. Meski menyenangkan karena bisa mempercantik tampilan blog kita, tetapi ada baiknya jika kamu tidak memakai terlalu banyak font, terutama pada font-font Google. Semakin banyak font Google yang kamu pakai, semakin berat loading blog kamu nantinya dan pastinya menambah beban load server.

Untuk cara mempercepat loading blog Blogger, kalau saya pribadi menyarankan kamu hanya memakai dua jenis font saja. Selain itu hindari font yang berjenis stylish seperti kaligrafi yang biasanya berukuran lebih besar dibandingkan font berjenis serif atau sans-serif.

6. Batasi jumlah postingan pada homepage Blogger

Secara default atau bawaan, Blogger biasanya menampilkan hanya 10 postingan saja pada beranda blog kita. Namun cara mempercepat loading blog blogger, kamu bisa membatasinya hanya 3-7 postingan saja sesuai selera kamu dan menyesuaikan dengan template yang kamu gunakan.

7. Kurangi widget/gadget yang tidak perlu

Cara mempercepat loading blog blogger selanjutnya yaitu kurangi widger atau gadget yang tidak diperlukan. Ternyata dibandingkan dengan mengurangi jumlah postingan di halaman depan blog, saya pribadi sih lebih merekomendasikan untuk mengurangi jumlah widget/gadget yang tidak penting.

Beberapa widget yang biasanya (menurut pengalaman) membuat blog lambat anara lain seperti Widget Adsense, Widget Banner Afiliasi, dan Widget yang menampilkan postingan media sosial kita.

a. Widget Adsense

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

Pertama, cek dahulu penghasilan iklan yang dipasang di sidebar pada website kamu dengan iklan di tempat lainnya. Untuk melakukan langkah tersebut, kamu bisa membuat Ad Unit dan memasang iklan tersebut hanya di satu tempat saja. Setelah itu kamu bandingkan hasilnya selama sebulan. Jika hasilnya jauh lebih kecil, maka lebih baik hapus.

Dari pengalaman saya pribadi sih, pendapatan terbesar Adsense itu biasanya berasal dari iklan yang diletakan di bagian header atau di dalam postingan. Justru sidebar sendiri menjadi tempat yang lumayan buruk, terlebih lagi jika pengunjung blog kamu banyak yang berasal dari perangkat mobile.

b. Widget Banner Afiliasi

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

Jadi saran saya, jika kamu ingin memasang banner afiliasi, ada baiknya jika kamu mengunduh terlebih dahulu banner afiliasi tersebut dan menyimpan gambar banner di blog kamu sendiri.

c. Widget Media Sosial

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

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

8. Batasi iklan

Cara mempercepat loading blog blogger terakhir yaitu batasi iklan. Kalau yang ini rasanya tidak perlu dijelaskan panjang-lebar lagi. Karena semakin banyak iklan yang kamu tampilkan pad web blog kamu, maka semakin lambat pula loading blog kamu. Makanya, kalau memang kamu ingin mempercepat loading blog Blogger, kurangi jumlah iklan jika terlalu banyak.


Meskipun tidak ada bantuan plugin seperti pada CMS WordPress, ternyata blogspot pun ada banyak cara mempercepat loading blog Blogger yang bisa kamu lakukan dengan mudah kan! jadi rasanya tidak ada alasan sih untuk tidak kamu coba sendiri di blog Blogspot yang kamu punya.

Mungkin cukup sekian artikel Cara mempercepat loading blog blogger ini. Jika ingin bertanya silahkan tanyakan dikolom komentar. Insya Allah akan saya jawab pertanyaan kalian.

Thanks to bisablog.com untuk referensi artikel ini.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *