Technology

Optimasi Penulisan Code untuk Maksimalkan Kecepatan Website

 

   

Tahukah anda bahwa sebagai programmer, kebiasaan menulis code bisa sangat berpengaruh pada kecepatan tampilnya website ketika proses loading. Berikut adalah beberapa aturan yang jika diterapkan pada kebiasaan anda, maka mungkin saja anda bisa menghasilkan website yang cepat loadingnya.

Penulisan CSS & Javascript

Jika website anda dilengkapi dengan komponen CSS maupun JavaScript, maka sangat disarankan agar penulisan kode-kode komponen ini disatukan sesuai jenisnya. Misalnya file-file CSS yang tersebar dijadikan satu file CSS saja, demikian juga dengan file JavaScript. Dengan menjadikan komponen-komponen yang terpisah jadi 1 file, anda bisa menghemat request HTTP yang dikirim ke server.

Selain itu, anda juga harus memperhatikan penempatannya. Sebaiknya file CSS dipanggil pada bagian paling atas tag <head>. Sedangkan untuk file JavaScript, diletakkan di bagian paling bawah tag <body>. Mengapa demikian? Alasannya karena file JavaScript tidak memperbolehkan download secara paralel, sehingga dia akan menghentikan semua loading di bawahnya sebelum JavaScript selesai di download. Beda dengan file CSS yang pada dasarnya sangat ringan sehingga cepat di download browser.

Hindari IFRAME, ganti dengan AJAX sederhana

Pada umumnya, ketika ingin meelakukan include halaman dari website lain, maka tag <iframe> mungkin jadi salah satu opsi yang tampaknya nyaman. Namun ternyata di balik kenyamanan tersebut, teknik IFRAME dapat memakan 2x lipat loading website kita. Karena IFRAME akan mengirim request juga ke halaman website yang kita include ke dalamnya.

Sekarang di samping menggunakan IFRAME, anda bisa menggunakan AJAX sederhana untuk include halaman. Lewat AJAX, anda bisa include website lain ke website Anda tanpa proses yang memberatkan server, bahkan seolah tidak ada include sama sekali. Bagaimana bisa? Penjelasan sederhananya adalah dengan AJAX, maka proses akan dilewatkan pada background sehingga seolah tidak mempengaruhi proses load awal di website anda. Berikut salah satu contoh penggunaannya:

<script>
function request (page, target, postData){
var div = document.getElementById(target);
var sUrl = page;
div.innerHTML = 'loading';
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
  http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  http = new XMLHttpRequest();
}
http.open("POST", sUrl, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", postData.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Call a function when the state changes.
	if(http.readyState == 4 && http.status == 200) {
		div.innerHTML = http.responseText;
	}
}
http.send(postData);

}
</script>
</head>
<body onLoad=”request(‘http://url yang akan di load’, ‘content’, ‘’);”>
<div id=”content”></div>
</body>
</html>

Gunakan fungsi Flush Output Buffering

Ketika browser mengajukan request ke server, server perlu waktu sekitar 200-500ms untuk memberikan respon berupa halaman HTML. Selama waktu tersebut, browser anda dalam keadaan idle atau tidak melakukan proses apapun. Nah, tempo tersebut dapat kita manfaatkan untuk memerintahkan browser melakukan proses lain secara simultan. Yaitu dengan fungsi flush () pada PHP. Caranya cukup sederhana, anda tinggal meletakkan fungsi tersebut di antara tag</head> dan <body>

... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->

Minimalkan penggunaan gambar / image

Penggunaan banyak image dapat mempengaruhi proses request browser, sehingga perlu sekali untuk diminimalisir. Namun jika memang pada dasarnya website anda memang membutuhkan banyak komponen gambar, maka teknik CSS Sprite mungkin bisa membantu anda. Yaitu menggabungkan komponen-komponen gambar jadi satu file image, kemudian definisikan masing-masing koordinatnya pada CSS dan tampilkan satu per satu. Teknik ini memang bisa dibilang tricky dari sisi programing. Tetapi anda membuat server bekerja dengan lebih ringan karena user hanya perlu download satu file Sprite saja di samping harus download banyak file-file gambar yang terpisah-pisah.

Mengenai ukuran dan kualitas gambar

Untuk file gambar kaya warna seperti foto, dsb, gunakan format .gif atau .jpg. Sedangkan untuk icon, dan komponen-komponen lain yang tidak butuh warna banyak, gunakan format .png untuk mengecilkan ukurannya.

Selain itu, hindari proses resize pada HTML. Yaitu penggunaan atribut width & height pada tag <img> untuk menampilkan image di HTML anda. Karena proses render nya jadi lebih berat. Maka resize gambar-gambar anda lewat Photoshop / Windows Paint dulu dan tampilkan sesuai ukurannya yang aktual.

Berat: <img src=”image.jpg” width=”100” height=”100” />
Ringan: <img src=”image.jpg” />

Gunakan GZIP Compression

Pastikan dulu jika mod_gzip di server hosting anda enable. Di Jagoan Hosting Indonesia, untuk server-server yang berjalan dengan Litespeed, module tersebut sudah enable karena sudah otomatis dijalankan oleh Litespeed. Fungsi mod_gzip sendiri adalah untuk kompresi website kita secara otomatis, agar jadi lebih ringan. Untuk penerapannya, paste kode berikut pada file .htaccess anda di public_html.

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Gunakan HTTP Caching

Seringkali website kita menggunakan banyak image, CSS & JavaScript. Jika tidak diatur dengan baik, file tersebut bisa memberatkan proses request HTTP oleh browser pada server. Maka manfaatkan HTTP Caching melalui htaccess untuk meringankan proses request HTTP.

HTTP Caching bekerja dengan menyimpan data sementara sehingga bila file-file tersebut di load berulang kali, browser tidak perlu terus-terusan request ke server, melainkan cukup sekali request saja ke local cache komputer user.

Penerapannya sangat gampang. Anda bisa kopi paste saja kode berikut pada file .htaccess anda di bawah public_html. Anda juga bisa edit lama cache akan expired dan apa file extention-nya.

<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 14 days"
	ExpiresByType text/html "access plus 14 days"
	ExpiresByType image/gif "access plus 14 days"
	ExpiresByType image/jpeg "access plus 14 days"
	ExpiresByType image/png "access plus 14 days"
	ExpiresByType text/css "access plus 14 days"
	ExpiresByType text/javascript "access plus 14 days"
	ExpiresByType application/x-javascript "access plus 14 days"
</ifModule>
<ifModule mod_headers.c>
  <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "max-age=2592000, public"
  </filesMatch>
  <filesMatch "\\.(css|css.gz|gz)$">
    Header set Cache-Control "max-age=604800, public"
  </filesMatch>
  <filesMatch "\\.(js|js.gz|gz)$">
    Header set Cache-Control "max-age=216000, private"
  </filesMatch>
  <filesMatch "\\.(xml|txt)$">
    Header set Cache-Control "max-age=216000, public, must-revalidate"
  </filesMatch>
  <filesMatch "\\.(html|htm|php)$">
    Header set Cache-Control "max-age=1, private, must-revalidate"
  </filesMatch>
</ifModule>

<ifModule mod_headers.c>
  Header unset ETag
</ifModule>
FileETag None
<ifModule mod_headers.c>
  Header unset Last-Modified
</ifModule>

Demikian beberapa tips yang bisa saya berikan. Semoga bermanfaat ;-)


Artikel Terkait

6 komentar

  • 19 December 2012 - pukul 16:49

    Makasih banyak mas, ilmunya sangat membantu sekali :).

  • 19 December 2012 - pukul 18:55

    sama sama pak.
    semoga bermanfaat.
    :)

  • 20 December 2012 - pukul 18:26

    Baguss sob blognya update slalu ya…………

  • 5 February 2013 - pukul 16:23

    Keren …. selalu update gan.. :)

  • 2 March 2013 - pukul 13:30

    Wah terima kasih banget ya atas tutorialnya, saya izin mengcopas script htaccessnya dan saya sedikit modifikasi sangat memperngaruhi loading website menjadi ringan.

  • 10 November 2014 - pukul 14:49

    terimakasih untuk ilmu yang bermanfaat ini yah mas..
    sangat membantu sekali mas

Berikan Komentar

Your email address will not be published. Required fields are marked *