Cara Mempercepat Loading Website

Sebagai seorang programmer web, sudah seharusnya kita tidak hanya memperhatikan fungsional dan tampilan web saja. Performa dan kecepatan website juga harus diperhatikan karena website atau aplikasi berbasis Web  bekerja dengan konsep mengirim data  bolak balik dari komputer client ke server, makin lama loadingnya, makin banyak user yang kabur bahkan sebelum loading halaman website selesai. Dalam artikel ini saya akan menjelaskan beberapa tip dan teknik bagi Programmer dan Web master dan Desainer (perancang Layout)  agar loading halaman menjadi lebih cepat. Ingat!, artikel ini bukan untuk end user !

Para developer di Google menganggap bahwa Kecepatan loading website itu adalah feature, itulah mengapa Semua layanan Google bisa diakses dengan sangat cepat bahkan pas koneksi kita sedang lemot. Produk yang paling menonjol yang menjadikan kecepatan adalah fitur adalah Google Instant, Belum selesai kita mengetik query, hasil sudah muncul duluan, itulah yang namanya fitur. Dulu, Para developer web menggunakan konsep asal loading website kurang dari 5 detik, itu masih normal, sekarang User makin tidak sabar, loading lama, tutup tab browser. Penelitian terbaru dari Google bahkan menyatakan jika loading website lebih lama dari kedipan mata maka user akan menutup browser yang  tentunya menjadi pemicu bagi para developer untuk memperhatikan perkara ini.

Sebagian developer web tidak pernah memikirkan bahwa kecepatan loading halaman itu sangat penting, Sebagian lagi bahkan tidak pernah melakukan testingsama  sekali karena beranggapan waktu di test di localhost kenceng(Crap!). Model programmer gini yang membuat internet makin lambat. Apalagi asal “yang penting ga error!”. kalau model programmer gini keknya perlu di lempar ke laut aja deh. Agar anda tidak dijuluki sebagai “bad Developer /Bad Webmaster/Bad designer” Silahkan di cek untuk point point berikut ini.

Tips Untuk WebMaster

Letak server dan Target User

Peletakan server cukup menentukan kecepatan website. Jika anda membuat website untuk pengguna di indonesia, gunakan server IIX yang berada di Jakarta, Tidak perlu jauh jauh di letakan di Server amerika. Jika target anda adalah User internasional baru letakan server di Amerika.

Webhosting

Hosting murah sekarang bertebaran dimana mana, bayangkan dengan uang 5000 perak perbulan anda bisa hosting website. Murah banget bukan, bahkan itu lebih murah dari pada makan sekali di Yogyakarta. jika anda menggunakan model hosting seperti ini, umumnya website anda di letakan satu server dengan ratusan atau ribuan website lain, Artinya masing masing website akan berebut resource yang ada (RAM, Prosesor, Bandwidht), Ciri ciri server overload karena share hosting adalah seringya website anda down atau timeout.

Kalau anda ingin performa bagus, Buat server sendiri atau gunakan Dedicated hosting. Ini salahsatu langkah meningkatkan performa website.

Gunakan Reverse Proxy

Jika website anda sering diakses oleh ribuan orang perharinya dan server  sudah overload dalam bekerja, Gunakan reverse proxy. Reverse proxy adalah proxy yang dipasang di depan Webserver. Jika content sudah ada di proxy, maka Webserver tidak perlu minta PHP untuk mengambil data di MySQL (dengan asumsi server anda dibangun dengan PHP/MySQL).

Perhatikan Ukuran dan dimensi Gambar

Banyak pengelola website asal upload gambar untuk artikel atau gallery, padahal mau di tampilkan dalam bentuk thumbnail (ukuran 150×150) px, standarukurannya dibawah 10k, tapi gambar yang di upload ukuran wallpaper (1204×768), yang rata rata ukurannya diatas 100kb. Bayangkan ada 5 gambar di halaman website tersebut. Maka loading websitenya akan menjadi 10x lebih lama. Herannya, kebanyakan website di Indonesia sebagian besar seperti ini . CRAP!.

Letakan File di server sendiri

Kadang, untuk menghemat space Hosting, para webmaster mengupload materi, file, gambar dan file di pihak server lain (misal flickr atau picassa). Perlu diketahui, makin tersebar letak file anda, maka makin lama loading website karena DNS server harus meminta alamat file berkali kali. Sebiasa mungkin beli space yang cukup dan letakan file di server hosting sendiri.

Tips untuk Developer

Bad Coding

Ini yang sering saya lihat, kita semua tahu bahwa kebanyakan website sekarang adalah website dinamis yang dibangun dengan bahasa PHP, ASP atau JAVA. Saya akan menunjukan Bad code dengan Good code

Bad code

print "<h2>;Data admin </h2>";
while($rows=mysql_fetch_object($result)){
echo '<tr>';
echo '<td> $no ';
echo '</td>';
echo   ' $rows ->; nama </td>';
echo '<td>; $rows ->; username</td>';
echo '</tr>';
$no++;
}

Good Code

<h2>Data Admin</h2>
<?
while($rows=mysql_fetch_object($result)){
?>
<tr>
	<td><?=$no ?></td>
	<td><?=$rows ->nama;?></td>
	<td><?=$rows ->username;?></td>
</tr>
<?
$no++;
}
?>

Coba anda perhatikan dua gaya coding diatas? Saya sering melihat Bad Coder meletakan seluruh output , Bahkan output yang tidak perlu diproses dalam PHP kedalam “print” atau “echo”.  Selain sulit didebug dan dibaca, koding gaya Bad code ini juga membuat pemrosesan makin lama, perhatikan Good code.,Kode akan terlihat lebih rapih dan mudah dibaca, selain itu syntax standar html juga tidak perlu di proses oleh php yang efeknya akan mempercepat loading website. Saya heran orang bodoh mana yang mengajari koding gaya pertama. CRAP!

Bad SQL Query

 Selain pengkodean yang jelek, Banyak juga programer asal saja dalam mengambil query , sebagai contoh, ada tabel user dengan kolom kd_user,nama, username, password,alamat, tgl_lahir,no_hp (ada 8 colom) . Si programmer ingin menampilkan cuman username . Apa Querynya? Sebagian Bad Programmer atau programer pemula akan menulis query

Select * from user

Koding yang baik , tuliskan nama kolom yang akan ditampilkan

select username from user.

Mungkin jika pengakses website tersebut cuman dibawah 100 tidak akan menyebabkan masalah, bayagkan anda mengkoding dengan gaya pertama untuk membuat sistem yang dipakai ribuan orang yang mengakses bersamaan? Berpikirlah kedepan, jangan cuman asal jalan.

Minifikasi atau compress file web

Langkah ini dilakukan untuk membuat nama file lebih kecil, sebagai contoh, jika anda membuat website dengan jquery, gunakan versi untuk produksi biasanya mempunyai frase -min- di nama filenya, misal jquery-1.6.1-min.js. lihat perbandingan yang di kompres di gambar yang langsung saya ambil dari situs JQuery.

Dua tool yang bisa anda pakai untuk mengkompes file javascript adalah Closure tool dari Google atau layanan http://jscompress.com/. Bandingkan ukuran file sebelum dan sesudah di kompres? tentunya yang di kompres akan jauh lebih kecil yang artinya akan mempercepat loading website anda.

Gunakan Google Chrome Developer Tool untuk melihat performa website

Anda tidak perlu menginstall tool tambahan, cukup install Google chrome dan buka dari menu tool->Developer tool, manfaatkan fitur Audit kemudian reload halaman anda lagi. Chrome akan menganalisa apa yang menyebabkan website anda lambat dan memberi rekomendasi untuk anda  apa yang harus anda lakukan .

Bentuk rekomendasi yang umum adalah membuang kode CSS yang tidak terpakai dan mengkompres file Javascript.  Tips yang diberikan tergantung website anda, silahkan dicoba sendiri.

Tutorial cara menggunakan tool ini bisa anda dapatkan di http://code.google.com/intl/id/chrome/devtools/docs/overview.html

Tips untuk Desainer

Tips untuk desainer hanya dua (itu yang saya tahu) jangan gunakan Table layout tapi Gunakan CSS layout. Jangan menampilkan semua content di homepage, cukup tampilkan menu yang dirasa penting di depan dan gunakan gambar sesedikit mungkin didepan(lihat Google, twitter, facebook atau 4shared.com) itu adalah contoh layout yang minimalis tapi cantik dan fungsional .  Saya bukan desainer, jadi saya ga mau ngomong banyak disini, nanti malah di hajar ma para desainer  :-P.

Sampai sini dulu, semoga tip di atas bermanfaat dan website anda makin cepat. Happy Coding and be Good Coder!.