Threaded Mode | Linear Mode

***assadotcom*** · 05-10-2011, 01:12 AM

Semua pengguna internet ingin mengakses website dengan kecepatan render masimal, adalah tugas web developer bagaimana menghasilkan website yang cepat untuk dirender oleh browser.

Kecepatan render sebuah browser secara umum dipengaruhi oleh beberapa faktor yaitu: HTML DOM structure, CSS, Javascript, Image yang dimuat, dan lain-lain. Berikut ini adalah tips sederhana yang sangat berpengaruh terhadap kecepatan web page anda yang tentunya terdiri dari rangkaian script yang kemudian diterjemahkan kedalam sebuah bentuk visual dalam browser client.

DOM HTML
Gunakan struktur yang baik sesuai dengan hirarki dan fungsinya.

CSS
Browser menguraikan setiap struktur elemen (DOM Tree) dan kemudian engine CSS browser akan mencocokan setiap rule style yang sesuai dengan yang telah dideklarasikan. Dalam prosesnya, CSS engine mengevaluasi setiap rule dari paling kanan ke kiri.

Lebih baik

Code:

body{color:#333;....}

a.Title{ font-size:2.0em;... }

dibandingkan dengan

Code:

body{color:red;....}

div ul li a.Title{ font-size:2.0em;... }

Karena terlalu banyak rule dan hirarki yang harus uraikan.

Minimalisasi terjadinya Round Trip Time (RTT)
Round Trip Time adalah waktu yang dibutuhkan client (browser) melakukan request dan server mengirimkan respon. Contoh penggunaannya adalah dengan menghindari penggunaan @import CSS.

misalnya anda mempunyai script first.css yang didalamnya memnuat second.css

Code:

@import url("second.css")

cara diatas akan mempertinggi RTT, mengapa? karena browser tidak dapat melalukan download secara pararel script dari file yang diimport. Sebaiknya gunakan metode dibawah ini:

Code:

<link rel="stylesheet" type="text/css" href="firts.css" />

<link rel="stylesheet" type="text/css" href="second.css" />

Perhatikan urutan style dan script pada kasus berikut ini:

Code:

<head>

<link rel="stylesheet" type="text/css" href="stylesheet1.css" />

<script type="text/javascript" src="scriptfile1.js" />

<script type="text/javascript" src="scriptfile2.js" />

<link rel="stylesheet" type="text/css" href="stylesheet2.css" />

<link rel="stylesheet" type="text/css" href="stylesheet3.css" />

</head>

Code:

<head>

<link rel="stylesheet" type="text/css" href="stylesheet1.css" />

<link rel="stylesheet" type="text/css" href="stylesheet2.css" />

<link rel="stylesheet" type="text/css" href="stylesheet3.css" />

<script type="text/javascript" src="scriptfile1.js" />

<script type="text/javascript" src="scriptfile2.js" />

</head>

Source Chip - Tips

aciz a.k.a n1nj4 · 05-10-2011, 01:22 AM

numpang nampang di page one....

***assadotcom*** · 05-10-2011, 01:33 AM

Pertamax
Keduax
Ketiax
Kesempax
Kelimax
ngakak

Gedubrax!!! ^_^

(05-10-2011 01:22 AM)aciz a.k.a n1nj4 Wrote: numpang nampang di page one....

***AaEzha*** · 05-10-2011, 08:08 AM

masih bingung seh..
tapi gpp deh..ntar juga ilang bingungnya ngakak

~c()k3~ · 05-10-2011, 08:47 AM

bingung... hahaha
baru ngerti html dasar aja...

**Cruz3N** · 05-10-2011, 12:51 PM

Mantep Bro, kadang hal2 kyk gitu yang kelewatan. Sebenernya banyak yang bisa kita lakuin biar web kita jadi cepet dibuka kyk tehnik kompresi baik file css, js sama imagenya...

Gw kira css itu simple ternyata ribet dah T.T...

darkslayer · 05-10-2011, 03:29 PM

jadi intinya pake eksternal CSS terus di order by ekstensi gitu y bro?

***assadotcom*** · 05-11-2011, 04:09 AM

± Gitu Sich Ncang, Tapi Kalo Aye Pribadi Sich Lebih Demen Maen CoprezZz Kalo Untuk Urusan Render, Coz Gak Capek Mikirin Codingnya. "CMIIW"

(05-10-2011 03:29 PM)darkslayer Wrote: jadi intinya pake eksternal CSS terus di order by ekstensi gitu y bro?

KrisnaSapi · 06-27-2011, 04:56 AM

Wah, sangat berguna nih asik

makasih sharenya, nice post

apiep · 06-28-2011, 08:33 PM

Makasih kang/om atas tips kira'in gak ada efek soal ntu seneng

Possibly Related Threads...
Thread:		Author	Replies:	Views:	Last Post
	[Tutor] Bikin Generator Text Pelangi Tag MyBB	cybertr0nic666	18	492	01-26-2013 04:57 PM Last Post: cybertr0nic666
	[Ask] browser bisa capture webcam (HTML5)	candragati	6	234	11-08-2012 06:52 AM Last Post: hakimoxz
	[Tutor] Membuat Gambar Pada Halaman Browser Menari	cliquersz	5	751	06-13-2012 11:33 AM Last Post: devilzone
	[Tutor] Merubah Warna Browser Menjadi Warna Warni	cliquersz	5	552	03-26-2012 03:43 PM Last Post: sunafets.exe
	[Ask] Gimana Sih Bikin Saya Bikin animasi Lewat FB koq Gak Muncul	cliquersz	9	681	03-18-2012 06:39 PM Last Post: febriandeny
	[Ask] Gimana sich cara bikin menu dibawah header blog ??	Jabrik_108	3	675	02-27-2012 03:12 AM Last Post: Eyang Subur
	Bikin Forum Pake Blogger/Blogspot	assadotcom	45	11,663	01-30-2012 02:31 PM Last Post: Thenetterz
	Bikin Dan Maenin Quiz Parampaa Di Blogger/Blogspot	assadotcom	22	4,450	01-22-2012 05:36 PM Last Post: Core-X
	[Ask] ajarin bikin template ini donk :'(	darkslayer	11	2,079	11-07-2011 02:34 AM Last Post: darkslayer
	Bikin Widget Flickr From Yahoo! Keren Di Blogger/Blogspot	assadotcom	5	1,662	07-09-2011 12:51 PM Last Post: AriefEnginer