-
Mempercepat Loading Blog
Siapa yang tidak mau memiliki blog yang dapat diakses dengan cepat, tetapi terkadang tuntutan konten dan keinginan blogger sendiri yang menambah lambatnya loading sebuah blog.
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.
Bagaimana ?, ada perubahan ?
Artikel yang perlu dikoreksi :
13 comments:
-
He...He... Saya jadi terpancing untuk ngecek blog saya (Diptara blog) baca artikel ini. Lumayan, Mas Yuda, Load Time-nya 0.46 seconds, meskipun ukurannya rada gede, 107.02 KB.
Kalau berbicara Load Time sebuah blog, saya pernah baca E-booknya Donny Wijaya, katanya sebuah website ideal waktu loadnya harus tidak lebih dari 10 detik kalau diakses dengan mode koneksi internet Dial Up. Kalau tidak, pengunjung akan cenderung pergi karena kelamaan nunggunya.
-
wah boleh ni aku coba,,, thank share nya bro, slm kenal
-
hihi iya kak
segera menuju TKP
-
Terimakasih tipsx, dah sy coba praktekkan termasuk point 9 dan 10 tapi tanpa bantuan CSS Compressor, sy buat manual saja. Bukannya tidak mau pakai pihak ketiga tuk kompresi CSS tapi saya telat tau infonya (bacanya buru2 kmrn)?
Sekali lagi makasih!
-
pada poin ke-7 apa fungsi dari tanda /. mengapa dengan menambahkan tanda itu bisa mempercepat loading blog?
dan pada poin ke-5&6 kenapa harus menggunakan tambahan alt,dsb?bukannya malah jadi tambahan panjang ya scriptnya?
mav jika banyak tanya, saya hanya ingin lebih memahami
-
terima kasih pak untuk penjelasannya....
sangat jelas sekali...
uia nanya lagi pak...link external dan internal itu yang seperti apa?
-
Kang Yuda,
sedikit menambahkan.
[dejavu] Yang 'alt' itu atribut. Bagian dari tag 'img'. Jadi, 'alt' bukan tag, kan?
Alt dimaksudkan untuk mendeskripsikan gambar bagi pengguna yang mematikan tampilan gambar di sisi peramban Web (alasan aksesibilitas Web). Teks alternatif itu ternyata dipakai juga oleh algoritma mesin pencari/telusur Internet.
Bagaimana dengan konsep Page Speed (Google) dan YSlow (Yahoo) untuk kecepatan 'loading' blog? :)
-
ngurangin dikit sih bro...cuman kalo src ganti alt jadinya malah buruk di tampilanku..hehhehe..tar lah nyari solusi yg paling bisa...tutorial bagus....thx u..
-
Dear kang Yuda...
Satu tambahan tips lg buat sy nih, thanks bgt.
o iya, saya udh nyoba Website speed test dan hasilnya : 153.76 KB dan load time 0.1 seconds
Koq beda ya nilai seconds dg hasil speedtest-nya Jokostt 0.46 seconds dan 107.02 KB.
Padahal utk size blog sy lebih gede dr mas Jokostt.
Thanks banget sblmnya kang, untuk pencerahannya.
dwi
Siapapun boleh berkomentar termasuk kritik dan koreksi untuk perbaikan blog. Bagi yang awam, jangan malu untuk bertanya karena sayapun masih belajar. Tetapi saya mohon maaf karena tidak semua komentar dan email dapat saya reply.
hihih Tips manjuur banget kak yuda
kak yuda.. punya tips buat menu horizontal gak???
oby dah cari di gugle
tp.. kayaknya gak ada yg cucok...
menu horizontal wat template oby enakanya apa yah