Yslow: Tool Optimasi Website

Yslow adalah sebuah tool buatan Yahoo! untuk keperluan optimasi website. Tool ini dapat mengetes dan mengukur kecepatan loading website. Dengan memakai beberapa aturan yang jelas, tool ini akan memberi grade dari keseluruhan optimasi setiap halaman website, A sampai F. Semakin tinggi grade yang didapat maka tentunya semakin baik. Yslow awalnya hanya tersedia di firefox, tapi kini para pengguna Chrome dapat juga menggunakannya sebagai add-ons. Setelah terinstall pada browser, tool ini akan tampak disebelah kanan atas dengan ikon seperti speedometer berwarna biru seperti pada gambar berikut:

Ikon Speedometer

Klik ikon tersebut dan akan muncul tampilan sederhana dari tool ini. Yang harus  Anda lakukan hanya menekan tombol Run Test, kemudian tool akan menganalisis dan mengukur kecepatan akses dari halaman website yang sekarang anda akses. Output dari analisanya, terbagi menjadi tiga tab, antara lain:

1. Grade

Tampilan Grade

Pada tab grade, nilai dari aturan-aturan digunakan untuk menilai optimasi halaman web. Nilai yang diberikan beragam mulai bernilai A sampai F, semakin banyak nilai A yang didapat, tentunya semakin baik. Jika terdapat aturan yang memiliki nilai F, maka berarti Yslow tidak menganalisa pada bagian itu. Disamping memberikan nilai pada tiap aturan, tool ini memberikan saran kepada developer apa yang harus dilakukan untuk meningkatkan nilai optimasi pada setiap aturan. Pada bagian atas tab ini, juga ada grade keseluruhan nilai optimasi Yslow, tampak pada gambar bahwa website bisakomputer.com memiliki keseluruhan optimasi C (79).

2. Components

Tampilan Component

Pada tab ini, dapat dilihat semua komponen beserta ukurannya dalam sekali load halaman website. Ada lima jenis komponen yang ditangkap yaitu HTML, file JavaScript, file CSS, file animasi/flash (dari histats), serta file gambar yang disetting dengan CSS. Dari sini developer bisa menganalisa komponen komponen mana saja yang membutuhkan penanganan lebih lanjut.  Pada gambar diatas, tampak bahwa pada halaman home bisakomputer.com memiliki jumlah ukuran keseluruhan komponen 614.5k.

3. Statistics

Tampilan Statistics

Pada tab terakhir, dapat dilihat perbandingan halaman website sebelum terjadi cache komponen web dengan setelah browser menyimpan komponen web pada cache browser. Ini artinya pada bagian ini dapat dilihat statistik perbandingan ukuran total load komponen saat pertama kali diakses dengan akses selanjutnya. Tampak pada gambar bahwa pertama kali halaman bisakomputer.com diakses (sebelum terjadi cache), memiliki HTTP Request sebanyak 71 dan totalnya sebesar 614.5k, sedangkan setelah terjadi cache oleh browser, jumlah HTTP Request nya tinggal sebanyak 6 dan ukurannya tinggal 59.2k.

Rules Yslow

Ada beberapa aturan yang terbagi menjadi 6 aspek (Content, Cookies, CSS, Javascript, Image, dan Server) digunakan Yslow untuk mengukur optimasi halaman website. Aturan-aturan ini adalah,

1. Make fewer HTTP requests

Sebagian besar response time website dihabiskan pada download komponen website seperti gambar, CSS, javascript dan lain-lain. Mengurangi komponen-komponen ini juga akan memperkecil jumlah HTTP Request yang dibutuhkan untuk meload sebuah halaman website. Mengurangi belum tentu dengan menghapus komponen, ada beberapa trik yang dapat kita lakukan untuk memperkecil jumlah HTTP Request dengan mengurangi jumlah komponen website, diantaranya,a. Menggabungkan komponen websiteb. Menggunakan CSS Spritec. Menggabungkan dua atau lebih image menjadi singgle image (Image map). Contoh seperti image navigation bar

2. Use a Content Delivery Network (CDN) 

CDN adalah jaringan server-server diseluruh belahan dunia yang berfungsi untuk menyampaikan konten kepada user yang mengakses website dari klien CDN. Memakai layanan ini, membuat konten web seperti akan di mirror di server cadangan yang terletak di berbagai negara. CDN akan secara otomatis merespon dengan server yang terdekat dengan visitor konten tersebut. Hal ini tentu saja akan mempercepat loading website ketika dibuka oleh user. Ada banyak penyedia untuk layanan ini, berbayar maupun yang gratis. Untuk yang berbayar contohnya adalah CDN Amazon, sedangkan yang gratis dapat menggunakan layanannya cloudflare.

3. Avoid empty src or href

Kebanyakan browser tidak mengabaikan tag yang memiliki attributsrc dan href kosong. Browser akan tetap melakukan request ke server.

4. Add Expires headers

Pada prinsipnya, browser akan men-cache beberapa HTTP Request untuk mempercepat loading web. Sedangkan web server akan menggunakan Expires headers dalam HTTP Response untuk memberitahukan browser berapa lama komponen dapat disimpan di cache browser.

5. Compress components with gzip

Mengkompresi dapat juga mengurangi ukuran paket HTTP Request atau HTTP Response. Sejak HTTP/1.1, web cient sudah mendukung kompresi HTTP Request. Web client mendefinisikan jenis kompresi apa saja yang dapat diterima pada header request-nya.

Accept-Encoding: gzip, deflate

Web server akan mengkompresi HTTP Response yang dapat diterima oleh client dengan melihat Accept-Encoding pada header request. Tapi pada umumnya GZIP merupakan jenis kompresi yang populer dan efektif untuk urusan ini. Hampir 90% internet browser mendukung kompresi ini. Web server apache dapat mengaktifkan module mod_gzip untuk hal ini.

6. Put CSS at top

Letakkan file-file style CSS pada bagian atas dokumen html. Ini bertujuan agar browser lebih cepat untuk merender halaman website. Hal ini akan sangat bermanfaat sekali ketika user memiliki akses koneksi lambat karena halaman website akan tampak secara progresif. Tapi ketika file CSS diletakkan dibagian bawah dokumen, beberapa browser seperti IE akan memblok proses rendering untuk mencegah gambar ulang halaman web jika terjadi perubahan.

7. Put JavaScript at bottom

File-file script seperti javascript akan lebih baik diletakkan dibagian bawah dokumen HTML. Ini untuk mencegah terganggunya proses rendering halaman web karena download file script.

8. Avoid CSS expressions

Yahoo menyarankan untuk tidak menggunakan expressions CSS. Hal ini karena bukan satu atau dua kali ekspresi ini dievaluasi ulang oleh engine css, tapi setiap kali scrollatau setiap kali cursor mouse berubah maka ekspresi ini dievaluasi ulang dan ini akan mengganggu performasi dari halaman web. Contoh ekspresi css adalah sebagai berikut.

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

9. Make JavaScript and CSS external

Hindari meletakkan script atau style dalam dokumen html. Jadikan script dan style dalam file sendiri-sendiri. Hal ini akan bisa dicache oleh browser daripada diletakkan inline dalam dokumen html.

10. Reduce DNS lookups

Frekuensi lookups DNS ternyata juga dijadikan faktor tersendiri oleh yahoo. Ini berarti file-file komponen tidak disarankan tersebar di sembarang tempat atau hostname lain. Yahoo menyarankan agar sekali load halaman website, frekuensi tidak lebih dari 4 lookups.

11. Minify JavaScript and CSS

Minify javascript atau css dapat dilakukan dengan menghilangkan karakter yang tidak perlu seperti menghilangkan karakter spasi dan karakter newline. Ada banyak tool yang bisa digunakan untuk urusan ini diantaranya,

[Javascript] :

1. Packer
2. JSMin
3. Closure compiler
4. YUICompressor (bisa juga digunakan untuk CSS)
5. AjaxMin (bisa juga digunakan untuk CSS)

[CSS]

1. CSSTidy
2. Minify
3. YUICompressor (bisa juga digunakan untuk javascript)
4. AjaxMin (bisa juga digunakan untuk javascript)
5. CSSCompressor

12. Avoid URL redirects

Browser tidak akan merender apapun ketika dia mendapati kode status 301 atau 302 pada header response. Browser kemudian me-redirect halaman ke “Location” yang juga ada pada header.

HTTP/1.1 301 Moved Permanently

Location: http://example.com/newuri

Content-Type: text/html

YSlow menyarankan agar menghindari penggunaan redirect halaman. Hal ini hanya masalah pada user experience, user akan mendapat halaman kosong sampai browser me-request kembali ke “Location” pada header tersebut.

13. Remove duplicate JavaScript and CSS

Cek semua komponen-komponen web agar tidak terjadi duplikasi. Ini sering kali terjadi pada file script javascript seperti jquery.

14. Configure entity tags (Etags)

etag adalah salah satu mekanisme pada HTTP untuk validasi web cache. etag ini dibuat oleh server dan diletakkan di header.

Etag: “686897696a7c876b7e”

Saat browser melakukan permintaan selanjutnya, ETag dikirim kembali ke server melalui field If-none-match pada header.

If-None-Match: "686897696a7c876b7e"

Di server informasi ini akan dicocokkan dengan etag yang ada di server.Jika informasi di server tidak ada perubahan data, maka server hanya akan mengirimkan respon singkat pada header berupa 304 Not modified. Jika terdapat perubahan informasi, server akan mengirimkan respon secara lengkap beserta etag yang baru. Dengan pemanfaatan etag, respon akan lebih cepat pada halaman yang sering diakses oleh user karena tidak perlu mengunduh ulang seluruh respon.

15. Make AJAX cacheable

Tujuan dari aturan ini adalah mengurangi request ke server. Data bisa pertama kali didapatkan dari server, tapi kemudian disimpan di cache browser untuk keperluan request selanjutnya.

16. Use GET for AJAX requests

Yahoo menemukan bahwa penggunaan POST pada ajax request memiliki dua langkah proses, pertama mengirimkan header, kemudian baru mengirimkan data. Sedangkan untuk GET hanya mengirimkan satu paket data, melalui URL. Itulah mengapa penggunaan GET lebih disarankan daripada POST, tapi data yang dikirim lewat GET ini, tidak bisa lebih dari 2k karena panjang max URL yang diperbolehkan hanya 2k.

17. Reduce the number of DOM elements

Ini bertujuan agar struktur DOM yang anda buat pada dokumen html tidak terlalu komplek dan rumit.

18. Avoid HTTP 404 (Not Found) error

Cek semua komponen agar tidak mengembalikan kode status 404.

19. Reduce cookie size

Hapus beberapa data cookie yang sudah tidak digunakan lagi.

20. Avoid AlphaImageLoader filter

Filter alphaImageLoader akan memblok proses rendering dan menghentikan browser ketika sedang mendownload image.

21. Do not scale images in HTML

Hal ini bertujuan agar gambar yang di download browser tidak melebihi apa yang dibutuhkan. Akan lebih baik me-resize gambar di server. Ada banyak tool yang bisa digunakan untuk urusan ini, contohnya adalah timthumb.

22. Make favicon small and cacheable

Setiap halaman web diminta, satu komponen yang selalu ada adalah favicon. Pilih atau buat gambar favicon sekecil mungkin dan pastikan bahwa favicon dapat disimpan di cache browser.

23. Split Components Across Domains

Beberapa komponen seperti image harusnya diletakkan pada domain server yang berbeda. Contoh seperti dokumen html terletak pada domain example.com, sedangkan image terletak pada domain statik.example.com. Keuntungan dari split seperti ini adalah browser dapat men-download semua komponen secara paralel.

Yslow merupakan tool yang sangat powerful untuk mengetes kecepatan loading website. Dengan memiliki aturan-aturan optimasi yang jelas, tool ini dapat menuntun developer untuk meningkatkan website agar lebih optimal. Dan pastinya masih banyak aturan-aturan optimasi yang belum atau tidak digunakan dalam tool ini dalam hal optimasi sebuah website, jika anda memiliki aturan optimas lain diluar yang dibahas disini, anda dapat menuliskannya di halaman komentar. Mari berdiskusi.

*Artikel ini pernah dimuat pada situs bisakomputer.com tertanggal 5 Juli 2012