7 Tips Mempercepat Loading Blogspot di PageSpeed Insight dan GTMetrix

Ada banyak sekali tips mempercepat loading blogspot yang bisa meningkatkan score Google Page Speed Insight . Di sini admin akan memberikan beberapa cara meningkatkan kecepatan blog kamu dan mendapat score good pada Page Speed Insight.

Blog atau Web yang cepat adalah salah satu cara meningkatkan pengunjung website agar selalu nyaman jika mengunjungi blog Anda. Bayangkan jika Blog Anda memiliki kecepatan loading yang cukup lama misal lebih dari 10 detik maka pengunjung akan segera meninggalkan artikel blog Anda karena terlalu memakan banyak waktu untuk meload suatu halaman.

Untuk mengecek score kecepatan pada blog bisa menggunakan fitur pada situs gtmetrix.com dan situs dari google yaitu google pagespeed insight. Memang kecepatan loading sangat penting dalam sebuah blog website namun yang paling penting sebenarnya adalah kontennya , karena konten adalah raja .

Jika kecepatan blog agak kurang cepat tetapi memiliki konten yang bagus maka pengunjung dengan senang hati mengabaikan kecepatan blog website karena konten yang disajikan lebih berkualitas.

Tapi dengan memiliki konten yang berkualitas sekaligus mempunyai kecepatan blog website yang cepat maka akan memiliki 2 kelebihan dan menyebabkan pengunjung betah berkunjung di website Anda.

Hapus Render Blocking CSS dan JavaScript

Sebelum browser menampilkan halaman blog maka terlebih dahulu script yang ada dalam blog tersebut akan diuraikan terlebih dahulu baru kemudian ditampilkan.

Dalam proses penguraian atau parse tersebut jika ditemukan script yang dipanggil di luar blog atau external source (sumber dari luar) maka proses penguraian atau parse akan dihentikan untuk mendownload script yang berada di external atau diluar web.

Proses inilah yang sangat mempengaruhi kecepatan blog ketika sedang diakses karena harus ada proses mendownload file dari luar terlebih dahulu.

Contoh file dari luar yang biasa digunakan pada template blogger pada umumnya adalah memanggil library javascript yaitu JQuery pada situs resminya.

Bagaimana cara menghapus render blocking element?

Jika website dimuat atau diuraikan bersamaan dengan element / konten maka masalah ini akan terselesaikan . Secara teknis metode ini disebut juga Asynchronus Loading (Async).

untuk menerapkanya Anda cukup menambahkan async pada script javascript.

contoh :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>

tambahkan async pada script tersebut.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' async/>

Atau pakai cara kedua yaitu jangan memanggil external source atau sumber dari luar yaitu dengan menaruh kode external kedalam web atau blog kalian dengan menambahkan kode <script>..</script> dan masukan semua kode pada script .

Contoh :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>

buka src http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js lalu copykan semua kode yang berada dalam halaman tersebut.

7 Tips Mempercepat Loading Blogspot di PageSpeed Insight dan GTMetrix

lalu pastekan semua kode tersebut ke dalam <script>


<script type="text/javascript">
/* Isi File JavaScript di Sini */
</script>

Untuk kode CSS hampir sama seperti javascript. Buka link dari luar external source contoh
lalu copy semua kode pada link tersebut.
cari </style> dan pastekan diatasnya.


<style>
/* Isi File CSS di Sini */
</style>

Menghapus JavaScript , CSS dan Widget Bawaan Blogger

Pada tema bawaan pastinya akan terdapat kode kode bawaan dari blogger yang dapat mengurangi kecepatan loading blog Anda.
Untuk menghilangkannya ikuti cara di bawah ini.
Buka Blogger > Klik Tema > Klik Edit Html > ketik Ctrl + F lalu

1. cari kode berikut.

<head>

timpa ganti kode dengan

&lt;head&gt;

2. cari kode

<b:skin><![CDATA[

timpa ganti kode dengan

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>

3. cari kode

]]></b:skin>

timpa ganti kode dengan

</style>

4. cari kode

</head>

timpa ganti kode dengan

&lt;/head&gt;&lt;!--<head/>--&gt;

5. cari kode

</body>

timpa ganti kode dengan

&lt;!--</body>--&gt;&lt;/body&gt;

6. cari kode

<html>

timpa ganti kode dengan

<HTML expr_dir='data:blog.languageDirection'>

7. cari kode

</html>

timpa ganti kode dengan

</HTML>

check kembali dengan pagespeed insight google.

Menghapus Ikon Edit Post Dari Bawaan Blogger

Seperti yang kalian tau ketika kita membuka blog kita dengan login akun sesuai dengan blog akan terdapat ikon ikon pada widget bawaan blogger bergambar obeng dan kunci. Nah sebenarnya ikon itu bisa memperlambat kecepatan sebuah blog.
Untuk menghilangkanya caranya cukup cari kode di edit html.
<b:include name="quickedit">
<b:include data="post" name="postQuickEdit"></b:include></b:include>

Lalu hapus kode tersebut.

maka check lagi blog Anda dengan mengunjungi ulang apakah masih ada ikon atau tidak, jika sudah tidak ada maka artinya anda berhasil.

Mengurangi Ukuran File Gambar Di Blog

Gambar merupakan elemen tambahan agar artikel terlihat lebih menarik , Akan tetapi dengan semakin banyaknya gambar maka kecepatan blog akan lambat.
Lalu bagaimana mengatasi masalah gambar ini ?

Gunakan Ukuran Gambar Kurang Dari 100kb

Pastikan memilih gambar yang kurang dari 100kb agar kecepatan blog menjadi lebih cepat karena sumber gambar yang kecil dan pastikan gunakan gambar small / medium tiap kali memosting gambar pada editor blogger.
Gunakan software pengecil ukuran gambar seperti photoshop atau mengompress gambar secara online menggunakan situs https://compressjpeg.com/ .

Mengguanakan Lazy Load

Untuk mempercepat kecepatan blog biasanya para blogger memasang plugin LazyLoad . Terbukti dengan memasang ini kecepatan blog bisa meningkat dari 1 detik load menjadi 0.3 detik.
cara memasangnya buka Blogger > Tema > Edit Html > Lalu kopikan kode berikut sebelum </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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Simpan tema seperti biasa dan lazyload sudah terpasang.

Jangan Menggunakan Custom Font

Jangan menggunakan font pihak ketiga seperti Google Font dan layanan penyedia font lain karena dapat mengurangi kecepatan blog dengan mengakses sumber luar atau external source . maka itu gunakan font secara default. 
Jika ingin tetap menggunakan font dari Google Font saya sarankan memilih 2 font saja dan ketika import font parse dulu kodenya sebelum digunakan.
contoh :
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300|Roboto&");
</style>

ganti dengan

&lt;style&gt;
@import url(&#39;https://fonts.googleapis.com/css?family=Open+Sans:300|Roboto&#39;);
&lt;/style&gt;

Menambah Expires Header

Dengan ini jika pengunjung sudah pernah mengunjungi artikel dan meload semua gambar dan element maka saat kembali mengunjungi artikel yang sama sekali lagi tidak akan terjadi proses meload atau mengunduh gambar dan elemen elemen artikel tersebut karena sudah tersimpan di media penyimpanan.
Untuk menambah cukup tambahakan kode tepat di bawah <head>
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<meta http-equiv="expires" content="sat, 02 jun 2020 00:00:00 GMT"/>



Akhir Kata :

Kira kira seperti itulah beberapa cara meningkatkan kecepatan blog , kecepatan memang bukan hal yang sangat penting namun bisa penting jika dibarengi dengan artikel atau konten yang berkualitas . karena dalam dunia blogging ” Content Is King ” Konten adalah raja.

Terimakasih sudah berkunjung jika ada pertanyaan dan kritik komen di bawah.

Tinggalkan Komentar

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