Optimized website with YSlow Performance Rules

Kenapa perlu melakukan optimasi suatu website? Kapankah kita perlu melakukan optimasi? Seberapa jauhkah optimasi bisa dilakukan? Adakah parameter terukur optimasi website? Kapankah suatu website dinyatakan sudah teroptimasi? Bagaimanakah caranya?
Tulisan kali ini sengaja saya mulai dengan sejumlah pertanyaan. Apakah, kapankah, adakah, dan selanjutnya bagaimanakah caranya?
Artikel ini disusun berdasarkan kisah nyata pengalaman seorang riesurya dalam melakukan optimasi dengan menggunakan YSlow sebagai alat bantu.

Pernyataan dulu, saya bukanlah orang yang mengaku sebagai web optimizer, dan web yang menyajikan artikel ini pun masih dalam proses optimasi berkelanjutan dan jangan tanya saya sampai kapan, karena jawabannya saya juga tidak tahu, mungkin setelah tidak ada lagi yang mengurus website ini??

Kenapa perlu melakukan optimasi suatu website?

Jawabannya mudah saja. siapa sih yang sudah capek-capek bikin web (atau dibikinin) tapi webnya diload dalam waktu lama. Selain mengundang perasaan bosan juga memicu pergerakan mouse dan atau juga keyboard untuk berpindah ke lain hati halaman atau URL.

Untuk mendukung artikel ini saya akan menggunakan alat bantu berupa Firefox addons yang diberi nama Yslow (jangan tanya saya kenapa, lha bukan saya yang bikin addons ini 😛 )

Kapankah kita perlu melakukan optimasi?

Kapan? Kalo saya akan jawab SEKARANG atau NOW. Jangan pernah ditunda. Karena anda tidak pernah tahu kapan anda masih bisa melakukannya. Bukan berarti tulisan ini memaksa anda untuk memprioritaskan masalah optimasi. Lakukanlah meski hanya satu langkah kecil, dan rasakan bedanya.
Optimasi perlu anda lakukan secara berkelanjutan, terlebih bila anda menggunakan CMS yang menyediakan aneka ragam extension dan memasangnya di website. Atau anda baru saja mengganti template dengan yang baru.
apakah anda tergolong orang yang suka memperhatikan bahwa loading website anda makin hari makin lambat? nah itu artinya ada yang perlu dioptimasi, seperti halnya kendaraan yang harus rutin di tune-up untuk memperoleh hasil optimal.

Seberapa jauhkah optimasi bisa dilakukan?

Tergantung seberapa besar keinginan Anda untuk mengoptimasi. Optimasi suatu website dapat dilakukan pada sisi server dan juga sisi klien.
Maksudnya begini, pada sisi server, anda bisa mengecek apakah ukuran file image, atau flash yang dipasang dapat diload secara cepat (setidaknya tidak membuat pengunjung menunggu lama – ingat menunggu adalah pekerjaan yang membosankan, IMO ya).
Atau bisa diperiksa juga apakah ada penggunaan javascipt (yang dirender disisi komputer pengunjung) yang diload disetiap halaman, sedangkan javascript tersebut tidak digunakan (alias mubazir?). Atau apakah anda sudah menggunakan kompresi disisi server (pada PHP ada fungsi gzip yang dapat dimanfaatkan untuk mengkompresi halaman web).

Adakah parameter terukur optimasi website?

Ada. Kali ini saya menggukan YSlow performance rules.
berikut point-pointnya.

  1. Lebih sedikit HTTP Requests
  2. Penggunaan CDN – Content delivery Network
  3. Penggunaan Expire Header
  4. Kompresi dengan Gzip
  5. Meletakkan CSS di bagian atas (head tag)
  6. Meletakan javascript di bawah (sebelum tag penutup body – tergantung kebutuhan juga)
  7. Menghindari penggunaan CSS Expression
  8. Penggunaan Javascript dan CSS external
  9. Mengurangi DNS Lookups
  10. Minimalisir ukuran Javascript dan CSS
  11. Hindari Pengalihan URL (URL Redirects)
  12. Hindari duplikasi javascript dan CSS
  13. Konfigurasi Etag (Entity tag)

Pada YSlow yang terbaru ada sejumlah penambahan seperti

  1. Cacheable AJAX
  2. Penggunaan Get untuk AJAX request
  3. Mengurangi jumlah elemen DOM (
  4. Kurangi ukuran cookie
  5. Penggunaan Cookie-free domains
  6. Hindari AlphaImageLoader images (biasanya untuk PNG Transparan pada browser IE versi lama)
  7. Jangan melakukan scaling image pada HTML
  8. Ukuran favicon yang sekecil mungkin dan cacheable / dapat di cache.

Kapankah suatu website dinyatakan sudah teroptimasi?

Jawabannya relative. Mengingat upaya optimasi sendiri bukanlah pekerjaan yang selesai begitu saja. Teknologi di dunia cyber berkembang pesat. Ketika kali ini kita mulai berkenalan dengan AJAX muncullah upaya optimasi terhadap penggunaan AJAX, maka begitu ada teknologi yang baru – bersiapsiagalah untuk melakukan optimasi lanjutan.
So, optimasi website menurut saya merupakan upaya berkelanjutan tanpa henti dan tentunya memerlukan keteguhan hati, Anda sebagai web developer untuk membuat hasil karya terbaik.

Bagaimanakah caranya?

OK, secara garis besarnya saya akan sajikan berdasarkan YSlow Performance Rules yang sudah dan dapat saya lakukan (no promise I can do it all). Sengaja tidak disajikan secara detail, bukan berarti saya tidak mau berbagi, hanya nantinya anda tidak pernah menemukan metode mana yang sesuai dengan kebutuhan. Lagipula pada keterangan dibawah ini ada sejumlah petunjuk yang bisa dimanfaatkan.

Lebih sedikit HTTP Requests

Periksa berapa jumlah request ke server dari mode YSlow – Net
Kondisi tanpa cache (pengunjung sama sekali baru ke website Anda) dan setelah pengunjung melakukan klik ke halaman lain atau sudah pernah berkunjung sebelumnya
Hints: untuk melakukan simulasi di local server dapat dengan menekan tombol CTRL+F5 untuk menghapus cache browser (kalau anda pakai Firefox akan lebih mudah lagi dengan tombol Clear Cache addon)
Perhatikan bedanya. Pada kondisi awal ketika pengunjung datang dalam kondisi tanpa cache browser, dibutuhkan 17 HTTP Request (panggilan ke server) dengan total ukuran halaman 60.3Kb dan setelahnya hanya 2 HTTP Requests – 5.4Kb.
Berarti ada penghematan sebesar (60.3-5.4)Kb = Kb (91.04%) dan 11 Http Requests (84.61%) .

Hal ini dimungkinkan dan sudah dibuktikan, dengan mengaktifkan fungsi cache pada sisi server (ada banyak metode mulai dari penyisipan pada kode PHP atau menggunakan htaccess untuk server Apache). Pada contoh diatas dilakukan aktivasi cache pada file-file Javascripts, CSS, Images dan favicon dengan menggunakan kombinasi metode penyisipan pada kode PHP dan atau htaccess sesuai kebutuhan.

Penggunaan CDN – Content delivery Network

Saya belum pernah coba. Too expensive untuk website mini macam situs saya ini. Daripada saya membahas hal yang belum pernah saya lakukan, so no-comment dulu.

Penggunaan Expire Header

Expire header. Menambahkan informasi kapan file yang bersangkutan dinyatakan expire / kadaluarsa dari system cache.
Penggunaan expire header ini dimaksudkan bahwa file seperti javascript, css, php dan images tidak perlu dinyatakan sebagai http request bila dalam cache browser masih ada. Dengan demikian jumlah request ke server (http request) akan bisa diminimalisir.

Kompresi dengan Gzip

Nah kalau yang ini tentunya sudah pada tahu kan :D. Untuk pengguna Cpanel hosting ada fitur ini. di sejumlah CMS juga sudah disediakan, tinggal diaktivasi saja. Buat yang tidak pakai CMS? jangan khawatir, anda bisa memanfaatkan fungsi compression atau deflate pada PHP. Untuk non-PHP, sorry banget, saya kebetulan hanya (saat ini) bergaul dengan PHP.
Apasaja yang bisa di kompressi? Secara default, kompressi akan dilakukan terhadap halaman HTML rendered, tapi tahukah anda, bahwa file-file lainpun bisa anda kompresi? Tidak percaya lihat screen shot berikut ini.
Ada yang aneh? Perhatikan baik-baik. Saya melakukan kompresi tidak hanya pada halaman HTML rendered, tapi juga file-file Javascripts dan CSS.

Meletakkan CSS di bagian atas (head tag)

Kenapa harus meletakkan file CSS di bagian atas? (head tag). Jawabannya adalah karena file-file CSS – Cascading Style Sheet ini memegang peranan dalam penentuan tidak hanya tampilan dekorasi tapi juga tidak kalah penting adalah layout (terutama pada tableless design).
Bila diletakkan di bagian atas, maka file-file ini akan dibaca lebih dahulu sebelum masuk ke isi website (content).
Logikanya ya sesederhana itu. Tinggal bagaimana upaya anda untuk mensiasatinya – dalam artian ada kondisi dimana anda harus melakukan oprek terhadap extension yang anda gunakan supaya bisa mendapatkan hasil optimal (kan judulnya optimasi :D)

Meletakan javascript di bawah (sebelum tag penutup body – tergantung kebutuhan juga)

Kondisi ini paling banyak saya temui, dimana javascript seringkali diletakkan di bagian atas bersama-sama pemanggilan file CSS. Apakah salah? Tidak juga. Hanya mengingat bahwa file javascript bersifat client-sided, diolah disisi komputer klien, maka penempatan file-file javascript di bagian atas akan menambah beban loading. Terlebih bila terjadi pemanggilan file javascript tapi file tersebut tidak digunakan dalam halaman yang bersangkutan. mmmm, ini namanya mubazir abiiizzzz.
Meski begitu bukan berarti tidak boleh. Ada suatu kondisi yang memerlukan pemanggilan javascript – hanya bukan sebagai file melainkan dalam bentuk fungsi.Misalnya dalam pemanggilan fungsi suatu teknik AJAX (sorry saya tidak lagi membahas AJAX-masih belajar juga sih)

Menghindari penggunaan CSS Expression

CSS Expression ini merupakan teknik CSS hacking untuk memaksa browser menampilkan layout sesuai keinginan developer. (nanti diedit lagi, kepanjangan-dikejar waktu nih)

Penggunaan Javascript dan CSS external

Penggunaan secara external disini maksudnya file-file Javascript dan atau CSS dipanggil dari lokasi terpisah, baik dari subdomain dan atau domain lain, dengan harapan terjadi paralel request ke server yang berbeda yang berakhir bahagia.
(sorry belum dicoba secara full, hanya secara logika konsep ini menarik untuk dicoba)

Minimalisir ukuran Javascript dan CSS

Meminimalisir ukuran Javascript dapat dilakukan dengan berbagai cara, bisa dengan menggunakan layanan online compression dan ataupun menggunakan script javascript packer, YUI Compression, dan masih banyak lagi.
Konsekuensinya? Bila anda tidak berhati-hati bisa jadi fungsi di javascript tidak berjalan normal dan menimbulkan hang atau bahkan error.
CSS compression. Anda bisa mulai dengan menulis CSS secara efisien dan efektif. Penggunaan selector CSS sesuai kebutuhan, menghindari duplikasi selector, dan tentunya jangan lupa CSS = Cascading Style Sheet, perhatikan kata yang saya garis bawahi “Cascading” alias bertingkat.
Kompresi CSS? anda bisa kreasi dengan menggunakan PHP, ditambah penggunaan kombinasi CSS files akan diperoleh hasil optimal.
(lihat gambar berikut)

Hindari duplikasi javascript dan CSS

Duplikasi tentu saja membawa dampak penambahan HTTP Request ke server. Solusinya anda harus mencermati apakah ada file javascript dan atau CSS yang sama muncul pada suatu halaman web. Bila ada, lakukan investigasi mulailah dari file template, lalu bila tidak ada, periksa juga file-file extension lain yang terlibat dalam proses render halaman yang bersangkutan.
Untuk kasus ini biasanya lebih pada human error daripada engine error 😛

Sudah dulu untuk saat ini, sekiranya ada kesempatan lain akan diedit seperlunya baik penambahan atau revisi. Sudah laper nih, mulai gak konsen nulisnya. 😀

OK selamat melakukan optimasi website anda.

Comments are closed.