Agen Terpercaya  
 
 
 
 
Pasang iklan, hanya lewat Contact Us.
Waspada penipuan iklan. Klik di sini untuk melihat daftar penipu.

Berbagai Tips Mempercepat Loading Web

S

semprot_sejak_dulu

Moderator
Staff member
Moderator
Daftar
1 Jan 1970
Post
176
Like diterima
747
Lokasi
Semprot.com
Bimabet
80% waktu loading ada di front-end (browser), bukan di back-end (server).
Maka optimisasi utama fokusnya di front-end.
Kebanyakan waktu ini digunakan untuk mendownload JS, gambar, CSS, flash, dll

Salah satu cara optimisasi adalah memperkecil jumlah HTTP request.
Setiap ada tag
HTML: 
<script type="text/javascript" src="contoh.js"></script>
, berarti 1 HTTP request.

Begitu juga dengan tiap ada
HTML: 
<link rel="stylesheet" type="text/css" href="contoh.css" />
berarti 1 HTTP request.

Untuk ini bisa dilakukan spriting gambar, yaitu mengkombinasikan beberapa gambar menjadi satu.
Memang, ukuran gambarnya menjadi lebih besar (kan kombinasi > 1 file), tapi HTTP request yg terjadi akan lbh kecil.

Kalau bisa kita juga mengkombinasikan lebih dari 1 file CSS ke dalam 1 file CSS saja.
Demikian juga dengan JS.

http://developer.yahoo.com/performance/rules.html
 
Di penelitian yg dilakukan Yahoo, menaruh CSS di dalam <head> membuat loading page terasa lebih cepat. Hal ini karena proses render halaman dilakukan secara progresif.

Jika ditaruh di dekat bawah, maka teknik ini menghambat proses rendering halaman secara progresif di banyak browser (termasuk Internet Explorer). Mengapa? Karena browser ini menghindari untuk menggambar ulang elemen halaman jika style tersebut diload.

Bingung?
Bayangkan ini
HTML: 
<style type="text/css">
p {
	background-color:#66FFCC;
	color:#330000;
	font-weight:900;
}
</style>

<p>Coba 1</p>
<p>Coba 2</p>
<p>Coba 3</p>

Kode di atas adalah style dulu, baru content. Hal ini jelas2 membantu load halaman secara progresif, yaitu pertama2 style <p> didefinisikan terlebih dahulu, sehingga saat browser mulai merender <p>, style akan langsung di-apply di <p>

Bandingkan dengan
HTML: 
<p>Coba 1</p>
<p>Coba 2</p>
<p>Coba 3</p>

<style type="text/css">
p {
	background-color:#66FFCC;
	color:#330000;
	font-weight:900;
}
</style>

Tag2 <p> diload terlebih dahulu & akan "ditampilkan" terlebih dahulu ke layar (tanpa stylesheet, karena stylesheet belum didefinisikan).
Baru ketika masuk ke blok <style>, browser membaca style <p> dan mencari tag2 <p> sebelum (dan tentu aja sesudah) tag <style>, lalu kalau ketemu, baru meng-apply style tsb ke tag <p>

Spesifikasi HTML jelas2 menyarankan bahwa CSS ditaruh di dalam <head>
 
Javascript harus ditaruh di bawah karena javascript mengeblok download secara paralel. Spesifikasi HTTP 1.1 menunjukkan bahwa browser tidak mendownload lebih dari 2 komponen secara paralel per host.

Contoh jika anda menaruh 5 file gambar di host yang sama, maka max 2 gambar yang akan didownload pada waktu bersamaan (paralel).
Tapi jika 5 file gambar itu anda taruh di 5 imagehosting yg berbeda, maka 5 gambar tersebut akan didownload paralel secara bersama-sama.

Tapi jika ada 1 file javascript dan berikutnya ada 5 file gambar (bahkan jika host javascript & 5 file gambar tersebut berbeda semua), maka saat proses download javascript, tidak ada proses download paralel lainnya (termasuk proses download gambar).

Oleh karena itu javascript sebaiknya ditaruh di bagian halaman paling bawah jika memungkinkan, yaitu setelah proses download komponen lain seperti gambar, css, flash selesai didownload di halaman tersebut.
 
mantab mantab berlaku juga di wapsite juga dong :D
 
User di-banned, maka konten otomatis dihapus.
User is banned, content is deleted automatically.
 
kalo ane bilang sih yang lebih berat itu js, kalo dibanding sama css.. itu menurut yang ane terapkan di blog loh ya CMIIW
 
Nice..nice emang bener semua yang dijelaskan :) silahkan di coba semua tekniknya, untuk mengukur bisa gunakan firebug di firefox atau developer di chrome n safari :p

sebenarnya ada teknik yang lebih ekstrim :) yaitu teknik optimasi dom dengan bantuan node.js misalnya.
 
kalau ane optimasi biasanya make wordpress .. ada beberapa cara
make plugin, make CF , dan make CDN gratis
 
Threadnya udh 10 tahun yg lalu.
Di 2020 ini caranya masih work gak?
 
Gak mudeng Om.. mumet liat scriptnya🤣🤣🤣
 
keren harus di share ke fast learner ... banyak tenaga kerja muda yang bisa dijadikan perintis IT NKRI ...
 
Kalau websaya optimasi pakai plugin aja sih gan cuman memang masih ada trouble di lcp trus
 
You must log in or register to reply here.

Similar threads

S
Tips Optimisasi Bandwidth
Balasan
12
Dilihat
9.639
rikzantara
R
RayMantic
SHARE Export Excel PDF CSV Print menggunakan PHP Laravel [VIDEO TUTORIAL]
Balasan
0
Dilihat
1.785
RayMantic
RayMantic
RayMantic
[NOQUOTE]CARA BIKIN WEBSITE PHISING INSTAGRAM SENDIRI [DOWNLOAD SCRIPT][CARA INSTAL KE HOSTING]
Balasan
17
Dilihat
3.178
Geniuszt06
G
Jav Toys
Gaple Online Indonesia
Pasang iklan hanya lewat CONTACT US
Back
Top
We are now part of LS Media Ltd