Wednesday, January 6, 2010

Mempercepat Loading Blog

"Sebuah cara yang mudah untuk mempercepat loading blog dengan hanya memindah penempatan suatu file tetapi cara ini mempunyai efek yang cukup signifikan untuk meningkatkan loading blog"

Blog yang berat bisa membuat tidak nyaman pengunjung yang datang. Banyak cara yang bisa dilakukan untuk mempercepat. Jika sebuah web ato menggunakan WordPress, bisa saya katakan lebih mudah mengaplikasikan trik-trik mempercepat loading blog. Akan tetapi saya pribadi menggunakan Blogpost yang gratisan sebagai media untuk ngeblog. Kebanyakan postingan yang membahas mempercepat loading blog khususnya untuk Blogpsot yang saya temui berkutat pada masalah seperti :
1. compress file css, javascript
2. penggunaan widget2 yang tidak perlu lebih baik tidak usah dipakai
3. script2 pemutar musik, animasi, flash/multimedia
4. penggunaan image/banner

Ada hal yang kurang dan menurut saya, hal tersebut penting karena sangat bermanfaat dan efeknya dalam mempercepat loading blog termasuk signifikan. Jika sobat lihat kode blog ini lewat view page code, akan tampak bahwa diatas kode ]]></b:skin> tidak ada deretan susunan file css template ini. Kenapa?? karena file css template ini sudah saya ganti menjadi sebuah linknya saja dimana file css tersebut saya upload ke Google Site dan saya hanya mengkopi link file tersebut dan menaruhnya bersama kode javascript seperti pada gambar dibawah ini.

file hosting cssPerhatikan yang saya garis bawah merah (klik gambar untuk memperbesar)

Awalnya saya mencoba setelah melihat demo2 WordPress theme yang hanya mencantumkan link file css. Terus saya coba untuk mengaplikasikan ke blog ini. Kemudian iseng ngetes kecepatan loading blog saya menggunakan tool dari seocentro, dan hasilnya ternyata bagus untuk blog saya alias berat blog berkurang. Saya coba untuk blog saya yang lain, Blogger Template by ireng_ajah juga sama. Ada pengurangan berat yang cukup signifikan dengan cara tersebut.

Berikut ini hasil perbandingan sesudah dan sebelum menggunakan cara tersebut pada Just a Blog dan Blogger Template by ireng_ajah.

1. Just a Blog

Screenshot loading blog Just a Blog dengan file css diatas kode ]]></b:skin>

Screenshot loading blog Just a Blog dengan file css yang diambil hanya linknya saja.


2. Blog Tree Blogger Template

Screenshot loading blog Free Blogger Template dengan file css diatas ]]></b:skin>

Screenshot loading blog Free Blogger Template dengan file css yang diambil hanya linknya saja.

Perhatikan yang saya garis bawah merah (klik gambar untuk memperbesar)

Just a Blog yang awalnya 99847 bytes menjadi 93366 bytes (berkurang 6000an bytes)

Blogger template by ireng_ajah yang awalnya 61747 bytes menjadi 53911 bytes (berkurang 7000an bytes)

Suatu penurunan berat blog yang cukup signifikan, bukan??


Bagaimana caranya??

Cukup cut dan paste file css blog sobat ke Notepad. Jangan lupa filenya di simpan dalam bentuk .css. Kalo sudah, upload dan kopi url file css tersebut. Perlu diperhatikan juga web file hostingnya cari yang sudah terbukti akan hal koneksi. Jangan sampai ketika dikunjungi malah tidak bisa mengakses blog gara2 koneksi web file hostingnya tidak stabil, apalagi sering macet. Kalo saya memakai fasilitas dari Google Site untuk segala urusan upload file2 saya.

Jika sudah, letakkan url file css tersebut di bawah kode ]]></b:skin>
dengan susunannya seperti ini :

<link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>

Repotnya jika memakai cara diatas adalah ketika mau edit2 blog karena harus buka dulu file cssnya dan upload lagi tapi saya pikir gak terlalu jadi masalah karena ngedit2 blog juga gak tiap hari ini, hehehehehhee...

(emang tiapa hari apa yang mau di edit reng..??)

Selain trik diatas, hal sepele tetapi bermanfaat dalam meningkatkan loading blog yaitu dalam hal penulisan link alamat web/blog. Diusahakan untuk setiap link alamat web/blog yang ada di blog sobat untuk memakai tanda "/" (tanpa tanda kutip) alias garis miring pada akhir link alamat web/blog tersebut. Misalnya

http://blogcenti.blogspot.com/

Tanda "/" pada akhir alamat itu sebagai identitas untuk web server bahwa link tersebut langsung menuju kesasar alamat tersebut. Biasanya link2 tersebut menjadi link pada menu blog atau link blog lain yang tukeran link.

Untuk trik dan tips meningkatkan loading blog yang lain, bisa mengunjungi alamat ini dimana salah satunya seperti trik diatas.


Tapi kecepatan loading blog seringkali terbentur akan tampilan blog. Kadang untuk mengejar tampilan blog yang bagus, indah, tidak lagi peduli akan kecepatan blog. Selera tiap blogger emang berbeda tetapi jika kecepatan dan keindahan blog berjalan beriringan, bukankah itu sesuatu yang lebih baik??


Update tanggal 17-01-2010

Ada yang ketinggalan tentang cara untuk mempercepat loading blog. Jika blog sobat menggunakan file css atau file javascript untuk widget blog sobat dimana file tersebut ditempatkan dibawah kode ]]></b:skin>, misalnya untuk widget related post, tabview, slider image atau yang lain, usahakan file2 tersebut berada dalam satu alamat web file hosting yang sama. Kenapa?? Karena dengan file hosting yang berbeda, bisa jadi alamat server file hosting tersebut juga berbeda dan jika koneksi salah satunya sedang bermasalah, tentunya juga akan menggangu loading blog kita. So, akan lebih baik jika file2 tersebut berasa dalam 1 alamat.

Disamping itu juga, jika suatu widget mempunyai beberapa kode file, misal slideshow1.js, slideshow2.js, ada baiknya file2 tersebut digabung menjadi 1, misalnya menjadi slideshow.js

Ada penurunan ukuran blog lagi setelah saya menggabungkan file javascript untuk menu accordion jika dibandingkan hasil pada postingan mempercepat loading blog padahal sudah ada tambahan 5 postingan


Update tanggal 23-01-2010

Apabila template blog sobat masih menggunakan
Variable Definitions untuk file css-nya, maka trik ini tidak akan berfungsi. Untuk keterangan lebih lanjut soal Variable Definitions, ada pada postingan ini


Update 28-03-2010

Just a Blog dan Free Blogger Template Ajah sebagai contoh diatas sudah ganti template lagi tetapi masih menggunakan cara diatas


Note :
- Sudah susah2 ngutak-ngutik blog supaya kecepatan blog lebih baik tetapi jika kecepatan akses yang akses blog kita termasuk lemot, jangan salahkan yang punya blog lho.. hehehehehehehe...

- Gambar di atas diambil sebelum postingan ini (ya iyalah.. piye tho kowe ki reng..??)

No comments:

Post a Comment