CARA MEMPERCEPAT LOADING BLOG, salah satu cara yang digunakan para blogger untuk meningkatkan kenyamanan pengunjung adalah dengan cara mempercepat loading blog. Kenapa begitu? karena jika kecepatan loading blog pengunjung akan senang dan tetap memilih blog tersebut. Namun jika kecepatan loading blog lambat maka pengunjung akan keluar dan memilih blog lain karena tidak sabar.
CARA MEMPERCEPAT LOADING BLOG, ada banyak cara untuk mempercepat loading blog antara lain dengan :
1. Menggunakan kode script yang dibuat untuk meningkatkan kecepatan loading blog
2. Mengkompres CSS/HTML
3. Mengkompres gambar/image
tentunya sudah tidak sabar lagi bukan nih CARA MEMPERCEPAT LOADING BLOG
1. Menggunakan kode script yang dibuat untuk meningkatkan kecepatan loading blog
Dengan menggunakan kode script ini maka browser tidak akan membaca image/gambar di blog, sehingga dapat meringankan beban server dan mempercepat loading.
Berikut tutorial penggunaan kode script untuk mempercepat loading blog :
- Masuk ke akun blogger anda
- Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).
- Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
- Beri tanda centang pada Expand Template Widget.
- Cari kode </head> gunakan CTRL + F pada keyboard.
- Lalu letakkan kode berikut di atas kode </head>.
<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://wadah-tutorial.googlecode.com/files/superload.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'> $(function() { $("img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5cBwv3AYSE7LakYIDKsRmInvMrug8CoYvuZIq3-Ok4SVZcJ0wbc0f9ertsS3iYYZdqABVQQrrAK__AQhgAM10f-MjGpMF02XGpU46RAcsbexBg5gLX96nCecyUrr5val7uidfKyvAkts/",threshold : 200}); }); </script>
<script src='http://wadah-tutorial.googlecode.com/files/superload.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'> $(function() { $("img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5cBwv3AYSE7LakYIDKsRmInvMrug8CoYvuZIq3-Ok4SVZcJ0wbc0f9ertsS3iYYZdqABVQQrrAK__AQhgAM10f-MjGpMF02XGpU46RAcsbexBg5gLX96nCecyUrr5val7uidfKyvAkts/",threshold : 200}); }); </script>
- Terakhir klik Simpan Template.
2. Mengkompres CSS/HTML
Pemakaian kode HTML dan Javascript yang berlebihan tentu akan membuat loading blog menjadi lambat, jadi sebaiknya gunakan kode HTML dan Javascript seperlunya saja, Selain itu kita juga harus memperhatikan pemakaian kode CSS, karena hal tersebut juga berpengaruh terhadap loading sebuah blog, ada baiknya kode CSS template kita kompres biar ukurannya jadi lebih kecil, sehingga loading tampilan blog akan lebih cepat.
Sebagai contoh pada sebuah template biasanya terdapat kode
Kode tersebut bisa kita kompress secara manual jadi seperti ini:
atau seperti ini:
Untuk mengkompress kode CSS pada template, mungkin agak merepotkan karena kodenya cukup panjang. jadi sebaiknya anda menggunakan CSS Compressor Tool biar lebih mudah. Di bawah ini ada beberapa situs yang menyediakan CSS Compressor Tool :
3. Mengkompres gambar/image
Anda bisa menggunakan image optimizer dari www.imageoptimizer.net. untuk menggunakannya anda bisa ikuti tutorial dibawah ini:
Untuk langkah mengoptimiskan image :
ingat jika cara diatas tidak bekerja silahkan di kembalikan seperti semula
sumber wadahtutorial.blogspot.com
klik disini wadah tutorial
Pemakaian kode HTML dan Javascript yang berlebihan tentu akan membuat loading blog menjadi lambat, jadi sebaiknya gunakan kode HTML dan Javascript seperlunya saja, Selain itu kita juga harus memperhatikan pemakaian kode CSS, karena hal tersebut juga berpengaruh terhadap loading sebuah blog, ada baiknya kode CSS template kita kompres biar ukurannya jadi lebih kecil, sehingga loading tampilan blog akan lebih cepat.
Sebagai contoh pada sebuah template biasanya terdapat kode
a:link{
color:#BBDDFF;
text-decoration:none;
}
a:visited{
color:#BBDDFF;
text-decoration:none;
}
a:hover {
#BBDDFF;
text-decoration:underline;
}
color:#BBDDFF;
text-decoration:none;
}
a:visited{
color:#BBDDFF;
text-decoration:none;
}
a:hover {
#BBDDFF;
text-decoration:underline;
}
Kode tersebut bisa kita kompress secara manual jadi seperti ini:
a:link {color:#BBDDFF; text-decoration:none;}
a:visited {color:#BBDDFF; text-decoration:none;}
a:hover {color:#BBDDFF; text-decoration:underline;}
a:visited {color:#BBDDFF; text-decoration:none;}
a:hover {color:#BBDDFF; text-decoration:underline;}
atau seperti ini:
a:link, a:visited, a:hover {color:#BBDDFF; text-decoration:underline;}
Untuk mengkompress kode CSS pada template, mungkin agak merepotkan karena kodenya cukup panjang. jadi sebaiknya anda menggunakan CSS Compressor Tool biar lebih mudah. Di bawah ini ada beberapa situs yang menyediakan CSS Compressor Tool :
- www.cleancss.com
- CSS Drive Gallery
- CSS Compressor
- Online CSS Optimiser/Optimizer
- Minify CSS
- CSSTidy Online
3. Mengkompres gambar/image
Anda bisa menggunakan image optimizer dari www.imageoptimizer.net. untuk menggunakannya anda bisa ikuti tutorial dibawah ini:
- Siapkan gambar yang akan di optimize.
- Buka www.imageoptimizer.net.
- Klik Browse dan pilih gambar yang akan di optimiskan
- Tentukan ukuran lebar dan tinggi gambar.
- Lalu klik Optimize Now.
- Pada halaman selanjutnya klik Download to your Computer.
selesai...
Untuk langkah mengoptimiskan image :
- Klik kanan pada image pilh Optimize Image As...
- Kemudian atur lebar dan tingginya, Lalu klik Optimize
Ok selesai
ingat jika cara diatas tidak bekerja silahkan di kembalikan seperti semula
sumber wadahtutorial.blogspot.com
klik disini wadah tutorial
Makasih mas atas bantuannya, ^.^
BalasHapussama-sama mas.
Hapusterima kasih sudah berkunjung
blog ane abis gnti templates mlh loading ny kyk siput gan..
BalasHapuspdhl buka d opera mini gan..
ad ga gan script buat mempercept loading gambar ato yg lain..