14 hal untuk membuat website ( website sendiri )yang cepat diload

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 buat website ( website pribadi )kita cepat diload.

1. Perkecil jumlah HTTP requests

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

2. Gunakan CDN

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

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

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

view plain print

2. ob_start("ob_gzhandler");
3. ?>
4. Tempatkan CSS di bagian atas

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

6. Pindahkan Java Script ke bagian bawah

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.

Hindari CSS expressions

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

view plain print

1. #myDiv {
2. position: absolute;
3. width: 100px;
4. height: 100px;
5. left: expression(document.body.offsetWidth - 110 + "px");
6. top: expression(document.body.offsetHeight - 110 + "px");
7. background: red;

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.

view plain print

1. "style/style.css" rel="stylesheet" type="text/css" />
8. Selain itu dalam pembuatan website, anda juga harus memperhatikan setiap langkah yang telah anda lakukan, untuk mempermudah sebaiknya anda menggunakan jasa pembuatan website atau juga melakukan konsultasi dengan ahli komputer / ahli pembuat website.

source : http://www.gecko.web.id