Yslow adalah tool buatan
Yahoo untuk optimasi web. Tool ini dapat mengetes dan mengukur kecepatan loading website.
Dengan memakai beberapa aturan yang dipakai, tool ini akan
memberi grade dari keseluruhan optimasi setiap halaman
website, A sampai F. Semakin tinggi grade yang didapat maka
semakin baik. Tool ini awalnya hanya tersedia di firefox, tapi
kini para pengguna Chrome dapat juga menggunakannya sebagai add-ons.
Untuk firefox tool ini dapat Anda temukan di sini
sedangkan untuk chrome
dapat anda install pada link berikut ini.
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 analisa Yslow terbagi menjadi tiga tab yang 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 berartiYslow 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 gradekeseluruhan
nilai optimasi Yslow, tampak pada gambar bahwa websitebisakomputer.com memiliki
keseluruhan optimasi C (79).
2. Components
Tampilan Component
Pada tab ini, dapat
dilihat semua komponen beserta ukurannya dalam sekali loadhalaman
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 ini,
dapat dilihat perbandingan halaman website sebelum terjadi cachekomponen
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) yang digunakan Yslow untuk mengukur optimasi halaman website,
aturan-aturan itu 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
jumlahHTTP Request dengan mengurangi jumlah komponen website,
diantaranya.
a. Menggabungkan komponen website
b. Menggunakan CSS Sprite
c. 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 hrefkosong. Browser akan
tetap melakukan request ke server.
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 headerrequest-nya.
1
|
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
mengaktifkanmodule 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 kaliscrollatau setiap kali
cursor mouse berubah maka ekspresi ini dievaluasi ulang dan ini akan mengganggu
performasi dari halaman web. Contoh ekspresi css adalah sebagai berikut.
1
|
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 toolyang
bisa digunakan untuk urusan ini diantaranya,
Untuk javascript bisa menggunakan :
a. Packer
b. JSMin
c. Closure compiler
d. YUICompressor (bisa juga digunakan untuk CSS)
e. AjaxMin (bisa juga digunakan untuk CSS)
Sedangkan untuk CSS dapat menggunakan:
a. CSSTidy
b. Minify
c. YUICompressor (bisa juga digunakan untuk javascript)
d. AjaxMin (bisa juga digunakan untuk javascript)
e. 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.
1
2
3
|
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.
1
|
Etag:
“686897696a7c876b7e”
|
Saat browser melakukan
permintaan selanjutnya, ETag dikirim kembali ke server melalui field
If-none-match pada header.
1
|
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 keperluanrequest 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 maksimal 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 splitseperti ini adalah browser dapat
mendownload semua komponen secara paralel.
Kesimpulan
Yslow merupakan tool yang
sangat powerful untuk mengetes kecepatan loading website.
Dengan memiliki aturan-aturan optimasi yang jelas, tool ini
dapat menuntun developeruntuk meningkatkan website agar lebih
optimal. Tentunya masih banyak aturan-aturan optimasi yang belum atau tidak
digunakan dalam tool ini, jika anda memiliki aturan optimas
lain diluar yang dibahas disini, anda dapat menuliskannya di halaman komentar.
Mari berdiskusi.