√ Cara Mempercepat Loading Blog Blogger - AdityaTekno

Social Items

Cara Mempercepat Pagespeed Blog
Cara Mempercepat Loading Blog di Blogger - Welcome back sahabat AdityaTekno.com. Dikesempatan kali ini saya akan membagikan cara mempercepat loading blog pada blogspot atau blogger

Tutorial ini saya buat karena ada juga yang meminta tips atau trik kepada saya untuk dibuatkan cara mempercepat loading blog. Padahal di blog-blog lain sudah banyak yang membahas atau membagikan tutorial seperti ini. Tapi, ya sudahlah tidak apa-apa, tetap saya buatkan untuk versi yang saya gunakan. Baik, kita lanjut ke topik pembahasan.

Karena kita numpang di server google, jadi tidak banyak yang bisa kita lakukan untuk mempercepat loading blog di blogger. Dan secara otomatis akses kita terbatas untuk melakukan optimasi blog tersebut karena faktor numpang tadi. 

Diluaran sana banyak blog yang membahas tentang cara mempercepat pagespeed blog. Mulai dari menggunakan template yang premium fast load, menambahkan script dns prefetch, menambah script expires header dan masih banyak lagi. Namun, disini saya akan membagikan tips cara mempercepat loading blog seperti yang saya lakukan pada blog ini.

Berikut adalah beberapa tips yang bisa anda terapkan untuk mempercepat loading blog anda.


Cara Mempercepat Loading Blog untuk Blogger atau Blogspot


1. Perkecil Ukuran CSS


Langkah pertama yang bisa anda lakukan untuk mempercepat loading blog adalah dengan memperkecil ukuran css yang anda gunakan pada blog anda. Dengan cara ini, ukuran css yang digunakan pada blog anda akan lebih ringan dan secara tidak langsung dapat mempercepat loading blog pada situs anda. 

Untuk melakukan itu anda tidak perlu mengubah ukurannya secara manual. Karena apa, cara ini akan memakan waktu yang cukup lama. Untuk memperkecil ukuran CSS anda bisa menggunakan tool CSS Minifier dari blog ini.

Tapi, sebelumnya saya ingatkan terlebih dahulu, bahwa anda jika ingin memperkecil ukuran css cukup yang perlu di perkecil saja, jangan semua di perkecil. Soalnya jika tidak cocok akan merubah tampilan blog anda, sehingga malah bisa acak-acakan tampilan blog nya. 

Dan satu lagi saya ingatkan kepada anda, sebelum melakukan langkah ini. Alangkah baiknya di backup dulu template/tema blog anda, karena untuk menghindari hal-hal yang tidak diinginkan. Istilahnya untuk jaga-jaga gitu.

2. Compress Gambar


Langkah kedua yaitu dengan mengkompres ukuran/size gambar, baik itu gambar untuk thumbnail maupun gambar lainnya. Apalagi untuk blog yang banyak sekali menggunakan gambar, salah satu yang bisa anda lakukan untuk meningkatkan kecepatan loading blog adalah dengan mengkompress ukuran gambar sesuai yang di rekomendasikan oleh google.

Sesuai rekomendasi dari Google, gambar yang baik disisipkan pada blog adalah gambar yang berformat PNG. Nah, anda bisa menggunakan format GIF jika untuk grafik sederhana, misal ukuran kurang dari 10x10 pixel. Kemudian jika ingin menggunakan semua gambar yang bergaya fotografi, gunakanlah format JPG jangan menggunakan format BMP atau TIFF.

Jadi, sebelum melakukan upload ke blog, alangkah baiknya melakukan compress terlebih dahulu pada gambar yang akan anda gunakan. Memang ini cukup ribet, tapi hal tersebut dapat membantu mempercepat loading blog dan juga menghemat ruang simpan pada blog anda. 

Dan perlu diingat, jangan terlalu berlebihan dalam mengkompress gambar, karena hal tersebut dapat mengurangi ketajaman gambar sehingga para visitor menjadi kurang nyaman melihat gambar tersebut. Lalu untuk melakukan compress gambar, saya biasanya menggunakan situs kraken.io atau kalian mau mencari situs lain juga tidak masalah.


3. Memasang Javascript Lazy Load


Langkah ketiga yang bisa anda lakukan untuk mempercepat loading blog yaitu mengunakan kode javascript lazy load. Nah, bagi anda yang belum tau apa fungsi Lazy Load? Lazy load berfungsi untuk menunda (delay) terhadap request yang dibutuhkan. 

Kode Javacript Lazy Load ini juga digunakan oleh facebook. Dan untuk memasang javascript lazy load diblogger anda bisa mengikuti langkah-langkahnya seperti berikut ini:

1. Pertama masuk Dashboard Blogger anda.
2. Kemudian Menu Tema >> Edit HTML.
3. Langkah selanjutnya cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dengan menggunakan tombol kombinasi CTRL+F.
4. Copy Paste kode Javascript di bawah ini dan letakkan diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

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


Klik Simpan setelah copas kode javascript diatas.

Cara ini yang satu ini cukup ampun untuk meningkatkan kecepatan loading blog anda.


4. Jangan Terlalu Banyak Memasang Widget


Memasang terlalu banyak widget itu suatu kesalahan besar, karena selain kurang SEO juga dapat mengurangi kecepatan loading blog. Nah, dibeberapa para blogger pemula sengaja memasang banyak widget pada blog mereka dengan alasan akan memudahkan visitor untuk menelusuri konten yang ada di blog tersebut. 

Jadi, widget berfungsi sebagai navigasi untuk pengunjung untuk memperoleh apa yang mereka cari. Betul hal ini bagus juga, apabila memasang widget dengan tujuan untuk mempermudah pengunjung untuk memperoleh apa yang mereka cari. Tetapi, jika terlalu banyak widget dapat membuat blog anda menjadi lebih lambat. 

Oleh karena itu, semakin banyak widget maka request yang dibebankan kepada server pun akan menjadi lebih berat. Sebaiknya gunakan widget secukupnya saja jangan terlalu berlebihan. Kalau menurut saya lebih baik pasang tiga widget saja sudah lebih dari cukup, widget Recent Post, Label, dan Populer Post.


5. Kurangi Jumlah Postingan yang tampil di Halaman Utama


Terlalu banyak menampilkan jumlah postingan yang tampil di halaman utama blog juga menyebabkan turunnya kecepatan loading pada blog anda. Jadi, mulai sekarang kurangi jumlah postingan yang ditampilkan. Kalau rekomendasi dari saya yaitu cukup tampilkan 6-8 postingan saja jangan lebih dari itu.


6. Jangan Menggunaan Gambar untuk Background Blog


Saya pernah melihat di blog-blog pribadi mereka yang menggunakan gambar sebagai background halaman blog mereka, dan sepertinya mereka bertujuan untuk memperindah blog. Tapi, sebenarnya penggunaan gambar sebagai background pada halaman blog anda dapat menyebabkan loading blog lebih lama. Dan secara tidak langsung dapat menurunkan kecepatan loading blog anda.


7. Batasi Jumlah Iklan yang Ditampilkan pada Blog Anda


Langkah terakhir yaitu dengan membatasi jumlah iklan yang tampil pada blog anda. Kadang ada blogger yang secara berlebihan memasang iklan terlalu banyak dalam satu halaman blog, tentu saja hal ini dapat membuat loading blog anda menjadi lebih lambat. 

Baca Juga: Cara Memasang Lazy Load pada Iklan Adsense 

Sebaiknya jangan terlalu banyak menayangkan iklan pada satu halaman, hal tersebut juga dapat mempengaruhi kecepatan loading blog anda. Selain memperlambat loading blog, terlalu banyak iklan dalam satu halaman blog juga dapat mengganggu kenyamanan para pengunjung untuk membaca konten anda dengan baik.

Demikian Cara Mempercepat Loading Blog Blogger. Semoga tutorial yang saya bagikan ini bisa membantu mengatasi masalah pada blog anda yang mengalami turun kecepatan loading blog. Good luck! Sampai jumpa di postingan selanjutnya. Salam AditayaTekno.com.

Cara Mempercepat Loading Blog Blogger

Cara Mempercepat Pagespeed Blog
Cara Mempercepat Loading Blog di Blogger - Welcome back sahabat AdityaTekno.com. Dikesempatan kali ini saya akan membagikan cara mempercepat loading blog pada blogspot atau blogger

Tutorial ini saya buat karena ada juga yang meminta tips atau trik kepada saya untuk dibuatkan cara mempercepat loading blog. Padahal di blog-blog lain sudah banyak yang membahas atau membagikan tutorial seperti ini. Tapi, ya sudahlah tidak apa-apa, tetap saya buatkan untuk versi yang saya gunakan. Baik, kita lanjut ke topik pembahasan.

Karena kita numpang di server google, jadi tidak banyak yang bisa kita lakukan untuk mempercepat loading blog di blogger. Dan secara otomatis akses kita terbatas untuk melakukan optimasi blog tersebut karena faktor numpang tadi. 

Diluaran sana banyak blog yang membahas tentang cara mempercepat pagespeed blog. Mulai dari menggunakan template yang premium fast load, menambahkan script dns prefetch, menambah script expires header dan masih banyak lagi. Namun, disini saya akan membagikan tips cara mempercepat loading blog seperti yang saya lakukan pada blog ini.

Berikut adalah beberapa tips yang bisa anda terapkan untuk mempercepat loading blog anda.


Cara Mempercepat Loading Blog untuk Blogger atau Blogspot


1. Perkecil Ukuran CSS


Langkah pertama yang bisa anda lakukan untuk mempercepat loading blog adalah dengan memperkecil ukuran css yang anda gunakan pada blog anda. Dengan cara ini, ukuran css yang digunakan pada blog anda akan lebih ringan dan secara tidak langsung dapat mempercepat loading blog pada situs anda. 

Untuk melakukan itu anda tidak perlu mengubah ukurannya secara manual. Karena apa, cara ini akan memakan waktu yang cukup lama. Untuk memperkecil ukuran CSS anda bisa menggunakan tool CSS Minifier dari blog ini.

Tapi, sebelumnya saya ingatkan terlebih dahulu, bahwa anda jika ingin memperkecil ukuran css cukup yang perlu di perkecil saja, jangan semua di perkecil. Soalnya jika tidak cocok akan merubah tampilan blog anda, sehingga malah bisa acak-acakan tampilan blog nya. 

Dan satu lagi saya ingatkan kepada anda, sebelum melakukan langkah ini. Alangkah baiknya di backup dulu template/tema blog anda, karena untuk menghindari hal-hal yang tidak diinginkan. Istilahnya untuk jaga-jaga gitu.

2. Compress Gambar


Langkah kedua yaitu dengan mengkompres ukuran/size gambar, baik itu gambar untuk thumbnail maupun gambar lainnya. Apalagi untuk blog yang banyak sekali menggunakan gambar, salah satu yang bisa anda lakukan untuk meningkatkan kecepatan loading blog adalah dengan mengkompress ukuran gambar sesuai yang di rekomendasikan oleh google.

Sesuai rekomendasi dari Google, gambar yang baik disisipkan pada blog adalah gambar yang berformat PNG. Nah, anda bisa menggunakan format GIF jika untuk grafik sederhana, misal ukuran kurang dari 10x10 pixel. Kemudian jika ingin menggunakan semua gambar yang bergaya fotografi, gunakanlah format JPG jangan menggunakan format BMP atau TIFF.

Jadi, sebelum melakukan upload ke blog, alangkah baiknya melakukan compress terlebih dahulu pada gambar yang akan anda gunakan. Memang ini cukup ribet, tapi hal tersebut dapat membantu mempercepat loading blog dan juga menghemat ruang simpan pada blog anda. 

Dan perlu diingat, jangan terlalu berlebihan dalam mengkompress gambar, karena hal tersebut dapat mengurangi ketajaman gambar sehingga para visitor menjadi kurang nyaman melihat gambar tersebut. Lalu untuk melakukan compress gambar, saya biasanya menggunakan situs kraken.io atau kalian mau mencari situs lain juga tidak masalah.


3. Memasang Javascript Lazy Load


Langkah ketiga yang bisa anda lakukan untuk mempercepat loading blog yaitu mengunakan kode javascript lazy load. Nah, bagi anda yang belum tau apa fungsi Lazy Load? Lazy load berfungsi untuk menunda (delay) terhadap request yang dibutuhkan. 

Kode Javacript Lazy Load ini juga digunakan oleh facebook. Dan untuk memasang javascript lazy load diblogger anda bisa mengikuti langkah-langkahnya seperti berikut ini:

1. Pertama masuk Dashboard Blogger anda.
2. Kemudian Menu Tema >> Edit HTML.
3. Langkah selanjutnya cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dengan menggunakan tombol kombinasi CTRL+F.
4. Copy Paste kode Javascript di bawah ini dan letakkan diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

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


Klik Simpan setelah copas kode javascript diatas.

Cara ini yang satu ini cukup ampun untuk meningkatkan kecepatan loading blog anda.


4. Jangan Terlalu Banyak Memasang Widget


Memasang terlalu banyak widget itu suatu kesalahan besar, karena selain kurang SEO juga dapat mengurangi kecepatan loading blog. Nah, dibeberapa para blogger pemula sengaja memasang banyak widget pada blog mereka dengan alasan akan memudahkan visitor untuk menelusuri konten yang ada di blog tersebut. 

Jadi, widget berfungsi sebagai navigasi untuk pengunjung untuk memperoleh apa yang mereka cari. Betul hal ini bagus juga, apabila memasang widget dengan tujuan untuk mempermudah pengunjung untuk memperoleh apa yang mereka cari. Tetapi, jika terlalu banyak widget dapat membuat blog anda menjadi lebih lambat. 

Oleh karena itu, semakin banyak widget maka request yang dibebankan kepada server pun akan menjadi lebih berat. Sebaiknya gunakan widget secukupnya saja jangan terlalu berlebihan. Kalau menurut saya lebih baik pasang tiga widget saja sudah lebih dari cukup, widget Recent Post, Label, dan Populer Post.


5. Kurangi Jumlah Postingan yang tampil di Halaman Utama


Terlalu banyak menampilkan jumlah postingan yang tampil di halaman utama blog juga menyebabkan turunnya kecepatan loading pada blog anda. Jadi, mulai sekarang kurangi jumlah postingan yang ditampilkan. Kalau rekomendasi dari saya yaitu cukup tampilkan 6-8 postingan saja jangan lebih dari itu.


6. Jangan Menggunaan Gambar untuk Background Blog


Saya pernah melihat di blog-blog pribadi mereka yang menggunakan gambar sebagai background halaman blog mereka, dan sepertinya mereka bertujuan untuk memperindah blog. Tapi, sebenarnya penggunaan gambar sebagai background pada halaman blog anda dapat menyebabkan loading blog lebih lama. Dan secara tidak langsung dapat menurunkan kecepatan loading blog anda.


7. Batasi Jumlah Iklan yang Ditampilkan pada Blog Anda


Langkah terakhir yaitu dengan membatasi jumlah iklan yang tampil pada blog anda. Kadang ada blogger yang secara berlebihan memasang iklan terlalu banyak dalam satu halaman blog, tentu saja hal ini dapat membuat loading blog anda menjadi lebih lambat. 

Baca Juga: Cara Memasang Lazy Load pada Iklan Adsense 

Sebaiknya jangan terlalu banyak menayangkan iklan pada satu halaman, hal tersebut juga dapat mempengaruhi kecepatan loading blog anda. Selain memperlambat loading blog, terlalu banyak iklan dalam satu halaman blog juga dapat mengganggu kenyamanan para pengunjung untuk membaca konten anda dengan baik.

Demikian Cara Mempercepat Loading Blog Blogger. Semoga tutorial yang saya bagikan ini bisa membantu mengatasi masalah pada blog anda yang mengalami turun kecepatan loading blog. Good luck! Sampai jumpa di postingan selanjutnya. Salam AditayaTekno.com.

Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo