Technology

Mengukur Kecepatan Loading Website dengan YSlow

 

Loading...

Jika anda seorang webmaster, tentunya anda sudah familiar dengan tool satu ini. Namanya YSlow. Sebuah modul gratis yang dirilis Mozilla dan bebas diinstal pada browser Firefox anda. Dengan modul ini, anda bisa mengukur kecepatan suatu website dan memberi nilai A-F untuk waktu respon halamannya. Keistimewaannya, di samping untuk mengukur waktu loading yang diperlukan sebuah halaman, YSlow bisa menunjukkan pada anda faktor apa yang kurang di website anda dan memberikan pengarahan tentang poin dan faktor apa saja yang bisa anda perbaiki pada website anda. Berikut adalah petunjuk bagaimana menggunakan YSlow. Selamat mencoba :-)

1.    Unduh YSlow pada URL berikut: https://addons.mozilla.org/en-US/firefox/addon/5369, kemudian instal pada browser Mozilla Firefox anda. Pada beberapa Firefox versi terbaru, anda mungkin juga harus menginstal Firebug agar bisa menampilkan YSlow.

2.    Setelah YSlow diinstal, akses suatu website. Lihat di bagian kanan bawah Firefox anda, anda akan menemukan gambar meteran dan angka-angka. Angka tersebut adalah jumlah waktu loading dari website dalam satuan detik. Pada Firefox versi terbaru, anda harus membuka dulu icon Firebug di sudut kanan atas browser anda untuk mengakses Yslow.

3.    Klik kiri mouse anda pada garis bar bagian atas yang memisahkan YSlow dengan halaman website anda, tahan, kemudian tarik ke atas untuk mendapatkan tampilan halaman YSlow penuh.

4.    Klik tab ‘Performance’. Anda akan mendapatkan penilaian mengenai faktor-faktor apa saja yang mempengaruhi lamanya waktu tampil halaman website anda. Selain faktor penggunaan CDN (Content Delivery Network) – faktor lainnya bisa anda perbaiki segera. Faktor-faktor tersebut di antaranya:

a.    Make Fewer HTTP Requests: HTTP requests muncul setiap kali sebuah halaman website mengambil file dari server. Bisa berupa file script, CSS, gambar, dan Ajax. Bagian ini merupakan area yang paling penting jika menyangkut tentang performance, dan mudah sekali untuk dilakukan pembenahan. Misalnya, memberlakukan sistem cache, mengoptimasi script, CSS, dan memperkecil resolusi file-file gambar.

b.    Gzip Components: Melakukan kompresi pada file JS, CSS, gambar, dokumen HTML, dll. memungkinkan user untuk mengunduh versi yang lebih kecil dari file tersebut, dan menambah kecepatan loading website.

c.    Put CSS at the top: Meletakkan file CSS di atas dokumen anda mengijinkan situs anda untuk melakukan render halaman website sesegera mungkin ketika komponen lainnya, seperti gambar dan script masih berstatus loading.

d.    Put JS at the bottom: Dengan CSS di bagian atas dan file JS di bawahnya, tepat sebelum closing tag <body>, mengijinkan browser untuk merender bagian lain di atasnya (CSS). Sebab cara kerja dari JavaScript adalah memblokir bagian di bawahnya hingga file JS tersebut selesai di download.

e.    Make JS and CSS external: Meletakkan JS dan CSS pada file external memungkinkan browser untuk mencache file tersebut dan membuat halaman website menjadi tampil dengan lebih cepat.

f.    Minify JS: Tidak seperti kompresi gzip biasanya, memperkecil file JavaScript adalah dengan menghapus spasi, tabs, dan berbagai karakter lainnya yang tidak penting untuk memperkecil ukuran file JS tersebut. Tools seperti JSMIN bisa menjadi solusi yang efektif untuk memperkecil JavaScript anda.

g.    Remove duplicate scripts: Membuat browser memproses script yang sama 2 kali bisa memperlambat waktu loading halaman web anda. Cek pada script website anda dan pastikan anda tidak memanggil jQuery atau script lainnya berulang-ulang, 2 atau 3 kali.

5.    Sekarang mari pindah ke tab berikutnya. Yaitu tab Components. Di sini anda bisa menemukan daftar file-file apa saja yang diload browser dan berapa lama waktu yang diperlukan untuk meload masing-masing file tersebut.

6.    Kemudian yang terakhir adalah tab Stat. Tab ini menunjukkan semua HTTP requests baik untuk file yang didownload, maupun file yang dicache. Bagian Empty Cache menunjukkan file apa saja yang harus didownload browser untuk melakukan render halaman. Bagian Primed Cache menunjukkan daftar file yang sudah ada di cache browser pengakses.

Berkunjung yuk ke website-website lainnya. Gunakan YSlow anda untuk mengukur halaman home Google, Facebook, dan beberapa blog/situs favorit anda dan telitilah faktor apa saja yang mempengaruhi lamanya waktu loading halaman website mereka. Misalnya semakin banyak gambar atau JavaScript yang dimiliki sebuah website, maka semakin lama waktu respon yang diperlukan agar website tersebut untuk tampil sepenuhnya.

selamat melakukan optimasi website :-)

Loading...

2 komentar

  • 21 Januari 2012 - pukul 13:34

    YSlow nggak kerja sama Firefox 9!!

    • 24 Januari 2012 - pukul 20:56

      terimakasih tambahan informasinya pak :-)

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *