Rabu, 14 April 2010

Mempercepat Loading Blog


Blog Speed
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.
  1. Test dulu speed blog dengan Website Speed Test kemudian catat load time.
  2. Apabila blog Anda tidak berkonten musik atau video, sebaiknya widget musik dan video dihilangkan atau setidaknya dikurangi.
  3. 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.
  4. 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.
  5. Gunakan tag "ALT" untuk setiap image pada blog Anda.
    Contoh : <img src="URL gambar">, ganti dengan <img alt="gambar" src="URL gambar">.
  6. 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">.
  7. Akhiri dengan tanda "/" (slash) untuk semua link yang terdapat pada blog Anda, contoh http://www.linksukses.com diganti dengan http://www.linksukses.com/
  8. 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).
  9. 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.
  10. 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.
  11. 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 ?

;

14 comments:

Syam Oby     14 April 2010 23:10

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

Yuda     15 April 2010 15:10

@Syam Oby : Mungin Mas Oby bisa mendapatkannya pada blog sahabat saya Indahnya Berbagi, mudah-mudahan ada yang cocok soalnya banyak pilihan, kalau masih belum menemukan tip yang cocok, Mas Oby boleh kontak saya lagi.
Terina kasih.

Jokostt     16 April 2010 09:19

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.

Arem Van Basten     17 April 2010 04:08

wah boleh ni aku coba,,, thank share nya bro, slm kenal

Syam Oby     23 April 2010 21:58

hihi iya kak
segera menuju TKP

Indahnya Berbagi     25 April 2010 05:25

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!

ghe     28 April 2010 07:11

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

Yuda     28 April 2010 10:25

@ghe (Mas EKO Ghesy) : Pada point ke- 5,6 dan 7 memang secara tulisan akan lebih panjang tetapi dengan :
1. Alt="...: Server akan cepat merespon bahwa objet tersebut adalah sebuah gambar terdefinisi.
2. Width="..., height="....: Server tidak akan mencari ukuran gambar karena telah didefinisikan terlebih dahulu.
3. .../ : Server tidak akan mencari sub halaman lain karena sudah diberitahu bahwa URL tersebut adalah URL terakhir, tetapi untuk point ke-7 ini jangan dilakukan pada URL internal yang sudah aktif karena bisa terjadi broken link. Pengalaman saya, untuk point ini hanya bisa untuk URL terntentu atau external URL.

Jadi point-2 tersebut jelas akan mempercepat loading, dan untuk membuktikannya bisa dicoba dengan sebuah situs gallery photo atau situs yang menampilkan gambar banyak dan ukur dengan speed test.

Semoga bisa membantu. (koreksi saya jika salah)

ghe     28 April 2010 17:51

terima kasih pak untuk penjelasannya....
sangat jelas sekali...
uia nanya lagi pak...link external dan internal itu yang seperti apa?

Yuda     28 April 2010 22:01

@Ghesy: External link = URL yang terhubung ke luar blog yang bersangkutan, Internal Link = URL yang tertuju pada halaman blog itu sendiri.
Contoh, Blog A sedang menjelaskan satu topik dan di dalamnnya terdapat link yang tertuju ke blog B, maka link tersebut adalah External link, sedangkan apabila di dalam topik tersebut terdapat link yang tertuju ke halaman lain pada blog A sendiri, maka disebut Internal link.

dani     4 Juli 2010 00:36

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? :)

Belantara Indonesia     6 Juli 2010 11:49

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..

Dwi Iswantoro     8 Juli 2010 11:18

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

Dany Joy     16 September 2011 00:15

Tipsnya mesti saya coba nih, Mas Yuda. Saya baru tahu kalau CSS bisa dikompresi. Segera menuju TKP ah, hehehe.. :D

Salam kenal, Mas.
Dany

Poskan Komentar

Mohon maaf jika saya terlambat atau tidak dapat me-reply komentar Anda. Terima kasih.

© Copyright
Anda tertarik dan bermaksud untuk menerbitkan/ mempublikasikan kembali artikel Link Sukses melalui website/ blog Anda? Silakan baca aturannya di Term of Use Link Sukses. Terima kasih telah berkunjung.


 Personal Blogs Better Blogging Blogs - Blog Catalog Blog Directory