[SHARE] Mempercepat Loading Website Cara Saya

Halo,

Perkenalkan saya anggota baru neh. Buat perkenalan, saya mau share langkah-langkah mempercepat loading website, hasil dari optimasi di website sendiri. Kalo agan punya website, pasti ngerti kalo kecepatan load website itu penting. Soalnya kalo website agan lama loadingnya, yakin pasti pengunjung bakalan nutup website agan dan pindah ke website lain.

Untuk ukuran kecepatan, saya pakai 2 tools online, GTMetrix dan Pingdom Tools. Dan hasil tes dari 2 tools di atas bisa dilihat di bawah ini:

hxxp://cl.ly/image/060P0X2b3j2c
hxxp://cl.ly/image/2a0j0k342l38

*Ganti x jadi t gan


Rata-rata kecepatan load website saya di bawah 1 detik (0.6 detik dan 0.5 detik). Mengingat website saya adalah website portfolio yang isinya gambar semua, kecepatan segitu sudah lumayan.

Tertarik buat mempercepat load website agan juga? Intinya adalah buat segalanya lebih kecil/sedikit. Baca terus biar jelas gan. (Poin-poin di bawah adalah metode saya gan, jadi mungkin cocok dengan agan mungkin juga tidak. Tapi semoga setidaknya bisa menambah pengetahuan).

1. Server Hosting
Tips pertama yang paling penting adalah pilih web host yang punya server cepat. Semakin cepat server yang mereka pakai untuk hosting website agan, maka akan semakin cepat juga loading website agan.

Untuk website saya sendiri, saya host di Google App Engine (GAE). Tahu sendiri kan kecepatan server punya Google? Ya, super cepat. Alternatif lain, pakai Dedicated server atau VPS (kalo punya uang) . Intinya, sebisa mungkin hindari shared hosting kalau ingin website cepat loadnya.

2. Pakai CDN
Content Delivery Network (CDN) berfungsi sebagai server alternatif untuk download resource website (biasanya file statis seperti gambar atau JavaScript). Jadi misalkan pengunjung website dari Indonesia, tapi server website agan ada di Amerika, maka resource website tidak diambil dari server Amerika, tapi dari server CDN di Asia. Beberapa layanan CDN yang cukup terkenal bisa digunakan seperti Amazon CloudFront atau Max CDN. Atau jika ingin gratis bisa pakai CloudFlare.

3. Kompres Gambar
Semakin kecil ukuran gambar yang digunakan, maka semakin cepat pula loadnya. Untuk urusan yang satu ini, hanya ada satu aplikasi yang saya percaya, ImageOptim. Dengan aplikasi ini rata-rata bisa mengecilkan ukuran gambar sekitar 25% tanpa mengurangi kualitas gambar.

Tapi aplikasi ini hanya buat Mac OS X. Kalo untuk Windows alternatifnya adalah RIOT, FileOptimizer, dll. Saya sendiri belum pernah memakainya, jadi silahkan coba sendiri gan.

4. Kurangi HTTP Requests
Kita bisa mengurangi jumlah HTTP Requests dengan menggabungkan beberapa dokumen CSS atau JS (biasanya dari jQuery plugins) jadi satu dokumen. Karena saya membangun website saya pakai Sass Grid Framework (Bourbon Neat), saya menggunakan aplikasi CodeKit untuk compile, menggabungkan dokumen CSS / JS jadi satu dokumen, sekaligus me-minify dokumen juga.

Tidak pengen beli CodeKit/pakai Windows, agan bisa pakai Koala App. Fungsinya sama.

5. Minify HTML, CSS, JS
Minify dokumen HTML, CSS, dan JS bekerja dengan menghilangkan spasi atau tab (whitespace) yang tidak diperlukan sehingga kita akan mendapatkan ukuran dokumen yang lebih kecil. Seperti di poin 4, untuk keperluan ini saya menggunakan CodeKit.

Penting: Kalo agan pake inline JS (AdSense, Analytics, dll) jangan ikut di-minify juga, karena biasanya script jadi tidak bisa berfungsi. Lebih baik minify HTML dulu, baru sisipkan script JS-nya (tanpa di-minify).

6. Charset di Server Level
Untuk menampilkan website dengan benar, browser harus tahu character set apa yang digunakan oleh dokumen HTML. Cara paling mudah adalah dengan menyisipkan meta tag ke dalam dokumen HTML:

<meta charset="UTF-8">

Tapi kalau agan pengen load website lebih cepat, hindari menyisipkan charset ke dalam dokumen HTML. Sebaliknya masukkan charset ke server level (Kalau pake apache, maka charset masukkan ke dalam .htaccess).

AddDefaultCharset utf-8

atau
Content-Type: text/html; charset=UTF-8
Kalau misal pake python seperti saya:

- url: /
static_files: index.html
upload: index.html
mime_type: text/html; charset=UTF-8

7. Cache Semua Resource
Dengan cache, sebuah halaman yang diload tidak harus sepenuhnya me-request ke server. Berkat cache, beberapa request yang seharusnya dikirim ke server, dibatalkan karena telah dipenuhi dengan data cache. Namun, pemanfaatan cache ini hanya berlaku jika browser pengunjung pernah mengunjungi website dan data cache masih tersimpan.


8. Hindari/Kurangi Script/CSS Dari Pihak Ketiga
Dengan menggunakan script/css dari pihak ketiga, maka ini bisa memperlambat load website karena harus memanggil data dari server lain yang belum tentu cepat. Jadi sebisa mungkin hindari/kurangi.

9. Definisikan Dimensi Gambar
Pake gambar? Biasakan untuk selalu menuliskan dimensi gambar di tag img, contoh:

<img src="url/image" alt="image" width="120" height="70" />


Yap. Itu saja share saya untuk mempercepat loading website. Semoga bermanfaat.

 

makasih gan, sharenya bagus nih.. bermanfaat!

 

Nah trik ini yg ane butuhin.
Ane punya web yg dgn database mysql yg banyak mpe jutaan rows, hampir 2GB
kadang2 jdi suka lemot pas loading web ane


Buat agan TS thanks bwt share nya, ane coba plajari dan praktekin
moga2 brmanfaat buat mengoptimasi speed website ane dan moga2 TS dpt pahala

 

Wah, thanks sharenya masgan.
Saya mau tambahin dikit triknya.
Kalau bisa sih untuk script javascript di load belakangan masgan, pengalaman saya sih biasanya javascript yang di load belakangan menghasilkan hasil yang lebih cepat.

 

mantab

 

websitenya ga bisa diakses dari sini gan (ariwebdesigner)..

 

ijin pelajari dlu mastah

 

Thx gan. Iya, saya tadinya kepikiran buat masukin poin itu, tapi itu teknik web design dasar. Asumsi saya semua orang sudah tahu

 

Pake non-www gan, jadi ariwebdesigner(dot)com. Kalo pake www, error. Ngatur redirect dari www ke non-www di Python masih belum paham

 

wahhh ,, nice infoo gan

 

Mantep ilmu nya yhnx gan buat share ilmu nya..

Sent from my SM-N900 using Tapatalk

 

thanks sharenya

 

agak2 ribet ya gan, tp keknya oke banget nih

 

kalo pake wordpress kayak gini juga gak yah?

 

rumit juga sih, namun mayanlah.. makasih gan

 

wah.. panjang juga yah.. step by step dolooo

 

mantap..

 

thanks gan....

 

thanks informasinya, tp yang sering menjadi kendala saat ini hostingnya sekali dalam sebulum wajib down,,,

 

oke, geler tiker dulu gan