Menurut kajian, 40% punca utama sesuatu sistem itu slow adalah dari applikasi system itu sendiri, 30% dari network, 20% dari database dan selebihnya dari server architecture itu sendiri. Jadi disini saya akan berikan sedikit tips untuk best practice untuk meningkatkan performance webpage kita. Untuk kali ini saya akan menceritakan mengenai image. Sebab image antara punca utama webpage lambat loading.
- Apabila mereka bentuk sesuatu design pastikan ia di simpan dalam format untuk paparan web. Ini kerana dalam webpage tidak semua color akan support. Jadi dengan cara ini kita kurangkan color yang tidak sopport dan dalam masa yang sama saiz dapat dikurangkan. Saya cadangkan anda save dalam format jpg atau gif untuk image yang kecil. Elakkan menggunakan png kerana saiz dia agak besar.
Caranya menggunakan software Adobe Photoshop :
Anda dapat perhatikan jumlah masa yang dijangka ambil untuk load sesuatu image. - Jangan resize image di HTML seperti contoh dibawah
File : header_logo.jpg Size : 1800X600
HTML :
Resize fail source mengikut keperluan paparan. Ini kerana walaupun anda telah mengecilkan di HTML code namun browser client perlu muat turun fail yang besar tersebut sebelum di paparkan.
- Jika boleh praktikan gunakan kaedah repeating image dalam css anda.
Seperti contoh:
background: url(images/sidebar_box_middle.jpg) repeat-y left;
Kaedah ini selalu digunakan apabila anda ingin membuat border,header bar atau background
