- Beranda
- Komunitas
- Entertainment
- The Lounge
14 hal untuk membuat website yang cepat diload atau di buka
TS
nofry27
14 hal untuk membuat website yang cepat diload atau di buka
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
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 networ 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[/B
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.
[B] 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
<?php
ob_start("ob_gzhandler");
?>
5.Tempatkan CSS di bagian atas
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 JavaScript ke bagian bawah
Akibat dari javascript diletakkan di atas adalah adanya blank screen berwarna putih yang lama saat loading dan tertundanya loading isi halaman. JavaScript 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 JavaScript menghalangi browser melakukan parallel downloads dan menghalangi rendering semua content yang berada di bawahnya (CSS, HTML, image, dll). Pada keadaan normal (tidak ada JavaScript) image akan didownload secara parallel sedangkan jika ada JavaScript di bagian atas maka JavaScript akan menghalangi proses ini, sampai keseluruhan kode javascript selesai diload.
Untuk menghindari hal ini sebisa mungkin pindahkan javascript ke bagian yang paling bawah. Tentunya tidak melupakan perimbangan agar javascript 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:
view plain print
#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: [removed]document.body.offsetWidth - 110 + "px");
top: [removed]document.body.offsetHeight - 110 + "px");
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
<link href="style/style.css" rel="stylesheet" type="text/css" />
[removed][removed]
9. Mengurangi DNS lookups
Alasan utamanya adalah DNS lookup bisa menghalangi browser untuk melakukan parallel downloads.
10. Perkecil ukuran file JavaScript
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 javascript Anda:
- http://crockford.com/javascript/jsmin
- http://dojotoolkit.org/docs/shrinksafe
11. Menghindari redirects
karena ada redirect
12. Hilangkan duplicate scripts
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
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
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.
http://gecko.web.id/web-performance/...-cepat-diload/
0
1.5K
10
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Urutan
Terbaru
Terlama
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Komunitas Pilihan