Mempercepat Loading Blog (DEVELOPER VERSION)

Kita akan berbicara ke strukturnya dan layout secara untuh, jadi trik ini berlaku untuk semua type engine. Dipakai oleh designer & developer untuk meningkatkan kecepatan laoding.

1. Optimasi Pada Photoshop
Klo pake photoshop untuk ngedesign awal, biasanya background langsung disave dengan mengklik CTRL+S kan? Padahal ALT+Shift+CTRL+S lebih baik karena bisa mengoptimasi images size. Jadi berikutya — hanya saran — sebaiknya menggunakan ALT+Shift+CTRL+S dibanding CTRL+S.



Kalau click itu, nanti ada jendela baru. Dioptimasi bagian itu saja.



file size terlihat di bagian bawah.
Kalau mau dikompress lagi, bisa pake layanana yahoo, namanya YSLOW (Cari di google gan).

2. Memilih Format File Gambar Yang Tepat
Ini tergantung dari images yang akan digunakan sebagai background. Lihat sisi kontras, brightness, resolusi, pewarnaan, efect, etc.

1. Untuk background, beberapa site memilih menggunakan *gif karena dirasa lebih ringan dibanding *png & lebih baik dibanding *jpg. (ex: deviantART). Tetapi balik lagi ke kebutuhan.
Untuk transaparansi, JPG tidak support, *gif terlihat buruk untuk background gelap sedangkan *png sangat baik tapi berat
Mangkana pilih sesuai kebutuhan. Usahakan jangan menggunakan background transparent karena IE6 tidak mendukung alpha transparancy selain karena file size yang lebih berat.

2. *PNG untuk background (selain gif). Jarang saya melihat *jpg digunakan untuk background. Pertama, alasannya jelas, karena *jpg memiliki proses render yang aneh. File ini dirender secara bertahap. Tingkatannya seperti ini: diload buram dulu, setelah itu sedang, baru setelah itu load akhir secara penuh. Proses rendernya terlihat jika agan menggunakan telkomsel Flash, karena lemotnya itu, jadi loading terlihat jelas
Kalau *PNG proses rendernya mirip-mirip cara IE merender. Data dikumpulkan dulu baru ditampilkan. File ini lebih baik untuk background transparent atau yang menggunakan opacity, karena transparancy didukung baik oleh *Png.

3. Untuk content gunakan *jpg. Btemplates, dominan menggunakan *JPG sebagai format file untuk gambar dibagian content. Alasannya sudah saya jelaskan diatas.

Tidak usah terlalu pusing, gunakan seperlunya saja. Kalau ente targetkan visitor bule, sebaiknya gunakan *PNG saja.

3. CSS Sprite
Tekniknya ini menggabungkan lebih dari satu gambar dengan karakter yang sama dan digunakan sebagai background dari section yang terpisah. Tujuannya agan satu gambar ini ter-render sekaligus tanpa menunggu gambar lainnya terrender. Ini tentu saja mengurangi HTTP request. Gw bingung jelasinnya. Contoh:



Gambar diatas adalah background site btemplates. Mereka menggabungkan beberapa background dan menjadikannya satu. Tapi kalau ente buka site nya (btemplates.com) background diatas terletak dalam section yang terpisah.

Kekurangan css sprite yaitu agak sulit jika digunakan untuk background repeatab

4. Compress CSS/HTML
Banyak yang menyarankan hal ini, tapi hati-hati jika anda menggunakannya. Apalagi yang gak ngerti koding. Prinsip kerja mereka dengan menghapus bagian bagian yang tidak perlu. Sebenarnya kalau anda mengetahui bagian yang tidak perlu itu, tools ini tidak terlalu berguna.
1. Spasi: 1 character terhitung 1 bit *menurut agan fazzman*. Apapun itu mau spasi kek, huruf kek, or whatever.
2. Hapus saja character tidak penting seperti komentar atau apa. Ditandai dengan:

Code:

/* Test Keblinger ----------------------------------- */

Atau;

Code:

<!—Test Keblinger -->

Atau lagi;

Code:

// Test Keblinger

Kalau dilihat memang tidak berpengaruh karena hanya beberapa character kan? Tapi coba bayangkan bagaimana beratnya jika “Komentar itu sebanyak ini.

Code:

/* ------- Lorem ipsum dolor sit amet, consectetur adipiscing  elit. Sed ac quam a ante auctor tristique quis at tellus. Sed id arcu  lacus. Mauris suscipit, nisl id dictum tincidunt, enim ipsum venenatis  velit, eu porttitor odio augue quis purus. Donec laoreet quam at est  mollis at tincidunt nunc rhoncus. Aenean quis tellus felis. Vestibulum  egestas laoreet odio eu euismod. Sed id lorem quis metus tincidunt  cursus. Donec tincidunt ante urna, sed porttitor nunc. Ut lorem mi,  tincidunt ut scelerisque vel, aliquet gravida nisl. Sed aliquam, nibh a  pulvinar sollicitudin, nulla massa pulvinar elit, volutpat suscipit  felis libero quis ante. Cras vitae tempus libero. Maecenas sapien  ligula, malesuada eu consectetur non, tristique non mauris. Cras  dignissim tempus risus nec aliquam. Ut vel magna at ipsum hendrerit  pharetra eu nec leo. Cras congue eleifend felis, sed auctor lacus ornare  sit amet. Nam neque tellus, mattis id fermentum vitae, rhoncus a  massa.------------- */

Kan lumayan tuh character sizenya.

5. Menggabungkan Elemen
Masih mengacu pada section 4 diatas, yaitu penghematan menggunakan character. Misalnya saya punya element:

Code:

#kentut {
display:block;
float:left;
margin:0;
padding:10px 15px 0 15px;
height:25px;
border-right:1px solid #c90641;
}

Lalu punya:

Code:

#pertamax {
display:block;
float:left;
margin:0;
padding:10px 15px 0 15px;
height:25px;
border-right:1px solid #c90641;
}

Kan sama tuh deklarasinya. Makanya sebaiknya mereka dipersatukan dalam cinta:

Code:

#kentut, #pertamax {
display:block;
float:left;
margin:0;
padding:10px 15px 0 15px;
height:25px;
border-right:1px solid #c90641;
}

-----------------------------------------------------------------

Bagaimana kalau ada salah satu dari properti yang berbeda? contoh:

Code:

#kentut  {
display:block;
float:left; // Cap cis cus gan...ternyata ini beda
margin:0;
padding:10px 15px 0 15px;
height:25px;
border-right:1px solid #c90641;
}

Dan

Code:

#pertamax {
display:block;
float:right; // Cap cis cus gan...ternyata ini beda
margin:0;
padding:10px 15px 0 15px;
height:25px;
border-right:1px solid #c90641;
}

Lihat, ternyata propert fload dari element diatas berbeda. Satu float:left sedangkan satunya float:right Cinta mereka masih bisa dipersatukan kok:

Code:

#kentut, #pertamax {
display:block;
float:left;
margin:0;
padding:10px 15px 0 15px;
height:25px;
border-right:1px solid #c90641;
}
#pertamax {
float:right;
}

Mudah kan...terlalu mudah *kata dosen ane untuk mengejek mahasiswanya yang malas*

 

Thread bagus kok melelep. . Mestinya disticky di bagian web design ni. .
Keep share boz, aku ga ngerti coding n design, ini buat yg blog corporate atau blog bejibun trafficnya ni. .

 

wah, semoga TS berniat share tutorial web design untuk wp , thanks ts

 

Gak juga kok gan. Semua blog seharusnya menerapkan trik ini. Katanya sih Google suka blog yang loadingnya cepet. Kalau semua blog memiliki loading yang cepat, penggunaan bandwidth bisa diminimalkan.

Sudah ada yang pernah sharing tutorial WP gan, hanya saya lupa threadnya dimana. Kalau gak salah authornya ada huruf "V" didepannya. Vistachan, vistarich, atau V for Vendeta ya?..pokoknya ada vista-nya.

 

mantap, tapi bagian css sprite yang paling susah untuk dirombak...ane udah berkali2 cobain susah banyak keterbatasan disana, jadinya lebih milih CDN atau pake image maps aja

 

Makasih gan.... mohon agar tehnik css sprite itu di perjelas lagi,... atau bikin trit baru mengenai hal ini.. thanks udah meluncur...

 

mantab bgt.
Aku bukmak neh thread.
Buat blogspot juga begitu kan.
Akan aku hapus komen2 di htmlnya.
Makasih bnyk ts.

 

tak simpen dulu ah threadnya bermanfaat bgt nih..........

 

ane coba dulu sob, makasih ya

 

wah bagus,, bisa sekalian belajar sotoshop

 

thanks, ane coba dulu ya gan

 

sip, belajar dulu ni dari sini

 

mantaps

 

klo file png stauku memang disarankan ma blogger,ada di google support blogger kyknya

 

siip.. makasih gan...
mraktekin sambil gelar tikar nunggu lanjutan cinta fitri 7

 

wah mantab nih sharenya.
langsung dicoba gan.
pasti udah ahli ya.
jadinya berani share panjang lebar gitu.

 

Thanks sharenya. Semoga aja dapat menambah wawasan saya dalam coding.



Jasa Pembuatan blog, Website, Toko Online, Forum, dan Wapsite dengan harga terjangkau. Klik DISINI.

 

Nice Posting.. , tp sekedar berbagi info saja.. 1 char atau karakter itu satu bit, dan 1 byte itu 8 bit..

 

Thank bro. Gue khilaf, kirain 1 byte, ternyata 1 bit. Tapi sudah gue update.

 

Terima kasih mas udah share ilmunya, ane lagi nyari2 kompresan akhirnya nemu juga.
Ada sedikit pertanyaan nih, (semoga sudi untuk menjawab)
1. ane belum paham point ke3 tentang css sprite, tolong dijelasin ya
2. Untuk Point ke5 maksimal berapa elemen itu.
3. Kalo kompres javascript di widget bagaimana?
Sekali lagi terima kasih.
Sukses