Klik Untuk Besarkan

Tips : Fast Loading Webpage (Image)

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.

  1. 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 :

    Klik Untuk Besarkan
    Anda dapat perhatikan jumlah masa yang dijangka ambil untuk load sesuatu image.
  2. 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.

  3. 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

You may also like...

Popular Posts

1 Comment

  1. […] ingat lagi entri sebelum ini bertajuk Tips : Fast Loading Webpage (Image). Kali ini saya akan menyentuh mengenai javascript. Dalam pembinaan sesuatu web base sistem, […]

Leave a Reply

Your email address will not be published. Required fields are marked *