Optimasi Web Menggunakan Yslow

Optimasi Web Menggunakan Yslow

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…

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

https://addons.mozilla.org/id/firefox/addon/yslow/

sedangkan untuk chrome dapat anda install pada link berikut ini.

https://chrome.google.com/webstore/detail/ninejjcohidippngpapiilnmkgllmakh

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

Component bisakomputer.com

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

Statistik bisakomputer.com

Tampilan Statistics

Pada tab terakhir ini, 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) 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 jumlah HTTP 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 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,
    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.

    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 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 split seperti 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 developer untuk 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.

Tag: , , ,

20 Comments

Leave Comment
  1. d says:

    mas bisa komputer, salut buat mas baru nemu blog mas tentang optimasi blog trim mas aku praktekin salam kenal thepheken@gmail.com bisa minta ymnya sekalian mau bokmark sitenya

  2. d says:

    mas minta linknya dunk sekalian buat nambah link ke logku maklum masih new bie biar di alexa munculnya link 6 gitu masak dri dulu 5 aja

  3. baru tau ada tool seperti ini, oke nih bisa dicoba :)

  4. Informasinya sgt bermanfaat….
    Apakah saya boleh bertanya Mas….????

  5. Makasih banget gan..
    SANGAT MEMBANTU…
    Salam kenal dari http://www.futsalsoccers.com :D

  6. Super Lutein says:

    Waduhh ternyata masih banyak ya yang harus di pelajari untuk improve loading page.. Makasih gan sudah memberikan pencerahan

  7. wonkpaket says:

    masih ga mudeng…tolong jelasin yang detil gan mengenai cara Make fewer HTTP requests. soale blog sy masih dinilai f pada Make fewer HTTP requests. saya tunggu info menarik selanjutnya…

  8. Masih belum mudeng mas bro …, tapi ntar aku akan baca lagi, sekarang bookmark dulu

  9. Masih bingun mas bro, namun setidaknya artikel ini dapat aku pergunakan sebagai bahan referensi untuk aku pelajari ulang. Bagaimana dengan platform blogspot ???

  10. Rumah Gadget says:

    Mantab bener ya strateginya.. makasih gan saya coba dulu!

  11. Ijin saya praktekkan dulu ya kak.. Makasih tutorialnya..

  12. rohim says:

    wah lumayan lengkap postingannya…

  13. Alhamdulillah Yslow gradeku cukup baik jika dicek menggunakan GTMetrix, tapi yang aku merasa aneh itu nilai pagespeed di GTMetrix sama di Google PageSpeed Insight beda jauh, apa parameter yang digunakan juga berbeda ya…

  14. terus belajar…agar blog makin maknyuuus

  15. Makasih pengetahuannya mas, mau tanya mas, mengatasi css delivery itu gimana yah biar blog tambah wuzzz. Mkasih sebelumnya.

  16. NGAWI DIAN says:

    informasinya sangat lengkap dan detail… terima kasih mas…

Write Comment

Your email will not be published. The marked label is required.