Banyak faktor yang mempengaruhi loading time blog di antaranya hosting yang digunakan, kapasitas file yang digunakan, penggunaan plugin atau widget, banyaknya penggunaan script dan lain-lain.
Terlepas dari hosting dan CMS apa yang digunakan untuk membuat blog, berikut ini adalah beberapa tip untuk mempercepat loading blog tetapi sebelum melakukan metode ini sebaiknya back-up dulu template atau kode-kode yang nantinya akan dilakukan sedikit perubahan untuk optimasi.
- Test dulu speed blog dengan Website Speed Test kemudian catat load time.
- Apabila blog Anda tidak berkonten musik atau video, sebaiknya widget musik dan video dihilangkan atau setidaknya dikurangi.
- Kurangi penggunaan flash dan animasi termasuk slideshow kecuali kalau blog tersebut memang memerlukan atau membahas hal itu, tetapi tempatkan sesara proporsional dan jangan sampai terlalu memberatkan.
- Optimasi gambar yang digunakan dengan memperkecil kapasitas file atau mengganti format file yang digunakan (GIF, JPG, PNG) yang sesuai, maksudnya perhitungkan kejernihan dan kejelasan sebuah gambar dengan tetap memperhatikan besarnya file gambar tersebut. Anda dapat menggunakan Photoshop untuk keperluan ini atau bisa juga dengan menggunakan tool Dynamic Drive.
- Gunakan tag "ALT" untuk setiap image pada blog Anda.
Contoh : <img src="URL gambar">, ganti dengan <img alt="gambar" src="URL gambar">. - Definisikan ukuran lebar dan tinggi gambar pada blog yang bersangkutan.
Contoh <img alt="gambar" src="URL gambar"> diganti dengan <img alt="gambar" src="URL gambar" width="lebar gambar" height="tinggi gambar">. - Akhiri dengan tanda "/" (slash) untuk semua link yang terdapat pada blog Anda, contoh http://www.linksukses.com diganti dengan http://www.linksukses.com/
- Hapus atau setidaknya kurangi life link atau URL lain yang terlalu berat pada blog Anda di mana URL tersebut memiliki loading time yang besar (lambat dibuka).
- Optimasi kode CSS,
Contoh A yang belum di-optimasi:
#contohheader {
margin-top : 10px;
margin-right : 5px;
margin-bottom : 15px;
margin-left : 20px;
}
Contoh A setelah di-optimasi:
#contohheader {
margin:10px 5px 15px 20px;
}
Contoh B yang belum di-optimasi:
#contohheader {
margin-top : 0px;
}
Contoh B setelah di-optimasi:
#contohheader {
margin : 0;
}
Penggunaan kode warna #ffffff, #000000, #dddddd, dll, diganti dengan kode warna #fff, #000, #ddd. Kalau Anda sedikit malas untuk memeriksa kode CSS, anda bisa menggunakan Online Tool CleanCSS, caranya copy semua kode CSS pada blog Anda kemudian paste pada tool tersebut dan hasilnya copy-kan lagi pada blog Anda. - Kompress kode CSS dengan merapatkan semua kode CSS dalam satu baris.
Contoh sebelum dikompresi :
#contohfooter {
width : 900px;
height: 100px;
padding : 5px;
color : #FFFF00;
font-faminy : arial;
font-size : 12px;
font-weight: bold;
line-height : 15px;
}
Contoh setelah dikompresi :
#contohfooter {width:900px; height:100px; padding:5px; color:#FFFF00; font-faminy:arial; font-size:12px; font-weight:bold ;line-height:15px;}
Untuk keperluan tersebut, Anda bisa juga menggunakan CSS Compressor secara online tetapi untuk percobaan, pilih opsi Normal, caranya copy semua kode CSS pada blog Anda kemudian paste pada tool tersebut dan hasilnya copy-kan lagi pada blog Anda.
- Test lagi dengan Website Speed Test dan bandingkan dengan data load time sebelumnya untuk blog yang sama.
Mengenai optimasi kode CSS lebih lanjut akan saya tulis pada postingan lain.
Dengan metode di atas maka secara otomatis akan menghemat penggunaan Bandwidth.
BTW...Selamat mencoba dan semoga bermanfaat.
