Tips Optimalisasi Website

Berdasarkan artikel dari yahoo developer network yg berjudul “High performance websites”. Pada artikel ini disampaikan 13 hal yang dapat mempercepat halaman website kita. Pada kesempatan ini penulis mencoba untuk mebahasnya:

Mengurangi jumlah HTTP Requests.
Setiap file yang diminta ke server itu merupakan sebuah request .Artinya jumlah file yang di request ke webserver harus di kurangi. Selain mengurangi jumlah file kita juga bisa melakukan cache pada file sehingga secara tidak langsung kita dapat mengurangi HTTP rquest, karena file langsung didapat dari cache browser. Jika anda menggunakan apache maka dapat menggunakan module mod_expire untuk mencache file-file seperti image, swf atau contents website. Berikut ini adalah cara untuk menggaktifkan mod_expire.

LoadModule expires_module modules/mod_expires.so

Setelah diaktifkan maka kita tinggal membuat sebuah file .htaccess untuk mencache image, swf dan javascripts selama 1 bulan menggunakan mod_expire
ExpiresActive On ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpg A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType application/x-javascript A2592000 ExpiresByType application/x-Shockwave-Flash A2592000

Jika anda memiliki beberapa file Javascript dan CSS sebaiknya file tersebut dijadikan satu file js dan css saja.
Menggunakan Content Delivery Network
Ya, penggunaan CDN memang dapat membantu mempercepat performa web kita. kita dapat menggunakan https://www.cloudflare.com/ jika ingin menggunakan CDN secara gratis .
Menambahkan Expires Header
Expiry tags akan membantu browser untuk mengenali mana content yang harus di cache dan tidak. Jangan sampai ketika kita melakukan update terapi tidak terbaca di client karena yang di load adalah yang tersimpan di cache. kita dapat menambahkan expories header di HTTP headers. adapun contohnya dalam php adalah
1 2 3 4
< ?php header("Expires: ".gmdate("D, d M Y H:i:s", time()+600)." GMT"); header("Cache-Control: max-age=600"); ?>
This will set the expiry time 600 seconds from the time of content delivered.

Gzip Components
Prinsip kerja Gzip Componen adalah dengan mengkompres output yang akan di kirim ke browser, sehingga ukuran data yang dikirim menjadi lebih kecil. Browser yang digunakan harus punya kemampuan untuk melakukan decompress. Sekarang rata-rata semua browser sudah mensupport fitur ini. Untuk mengaktifkan fitur ini kita harus menambah konfigurasi berikut di server kita

LoadModule deflate_module modules/mod_deflate.so

Setelah diaktifkan maka kita dapat menggunakan dengan menambah konfigurasi beriku di file .htaccess .
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-javascript

atau bisa juga melakukannya di sisi PHP dengan menggunakan ob_start(“ob_gzhandler”) contoh :

< ?php
//gzipjs.php
ob_start("ob_gzhandler");
header("Content-type: text/javascript; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 3;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
include(urldecode($_GET['js']));
?>

penggunaannya adalah

1	<script type=”text/javascript” src=”gzipjs.php?js=prototype.js” ></script>

*jangan gunakan code diatas untuk production.. sangat berbahaya.. harus dimodif dikit

Meletakkan script CSS pada bagian atas
Meletakkan code css pada bagian header dapat mempercepat loading website karena di css biasanya ada komponen lain seperti gambar yang akan di load, jadi dengan meletakkan disebelah atas dapat membuat website muncul secara progressive
Memindahkan script javascript ke bawah
Masalah yang muncul ketika javascript berada diatas mereka memblock download script lain sehingga semua script di download secara serial.
Menghindari penggunaan CSS Expressions
CSS expressions adalah salah satu cara untuk menampilkan css secara dinamis. contohnya
```
      background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
```
code diatas akan di eksekusi berulang2 kali sehingga akan menggangu performa dari website.
Mengurangi DNS Lookups
Mengurangi DNS lookup dapat mempercepat akses.. jadi caranya pergunakanlah nama domain yang sama untuk semua resource yang ada di web kita..
Minify JavaScript and CSS
Ide awalnya adalah dengan membuang semua karakter yang tidak berguna pada code sehingga ukurannya menjadi lebih kecil.
Avoid Redirects
Hindari penggunaan redirect karena akan terjadi request bolak-balik antara client dan server
Buang Scripts yang sama
Jika kita memiliki script yang sama, maka hilangkanlah karena script ini tersebut akan tetap di load oleh client jadi akan membebani client

Referensi
1. http://betterexplained.com/articles/speed-up-your-javascript-load-time/
2. http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method
3. http://httpd.apache.org/docs/2.0/mod/mod_expires.html
4. http://httpd.apache.org/docs/2.0/mod/mod_deflate.html
5. http://developer.yahoo.com/performance/rules.html