Cek Performa Blog Dengan Firebug Dan Page Speed
Setiap webmaster atau pemilik sebuah website atau blog pasti mendambakan memiliki website atau blog yang mempunyai performa yang tinggi dari sisi kecepatan loading. Sebagus apapun kontennya jika loadingnya sangat lambat atau “lola” alias loading lama bin lelet pasti akan mengurangi reputasi website atau blog tersebut. Dampak dari blog yang “lola”, biasanya pengunjung akan segera pergi dan segera menutup blog tersebut. Dari sisi SEO juga akan berdampak kurang bagus terhadap hasil pengindekan, seperti metode pengindekan Google saat ini yang juga memperhitungkan kecepatan loading sebuah website atau blog.
Untuk membantu menganalisa performa loading blog cukup banyak tool yang tersedia, salah satunya yaitu Firebug dan Page Speed dalam bentuk sebuah add on yang bisa kita install di browser Mozilla Firefox. Add on ini menurut saya cukup detail dan lengkap dalam menganalisa performa loading sebuah website atau blog dan langsung akan memberikan informasi bagian-bagian mana saja yang perlu dibenahi, seperti jumlah ukuran halaman, jumlah recources atau jumlah http request, ukuran gambar, file css, javascript, cache, kompresi dan masih banyak lagi. untuk lebih detailnya bisa dilihat di list berikut ini :
|
|
Cara menggunakan Firebug dan PageSpeed :
1. Buka browser Mozilla Firefox anda.
2. Install add-on Firebug dan Page Speed. Untuk Firebug bisa didownload di sini dan Page Speed di sini. Setelah terinstall jangan lupa restart Firefox anda. Jika telah terinstall dengan benar, maka icon add-on Firebug akan muncul di bagian kanan bawah browser. Lihat gambar di samping ini
.
3. Untuk menggunakannya buka blog kita sampai loadingnya selesai, klik icon Firebug tersebut, akan tampil menu seperti ini :

4. Klik button “Analyze Performance” setelah itu akan ditampilkan skor nilai dari performa loading blog kita beserta saran-saran untuk memperbaikinya. Semakin tinggi skornya berarti sebagai indikasi loading blog juga semakin cepat. Sebagai contoh blog ini untuk halaman depan (home) mempunyai skor 100 (skor tertinggi). Saya cek di GTmetrix score-nya juga 100. Demikian juga untuk theme versi mobile blog ini yang sudah saya rombak dan saya modifikasi skornya juga 100 (halaman home hanya menggunakan 1 http request).

Untuk mengetahui berapa ukuran sebuah halaman dan berapa jumlah recources (http request), fungsi kompressi dan lain-lain, bisa diklik di menu Recources yang ada di sebelah menu Performance. Semakin kecil ukuran halaman akan semakin cepat loadingnya. Untuk blog ini (home) ukuran file HTML-nya rata-rata hanya 18.7 kB, karena sudah menggunakan kompressi terkirim ke browser pengunjung hanya 4.8 kb, plus satu buah gambar yang hanya berukuran 95 byte dan satu file css (2.6kb) total ukuran halaman (home) 28.6 kb karena menggunakan kompressi (bisa dengan GZIP/DEFLATE atau ZLIB) terikirim ke browser hanya 7.6 kb. Saya mencoba membandingkan dengan beberapa blog punya teman ukurannya besar sekali, malah ada yang sampai 4 mega.
Di menu ini kita juga bisa menganalisa berapa jumlah recources (http request) sebuah halaman web. Semakin sedikit jumlahnya maka akan semakin baik performanya. Halaman home blog ini jumlah http-nya hanya 7, ketika diakses menggunakan IM2 Broom yg hanya 237kbps waktu yang dibutuhkan hanya 3 detik saja.
Untuk mengurangi jumlah http misalnya jika theme yang kita pakai menggunakan beberapa file css atau javascript, maka kita bisa menggabungkan menjadi satu file. Caranya silahkan baca postingan ini : Cara Menggabungkan File CSS WordPress (Bag.1), atau bisa menggunakan teknik Menggunakan CSS Yang Berbeda Untuk Halaman Index dan Page/Single, sedangkan untuk gambar kita bisa menggunakan css sprites image, repeat image dan lain-lain.
Di menu Net yang ada di sebelah menu Page Speed kita bisa mengukur berapa waktu loading sebuah halaman web/blog (All), kita juga bisa mengukur waktu loading khusus file gambar (image), css, flash, javascript dan XHR. Caranya klik pada submenu terebut kemudian refresh halaman (tekan F5), maka akan muncul hasilnya seperti contoh gambar ini :

Khusus untuk wordpress self hosting, di samping dengan menggunakan cara di atas, tetap harus memperhatikan performa database (Minimize SQL Queries) baik secara manual atau menggunakan plugin seperti DB Cache Reloaded, W3 Total Cache dan lain-lain.
Ok, kalau ada yang berminat monggo silahkan dipraktekkan, mudah-mudahan bermanfaat dan pengunjung makin betah berlama-lama di blog kita karena kemudahan akses.
saya sudah berusaha mempraktekkannya di blog milik saya yaitu harapan putra blogspot.. tapi koq speed nya mentok sampai 90/100 ya..?? kenapa gak bisa sampai 100/100 …
kendala ada di
Leverage browser caching
[Score: 77/100]
Minimize redirects
[Score: 79/100]
Specify a cache validator
[Score: 0/100]
Defer parsing of JavaScript
[Score: 88/100]
Combine images into CSS sprites
[Score: 89/100]
Minify JavaScript
[Score: 91/100]
Avoid bad requests
mohon dibantu dengan penjelasanya agar saya bisa memperbaiki.. saya menunggu jawabanya… terimakasih
Reply
harapan putra Reply:22-08-2011 at 19:44
mohon penjelasanya dikirim ke email saya : cinta_raffi[@]yahoo.com
saya tunggu ya mas… ,akasih…
Reply
Alwi Reply:22-08-2011 at 21:03
Untuk blogspot pengaturan cache dan validatornya (Leverage browser caching, Specify a cache validator dll) tidak bisa dilakukan karena kita hanya nebeng ke blogger/Google dan kita tidak punya hak akses ke direktori hosting untuk pengaturan melalui .htaccess dll untuk meminimalkan errornya mau gak mau harus ada pengorbanan seperti menghilangkan widget2 penyumbang error dll.
Demikian juga untuk file2 external baik gambar, css, javascript dll kita tidak bisa mengatur cachenya alias hanya mengikuti standardnya dan tidak bisa dicustom, itu bisa dilakukan jika kita menggunakan hosting sendiri spt wordpress dg self hosting atau joomla dll.
Untuk javascript, css dan gambar serta HTML masih bisa kita optimalkan dg melakukan kompress untuk masing2 file tsb.
untuk gambar bisa kita optimalkan baik ukuran (compress) scale atau cara penempatan di file HTML (
Specify image dimensions) dan teknik penggabungan beberapa gambar menjadi satu file (css sprite image) untuk mengurangi jumlah http request.
Jika kita hanya akan menampilkan gambar di web dg ukuran misal 100×100 maka gambar harus kita buat menjadi 100×100 jangan dipaksakan gambar ukuran gede ditampilkan dalam ukuran kecil atau sebaliknya (
Specify image dimensions), teknik ini berpengaruh terhadap loading.
Sepertinya jumlah http request di blog anda banyak banget sampai 165 dan total ukuran halaman juga lumayan besar 1.74 M terkirim ke browser pengguna kira2 672kb ….
Reply
Selamat sore om alwi….
saya baru aja buat website www.naikturun.com dengan tujuan mencari penghasilan tambahan.
saya sedang berusaha mengoptimalkan web saya itu sambil browsing baca sana baca sini, pas bgt ketemu dengan web m-alwi.com
kebetulan web saya lemot bgt bila di akses via modem, setelah saya ikuti saran dari om alwi ternyata memang benar web saya termasuk lemot bila di test dengan fire bug.
tapi masalahnya saya gak ngerti harus gimana…??
mohon penjelasannya om..?
terima kasih sebelumnya
Reply
Performa blog memang sangat sangat penting demi menunjang nasib sebuah blog. aduh nasib blogku kok ngenes ya kang
Reply
performa blog saya memang sangat diluar batas kewajaran ya gan….
Reply
wah..thanks gan pencerahan nya..asikk..neh..bisa di aturulang segala cache sama tampilan nya biar loadingng nya manstapp…
Reply
wah makasih infonya mas., tar coba ah., hhehe
Reply