Mempercepat Loading Blog (DEVELOPER VERSION)

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

1. Save for web
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.



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

2. format file (images).
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
Makanya 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 loading 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 Sprites function.
Tekniknya ini menggabungkan lebih dari satu gambar dengan karakter yang sama & digunakan sebagai background dari section yang terpisah. Tujuannya agan satu gambar ini ter-render sekaligus tanpa menunggu gambar lainnya terrender. Gw bingung jelasinnya. Contoh:



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

4. file Compress.
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 byte *menurut saya*. 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. Combine the Elements
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 property 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;
}

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