www.gecko.web.id
   Resource Untuk Pengembang Web, PHP, CSS, MySQL, ajax.

   Home · Web Performance · 14 hal untuk membuat website yang cepat diload

21
May ’07
14 hal untuk membuat website yang cepat diloadTopik: web-performance | Tags: web, optimation, load, page, loading, halaman, dll

Kali ini kita membahas bagaimana cara mengoptimalkan website kita agar cepat diload. Hal ini saya rasa perlu karena banyak user yang koneksi internetnya masih lambat seperti penulis sendiri. Atau paling tidak kita memberikan pelayanan yang prima ke user. User kita jangan disuguhi halaman yang isinya .. pls wait a minutes. loading in progress.. Wew.. siapa juga yang mau menunggu. Di samping itu, menurut yang pernah saya baca "kecepatan loading suatu halaman berbanding lurus dengan jumlah pengunjung". Maaf penulis lupa linknya, tapi kalau dipikir memang masuk akal juga. Pembaca yang kelamaan menunggu loading halaman, pasti tidak sabar dan kebanyakan langsung menutup halamannya.

Pada artikel kali ini penulis mencoba menjelaskan 14 aturan dasar agar website kita cepat diload.

  1. Perkecil jumlah HTTP requests

    2. Hindari pemakaian image map server site dan perkecil jumlah script hal-hal lain yang merequest ke server

  2. Gunakan CDN

    3. Content Delivery Network (CDN) adalah networ komputer yang terhubung bersama-sama melalui internet yang bekerjasama untuk mengirimkan content kepada user. Berikut situs-situs dan penyedia layanan CDNnya:

    .CDN situ-situs besar

  3. Tambahkan Expires header

    Browser akan mencocokkan apakah cache di browser sudah kadaluarsa apa belum dan ini akan memakan waktu apabila ternyata cache sudah kadaluarsa. Untuk mencegah ini tambahkan expires date.

  4. Gzip components

    5. HTML, XML, CSS dan JSon (selain gambar dan PDF). Penulis menggunakan kode berikut di baris atas untuk mengcompress halaman blog ini.

  5. Tempatkan CSS di bagian atas

    6. Karena CSS akan menghalangi proses render di Internet Explorer. Untuk mencegah hal ini letakkan CSS di <HEAD> HTML Anda dan gunakan external link ke CSS Anda jangan menggunakan @import.

  6. Pindahkan Java Script ke bagian bawah

    7. Akibat dari javascript diletakkan di atas adalah adanya blank screen berwarna putih yang lama saat loading dan tertundanya loading isi halaman. Java Script tidak akan bekerja apabila obyek yang dikenai efek script belum selesai diload. Contohnya apabila kita menambahkan tool tips di links-links kita. Apanya yang akan diberi tools tips, jika links itu sendiri masih diload oleh browser. Belum lagi loading CSS dari tool tips itu sendiri.

    Dan kenyataanya Java Script menghalangi browser melakukan parallel downloads dan menghalangi rendering semua content yang berada di bawahnya (CSS, HTML, image, dll). Pada keadaan normal (tidak ada Java Script) image akan didownload secara parallel sedangkan jika ada Java Script di bagian atas maka Java Script akan menghalangi proses ini, sampai keseluruhan kode java script selesai diload.

    jika script diletakkan di baris atas

    Untuk menghindari hal ini sebisa mungkin pindahkan java script ke bagian yang paling bawah. Tentunya tidak melupakan perimbangan agar java script tersebut bisa bekerja.

  7. Hindari CSS expressions

    CSS expressions dikenalkan pertama kali di Explorer 5.0 dan memperbolehkan kita untuk memanggil JavaScript expression ke dalam CSS. Sebagai contohnya adalah CSS expression untuk menentukan posisi elemen div berdasarkan uskuran browser. Menjanjikan memang, tapi silahkan Anda coba sendiri di browser Anda.
    Berikut contohnya:

    CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically.
    High Performance Web Sites by Steve Souders

    Masalah yang timbul dengan penggunaan CSS expression adalah, CSS expression ini dijalankan berkali-kali, lebih dari yang diharapkan. Tidak hanya dijalankan saat halaman dirender dan diresize tetapi juga saat halaman di scroll bahkan saat user mengerakkan mouse di halaman web tersebut.

  8. Buat JavaScripts and CSS external

    Alasan membuat Script dan CSS external adalah agar dapat dicache oleh browser. Dengan demikian halaman akan cepat diload apabila user kembali lagi ke halaman kita.

  9. Mengurangi DNS lookups

    10. Alasan utamanya adalah DNS lookup bisa menghalangi browser untuk melakukan parallel downloads.

  10. Perkecil ukuran file Java Script

    11. Dengan salah satu javascript compression tool di bawah ini, Anda bisa menghilangkan whitespaces yang tidak berguna dari file javascript. Dengan demikian ukuran file menjadi kecil dan akan mempercepat waktu download. Dengan tool tersebut Anda juga dapat menghilangkan komentar pribadi terhadap script yang telah Anda buat.

    Berikut tool yang bisa digunakan untuk memperkcel ukuran java script Anda:
    - http://crockford.com/javascript/jsmin
    - http://dojotoolkit.org/docs/shrinksafe

  11. Menghindari redirects

    12. Berikut gambaran waktu yang dibutuhkan untuk redirect.
    karena ada redirect

  12. Hilangkan duplicate scripts

    13. Jangan meng-include script lebih dari sekali. Atau Memasukkan include di fetch array yang akan diload sebanyak x data.
    Akibatnya adalah extra HTTP requests (hanya di IE) dan eksekusi script yang berulang. Akibatnya loading halaman menjadi lama. "Akan tetapi kenyataanya sekarang 2 dari 10 website terkemuka masih melakukannya. *Steve Souders "

  13. Matikan ETags

    14. Entity tags (ETags) adalah suatu mekanisme yang digunakan oleh web server dan browser untuk memvalidasi komponen cached.

  14. buat AJAX bisa di-cache dan kecil

    15. Ajax memang pada awalnya didesain untuk meload content tertentu tanpa meload halaman secara keseluruhan. Tapi sekarang sepertinya lebih mengarah ke segi interaktifnya. Memang bisa load data tanpa harus refresh page, tapi coba lihat Yahoo mail beta yang loadingnya lama banget. Penulis lebih suka cek email lewat wap di Opera. Atau Gmail yang banyak lebih suka mengakses lewat Thunderbird atau Outlook. Mungkin cuma bagus yang punya jaringan pita lebar kali.

    Artikel yang sesuai:

    Diskusikan Artikel Ini

    * = required field

    :

    :

    :





    empat ditambah lima sama dengan
    (Sum of four and five)


     

     

     

     



Supporter


duram pada June 30, 2010 (4:22AM)
waw.. keren, terima kasih atas informasinya.
sangat membantu sekali
Krisamnto mahendra pada December 7, 2008 (8:37AM)
terima kasih,atas jawabnya nanti tentang bagaimana caranya membuat artikel dan blog pribadi dan memasukkan kedalam website/URL : http://www.krismanto.mahendra.com


TTD

Krismanto mahendra
krismanto mahnedra pada December 7, 2008 (8:34AM)
tolong ajarin saya untuk membuat artikel dan blogsetelah itu bagaimana caranya untuk memasukkan artkel dan blog tersebut kedalam alamat websitERL : http://www.krisamnto.mahendra.com

makasih atas jawabanya

TTD

krismanto mahnedra
Gajah
Giliran Admin ngomong.. :D
gecko pada November 24, 2008 (8:08AM)
@agung: redirect >> mengarahkan lagi ke alamat url lain.

contoh dengan html:
<meta HTTP-EQUIV="Refresh" CONTENT="5; URL=html-redirect.html">

contoh dengan php:
header( 'Location: http://www.yoursite.com/new_page.html' ) ;
?>

disamping itu bisa juga dengan java script dan forward URL
agung pada November 19, 2008 (9:21AM)
Yang dimaksud dg redirect itu apa ya? Gmn contohnya? Trims
poeshoe pada August 17, 2008 (6:33AM)
hmmp...kayaknya akansering mampir neh...
sekilas isinya bakal membatu sekali.
phusanti pada August 7, 2008 (8:07PM)
bole kan saya di ajarin dan di bantu.
thx
email : phusanti_dhira@yahoo.com
phusanti pada August 7, 2008 (8:06PM)
wow...menarik bgt dan bermanfaat bgt.

pengen gabung donk.
bole kan.
saya masi awam bgt nich.
gimana ya cara mulai nya.
tau dikit sich...bikin web (yang sederhana melalui notepad)
pembahasan yang gimana lagi nich, biar lancar buat web yang pnu design funnies.
thx
taufiq pada June 9, 2008 (11:45AM)
pengen sih blajar CMSnya!
makasih ya gecko.....
Gajah
Giliran Admin ngomong.. :D
gecko pada April 17, 2008 (2:50PM)
>> adi
tnx tipnya. Sekedar koreksi gambar yang ukurannya kecil gunakan format jpg, gif atau png.

JPG >> untuk gambar berupa foto atau gambar yang kaya warna
gif >> untuk gambar yang sedikit warna misal: poster, kartun dll.

Untuk lebih enaknya coba simpan gambar ke jpg dan gif. Kemudian pilih ang terkecil dengan kualitas ang bagus.
adi pada April 17, 2008 (2:45PM)
Lumayan juga tips dan trik nya nih...oya, cm bwt tambahan aja, bila kita memasukkan gambar yang biasa saja, gunakan format yang ukurannya kecil saja seperti .tif atau .bmp, jika akan memasukkan efek gambar yang bergerak,gunakan .gif saja. Oya, bila kamu juga bisa membuat animasi pada flash, jangan buat dengan ukuran besar karna pada server akan membacanya dengan lambat.


Salam

Adi Irwansyah
Meyzar pada February 29, 2008 (3:08PM)
bagus..eh kalo kita pake server luar negri ngaruh gk sih????
bos g bilang gk ngaruh,,tp g ngotot bilang ngaruh,,,bos g aneh,, mo bikin web design bagus tapi gk mau lelet,,pusing......
gendon_ok pada December 8, 2007 (10:58AM)
good.......ebat bermanfaat tenannnn...
koda pada December 3, 2007 (11:51AM)
chayoo
koda pada December 3, 2007 (11:51AM)
chayoo
Blueelf pada November 23, 2007 (4:55PM)
manfaat banget neh ilmunya Thx yah
RIRIN pada August 29, 2007 (7:07PM)
Artikel lo bermanfaat banget bagi gw... thank's ya... uwdah bagi2 ilmu...
smoga pengetahuan lo makin bertambah n bisa dibagi lagi
rasyid pada August 29, 2007 (8:24AM)
Terima kasih, banget tips ok banget nih.
ruli pada June 20, 2007 (7:43PM)
AnakPoso
bagus skali hidup Indonesian

gecko : makasih...

husni pada June 5, 2007 (1:09PM)
tapi aku masih bingung
Yogi pada June 2, 2007 (10:31AM)
Infonya bagus sekali :)
sudarman pada May 30, 2007 (12:20PM)
Salam kenal Dari Aceh.
Mantap thanks yaa.
moga jadi referensi KAMI

bye Su
Al-Azzam pada May 22, 2007 (10:38PM)
Bagus....
Lebih Banyak lagi ya...
artikelnya

© 2008-2010 Eko Priyanto - www.gecko.web.id - Dapat dikopi secara bebas dengan mencantumkan sumber artikel.