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

 

Penulis: Candra Adi Putra

CandraLab Studio adalah Software house di Yogyakarta, Indonesia yang fokus ke aplikasi Mobile (Android) dan Web . Hubungi saya di candraadiputra(at) gmail.com

Tagged on:     

7 thoughts on “Cara Mempercepat Loading Website

  • 17 December , 2013 at 10:03 am
    Permalink

    Oke Bang. saya mau tanya beneran bisa berbeda ya gaya bad code ama good code, nanti saya coba deh.

    saya cuman mau revisi kata2 ini
    Saya heran orang bodoh mana yang mengajari koding gaya pertama. CRAP!

    sebenernya gk ada Programer yg bodoh mas, kalo bodoh dia gk bisa jadi programer. Yg ada itu belum tahu aja. Tolong di bedakan.

    Sebenernua Web ini manarik. Cuman terkadang Kata-katanya kadang Kontroversi.

    So Keep Bloging

    Reply
  • 1 March , 2013 at 9:35 am
    Permalink

    mas saya membuat situs jejaring sosial menggunakan script jcow namun fiturnya kurang lengkap lalu saya menggunakan phpfox fitur yang bagus dan lengkap tetapi berat dalam loading apakah script phpfox bisa di kompres

    Reply
  • 3 February , 2013 at 6:16 am
    Permalink

    mohon pencerahan … kalo ngomongin kecepatan akses. tolong buktikan berbedaan kecepatan (signifikan) akses antara penggunaan tabel layout dengan CSS layout, tentunya dengan perbandingan yg sama ya (isi, gambar, proses jika ada, server dan kecepatan koneksi yg sama) kalo sangat signifikan aku akan rombak semua web bikinanku mencadi CSS layout… sedikit bocoran masalah CSS layout yaitu kadang tidak sama (khususnya posisi) pada browser yg berbeda, tolong bandingkan dengan penggunaan table pasti dijamin sama, didalam kontek kecepatan akses designer punya trik sendiri kok dalam mendesign web, kalo menurut aku penggunaan CSS layout lebih berfungsi untuk kemudahaan editing…. saya tidak terlalu cinta kepada penggunaan table atau juga full CSS, saya lebih melihat kondisi dan fungsional saja. kalo layak menggunakan table pasti saya gunakan table dan sebaliknya jika layak menggunakan css saya akan gunakan itu (layak = tidak bermasalah pada beda browser), sekali lagi mohon pencerahan

    Reply
    • 3 February , 2013 at 10:03 am
      Permalink

      sebenarnya bukan hanya masalah kecepatan, tapi juga kemudahan dalam maintainance website dikemudian hari. Dari awal tabel tidak didesain untuk melayout halaman. Penggunaan tabel didesain untuk menampilkan data tabular(seperti data dihalaman admin).

      Jika anda ingin mencoba lihat perbedaannya,silahkan gunakan Yahoo slow atau Chrome developer tool. Disana akan tampak lama bukan pada saat di akses, tapi saat di render di halaman browser client.
      dowload di http://yslow.org/

      dan yang lebih penting, dengan CSS, ada pemisahan antara Layout/style dan content. HTML hanya mengurus content struktur dokument sedangkan CSS mengurus layout. Jika anda gunakan Table menjadi layout halaman, tidak ada pemisahan keduanya. Pernah lihat website yang bisa mengubah thema secara dynamis (wordpress,blogger,joomla), semuanya emnggunan CSS dan saya belum pernah lihat ada website berbasis tabel bisa diubah layoutnya secara dinamis tanpa menggunakan CSS.

    • 3 February , 2013 at 9:19 pm
      Permalink

      hahahah mohon lihat lagi judul yang anda tulis deh…. “Cara Mempercepat Loading Website”, hahahah persis dong dengan yg saya tuliskan bahwa CSS itu justru lebih maksimal fungsinya untuk maintenance dan kemudahan merubah kan ? …. sorry yang anda jawab itu out of contact dari yang anda tulis sendiri… saya mebahas hal seperti ini karena memang saya membaca kontek bahasan yg anda tulis “Cara Mempercepat Loading Website” alias kecepatan akses halaman website, bukan ngebahas maintenance atau kemudahan merubah…. heheheh terimakasih penjelasan dan pencerahanya .. 2 jempol

  • Pingback: Cara Mempercepat Loading Website : Desain Website & Blog

  • 17 April , 2012 at 12:13 pm
    Permalink

    wohoooo baru nyadar nih html yang disisipkan di dalam php menggunakan echo bisa memperlambat loading. padahal selama ini sering bngt koding dengan gaya bad programmer gt..ha ha.

    thanks bro artikelnya keren

    Reply

Tinggalin komentar dong!