Tool Lengkap Untuk Tes Kecepatan Loading Blog

Seperti yang kita ketahui bahwa kecepatan loading blog merupakan faktor yang sangat penting. Tidak hanya berpengaruh pada pengunjung blog, tetapi juga digunakan sebagai parameter pencarian peringkat oleh Google saat ini. Pada tulisan saya sebelumnya, hal ini sudah pernah saya bahas tentunya dengan tools yang lain. Dan saat ini saya melihat adanya tool online yang berkerja sangat baik untuk menganalisa kecepatan loading blog.

Sobat dapat menemukannya di WebPageTest.org. Hal yang pertama-tama sobat perlu lakukan adalah dengan memasukkan URL dari blog sobat, memilih lokasi geografis untuk melakukan tes, pilih beberapa pilihan dan kemudian klik "Submit". Dibutuhkan waktu sekitar 10-20 detik atau bahkan lebih untuk menyelesaikan tes ini, dan kemudian sobat akan melihat hasilnya seperti pada gambar berikut :

 

 

Disini sobat akan memperoleh waktu loading blog sobat pada kunjungan pertama dan kedua, hasilnya pun akan berbeda . Tool ini akan mempelihatkan grafik apa saja load yang gagal dan elemen apa yang paling banyak dalam blog sobat.

 

Terlihat pada saat loading pertama, blog saya terbaca sampai 8.455 detik dan 2,815 detik pada kunjungan ke-2, masih jauh dari standard. Ketika saya amati, bahwa load gambar-gambar pada blog ini yang banyak menghabiskan waktu sehingga membuat loading blog saya jadi lambat.

 

Bagaimana dengan blog sobat? silahkan di coba dan analisa kecepatan blog sobat dengan segera.

Analisa Kecepatan Loading Blog

Seperti kita ketahui, performa sebuah blog sangat di tentukan oleh beberapa hal, seperti template yang menarik, isi postingan, dan kecepatan loading blog. Template yang cantik dan isi artikel yang menarik akan menjadi sia-sia jika loading blog sangat lambat. Karena saya sendiri pernah mendapat kritik dari sobat blogger di kotak chat box, yang mengatakan bahwa loading blog saya terlalu berat, �coba anda kurangi java script di blog anda�. Sebuah kritik berharga dan sampai sekarang masih saya ingat.

 

Ada beberapa cara untuk mengurangi loading blog kita, seperti yang pernah saya jelaskan sebelumnya, yaitu dengan kompres css dan menyimpan css di hosting. Dengan meminimalisasi css dan javascript, blog yang tadinya lambat akan berubah menjadi lebih cepat. Dan usahakan untuk menghindari pemakaian javascript di bagian header, karena jika situs dari javascript yang sobat gunakan sedang down, maka loading blog sobat akan menjadi sangat lambat. Karena saya sendiri mengalaminya beberapa hari yang lalu, ketika situs dari script kode iklan yang saya gunakan sedang lambat, sehingga loading blog saya ikut-ikutan jadi lambat.

 

Dibawah ini ada beberapa tools yang bisa sobat gunakan untuk mengukur kecepatan blog sobat. Pembacaannya berupa angka dari bagian-bagian blog sobat, mulai dari html, html image, css image, javascript, css, multimedia, dll. Semuanya terbaca dalam satuan kb. Bandingkan semua tools dibawah ini, karena setiap tools mempunyai tingkat akurasi yang berbeda-beda.

 

1. Website Optimization

    

   

    

2. Free Speed Test

    

   

    

3. Aptimize

    

   

    

4. Tools Pingdom

    

   

 

Empat situs diatas akan memberikan hasil yang berbeda-beda. Jangan jadikan satu patokan saja, karena itu coba satu-persatu sebagai pembanding. Semoga tips ini berguna dan menjadi bahan pertimbangan buat sobat dalam penggunaan css dan javascript di template sobat.

Tips Mempercepat Loading Blog (Part II)

Pada tutorial sebelumnya, saya juga membahas tentang tips mempercepat loading blog dengan mengkompress kode css, namun hasilnya tidak terlalu jauh berbeda dengan sebelum di kompress.

 

Berbeda dengan yang akan saya jelaskan kali ini, saya akan coba memberikan tips mempercepat loading blog dengan cara menyimpan kode css di tempat hosting gratis.

 

Kecepatan loading yang dihasilkan lumayan cukup signifikan dengan sebelum kode css di simpan di hosting gratis. Caranya sangat mudah, namun sebelumnya sobat harus punya dulu hosting yang akan dijadikan tempat menyimpan kode css-nya. Tidak perlu bayar, yang gratisan banyak kok, sobat bisa coba di Google Code. Silahkan daftar dulu, sudah daftar? baiklah sekarang ikuti langkah-langkahnya berikut ini :

 

1. Login ke blogger.

    

2. Silahkan tuju Elemen Halaman.

    

3. Klik Edit Template.

    

4. Biasakan backup template dulu sebelum melakukan perubahan.

    

5. Lalu klik Expand Template Widget.

    

6. Perhatikan kode css milik sobat, saya akan berikan sedikit contoh :

    

   #header {
       width: 960px;
       height: 150px;
       color: #888888;
       background:#000;
       font-size: 14px;
       font-weight: normal;
       margin: 0px auto;
       padding: 0px;
       overflow: hidden;
       position: relative }
   

   #header p {
       padding: 0px 0px 5px 0px;
       margin: 0px;
       line-height: 20px }

   
   #header h1 {
       color: #FFFFFF;
       font-size: 35px;
       font-family: Times New Roman, Georgia, Trebuchet MS;
       font-weight: normal;
       margin: 0px;
       padding: 20px 0px 0px 0px;
       text-decoration: none }

   
   #header h1 a, #header h1 a:visited {
       color: #EEEEEE;
       font-size: 40px;
       font-family: Times New Roman, Georgia, Trebuchet MS;
       font-weight: normal;
       margin: 0px;
       padding: 20px 0px 0px 0px;
       text-decoration: none }

   
   #header h1 a:hover {
       color: #CCCCCC;
       text-decoration: none }

    

7. Sudah ketemu kan? nah sekarang buka notepad, lalu copy paste semua kode css milik sobat kedalam notepad.

    

8. Setelah itu simpan file tersebut dalam bentuk css, sebagai contoh sobat bisa simpan dengan nama style.css

    

9. Sekarang login ke hosting gratis yang sudah sobat daftarkan tadi, kemudian upload file style.css ke hosting tersebut.

    

10. Setelah upload berhasil, sobat akan mendapatkan kode url, contoh seperti punya saya :

     

    http://miscah.googlecode.com/files/header.css

     

11. Kemudian ubah kode url tersebut menjadi seperti ini :

     

    <link href='http://miscah.googlecode.com/files/header.css' rel='stylesheet' type='text/css'/>

     

12. Dan letakkan kode tersebut tepat setelah kode ]]></b:skin>

     

13. Sehingga hasilnya menjadi seperti berikut ini :

     

    ]]></b:skin>
    

    <link href='http://miscah.googlecode.com/files/header.css' rel='stylesheet' type='text/css'/>

    </head> 
    

     

14. Jangan lupa Simpan Template.

 

Mudah kan, iya siapa bilang susah. Yang bilang susah berarti orang yang malas berpikir. Oke deh selamat mencoba !

Kompress CSS Percepat Loading Blog

Ada beberapa hal yang mempengaruhi loading suatu blog, selain pemakaian kode HTML dan Javascript yang berlebihan yang tentunya akan membuat loading blog jadi lambat, pengaturan atau pemakaian kode css yang salah juga berpengaruh terhadap loading blog.

 

Jika sobat banyak menggunakan kode HTML atau javascript dan diletakkan di sidebar sebelah kiri, itu akan membuat loading blog terasa sangat berat, kenapa ?

karena browser selalu membaca blog berurutan dari kiri atas sampai kiri bawah, kemudian akan berlanjut ke bagian kanan atas sampai kanan bawah, dan bagian footer atau bawah blog tentunya yang akan kebagian terbaca paling akhir.

 

Jadi saya sarankan gunakanlah template dengan kolom postingan yang terletak di sebelah kiri, atau jika sobat menggunakan sidebar di sebelah kiri, usahakan jangan terlalu banyak memakai kode HTML atau Javascript di sebelah kiri karena akan membuat loading blog jadi sangat berat.

 

Berlanjut pada topik utama kita, kompress kode css ini bisa kita lakukan secara manual maupun dengan menggunakan tools kompress css yang sekarang sudah banyak tersedia di internet. Saya akan berikan contoh kasusnya, perhatikan kode css berikut ini :

 

a:link {
color:#006699;  text-decoration:none;
}

a:visited {
color:#006699;  text-decoration:none;
}

a:hover {
color:#006699;  text-decoration:underline;
}

#main .post-body a:link {
color:#006699;  text-decoration:underline;
}

#main .post-body a:visited {
color:#006699;  text-decoration:underline;
}

#main .post-body a:hover {
color:#006699;  text-decoration:none;
}

kode css diatas adalah kode standard yang biasa sobat jumpai di HTML template, jika saya kompress secara manual maka hasilnya akan seperti dibawah ini :

 

a:link,a:visited,#main .post-body a:hover {
color:#006699;
text-decoration:none
}

a:hover,#main .post-body a:link,#main .post-body a:visited {
color:#006699;
text-decoration:underline
}

apa yang membedakan kedua bagian diatas ? jika sobat cermat melihat seluruh kode css yang paling atas (sebelum saya kompress) bahwa semua bagian dalam kurung {....} yang membedakan hanya dua bagian yaitu pada penulisan text-decoration:none dan text-decoration:underline. Pemakaian spasi juga sangat berpengaruh dalam penulisan css, jika saya rapatkan maka hasilnya menjadi seperti berikut ini :

 

a:link,a:visited,#main .post-body a:hover{color:#006699;text-decoration:none}
a:hover,#main .post-body a:link,#main .post-body a:visited{color:#006699;text-decoration:underline}

 

Untuk mengkompress kode css pada template, sobat tidak perlu susah payah mengkompress-nya secara manual, karena sekarang sudah banyak tools gratisan yang menyediakan fasilitas kompress css, salah satu yang biasa saya gunakan adalah  situs http://www.csscompressor.com

 

1. Untuk mengkompress css-nya silahkan kunjungi situs tersebut.

    

2. Kemudian pada halaman depan, ada pilihan jenis kompress dari yang low, standard, high sampai highest, kemudian masukkan kode css milik sobat kedalam kotak kosong yang tersedia lalu klik compress.

    

   

    

3. Maka akan terlihat hasil kompress dibawahnya, seperti pada gambar berikut

    

   

    

4. Kemudian klik Select All dan copy semua kode yang sudah di kompress tadi.

Ada banyak tools lainnya yang bisa sobat coba, sobat bisa cari di search engine..oke sob, selamat mengkompress ria, semoga dengan di kompress-nya kode css blog sobat akan menjadi lebih enteng..