Cek Performa Blog Dengan Firebug Dan Page Speed

25 Aug. 2010131 comments

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 :

  • Leverage browser caching
  • Leverage proxy caching
  • Minimize DNS lookups
  • Minimize redirects
  • Avoid bad requests
  • Combine external JavaScript
  • Combine external CSS
  • Optimize the order of styles and scripts
  • Parallelize downloads across hostnames
  • Minimize request size
  • Serve static content from a cookieless domain
  • Enable compression
  • Remove unused CSS
  • Minify JavaScript
  • Minify CSS
  • Minify HTML
  • Defer loading of JavaScript
  • Optimize images
  • Serve scaled images
  • Serve resources from a consistent URL
  • Use efficient CSS selectors
  • Avoid CSS expressions
  • Put CSS in the document head
  • Specify image dimensions
  • Specify a character set early
  • SpecifyImageDimensions

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

Firebug dan PageSpeed

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 :

mengukur http request

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.

Artikel Yang Mungkin Berkaitan :

  1. Mengembalikan Element Properties Firefox 3.6
  2. Aplikasi iPad, Download Kungfu Comics Kho Ping Hoo
  3. Aplikasi Pengingat Waktu Sholat
  4. Backup Gratis Nomor Ponsel Dengan Google Sync
  5. Smilla Enlarger, Aplikasi Untuk Memperbesar Ukuran Foto
  6. Free Download Mozilla Firefox 8
  7. Free Download Opera 10.60 Beta
  8. Download Opera Mini 5 dan Opera Mobile 10 Versi Final
  9. Download Mozilla Firefox 5
  10. Software Islami, Aplikasi Penghitung Harta Warisan
  1. 25-8-2010 at 12:02 | #1

    Wah, langsung diposting. Mkasih bgt mas, jadi gak ngrepotin maz alwi untuk cek performa blog…

    Reply

  2. 25-8-2010 at 12:16 | #2

    patut saya cob mas biar blog saya ketahuan loadingnya heheh

    salam

    Reply

  3. 25-8-2010 at 12:46 | #3

    mmm, sepertinya memang harus di cek neh untuk mengetahui performansinya :)

    Reply

    My Little Princess Reply:

    memang perlu dicheck supaya tahu bagaimana blog kita

    Reply

    Bang Iwan Reply:

    Punyaku kayaknya performanya jelek deh…

    Reply

  4. 25-8-2010 at 12:57 | #4

    pokoknya blog harus cepat nggak boleh lelet

    Reply

    Bang Iwan Reply:

    Punyaku harus dibersihin dulu…

    Reply

  5. 25-8-2010 at 15:19 | #5

    baca dari FB langsung menju TKP kang alwi :D

    Reply

    Hendri Reply:

    berarti web ini FB keduaxx dong hehehe

    Reply

  6. 25-8-2010 at 15:19 | #6

    langsung ke TKP mas.. ijin di coba yaa

    Reply

    alamendah Reply:

    Ikutan ke TKP, ah…..

    Reply

    Muhammad Faisal Aziz Reply:

    ikut mengunjungi TKP nya

    Reply

    Hybrid car Reply:

    Weh … ketemu disini juga ya…

    Reply

    munir ardi Reply:

    lama nggak ketemu disini mas alam

    Reply

    Bang Iwan Reply:

    iYA BENNER,.. KANGEN DENGAN SITUASI BALAPAN SEPERTI DULU.

    Reply

    toko barcode Reply:

    segera ngikut ke tkp

    Reply

  7. 25-8-2010 at 19:30 | #7

    Produkti banget nih mas alwi… jadi makin betah nangkring di sini, soalnya up date terus….

    Reply

    Hendri Reply:

    Plus, ada saja postingan yang nyusul… jadi bukin penasaran…

    Reply

    alamendah Reply:

    asalkan penasarannya jangan dibawa sampai mati, Mas

    Reply

    Hendri Reply:

    tapi emang maknyuss kalo berkunjung ke sini mas… aksesnya wuss…wusss…

    Reply

    alamendah Reply:

    jadi ngiri, aku ……

    Reply

    Hybrid car Reply:

    Betul..betul..betul…. top markotop.

    Reply

    munir ardi Reply:

    kan dari dulu mas selalu top

    Reply

    toko barcode Reply:

    iya enak nangkring disini

    Reply

  8. 25-8-2010 at 21:03 | #8

    Punyak saya pasti ngeri Mas…
    Coba nanti saya ceknya.
    Makasih atas semua tips2 yang slalu dimunculkan, khususnya yg berhubungan dengan blog.

    Salam!

    Reply

    alamendah Reply:

    saya juga ikutan ngeri ngebayangin blog kulo, Pak

    Reply

    munir ardi Reply:

    ayo lita ke blog pak mars

    Reply

    toko barcode Reply:

    injih, kolo nggeh tumut ngeri pisan euy

    Reply

    Hybrid car Reply:

    kalau ngeri ya sudah….tinggalin saja…. bangun lagi..

    Reply

  9. 25-8-2010 at 21:33 | #9

    Wah musti ikutan praktek, nih. Kira2 gimana hasilnya, ya?

    Reply

    munir ardi Reply:

    iya ya pak gimana ya blog wp kita

    Reply

    Bang Iwan Reply:

    aku ikutan praktek deh..

    Reply

    toko barcode Reply:

    Praktek kerja lapangan nih, kayak kuliah dulu

    Reply

  10. 25-8-2010 at 23:02 | #10

    pas tak cek ternyata bloggku masih sangat kacau.

    makasih banget. selalu di tunggu posting selanjutnya

    Reply

    toko barcode Reply:

    bayangkan kalo cek punyaku, tatut dulu dah

    Reply

Comment pages
1 2 3 4 7 2014
5+4=? (Wajib diisi)