Secara konsepnya, sesuai yang bersaiz besar memerlukan masa yang lebih untuk dimuat turun. Jadi dalam kes ini, sekiranya saiz untuk satu-satu laman adalah besar, maka proses untuk memuat turun sesuatu laman akan mengambil masa lebih lama. Keadaan ini akan menyebabkan laman tersebut akan mempunyai "gap" atau jangka masa tertentu sebelum di siap dipaparkan di pelayar pengguna.

Sudah tentu anda tidak mahu menerima rungutan dari pengguna menyatakan yang laman anda lambat untuk dibuka. Saiz sesuatu laman adalah bergantung kepada banyak faktor dan setiap faktor tersebut akan cuba saya bincang dan kupaskan disertakan cara-cara yang terbaik untuk mengendalikan faktor tersebut agar anda dapat mengurangkan saiz sesuatu laman sehingga ke tahap yang paling minimum.

Kelebihan saiz laman kecil

  • Lebih cepat untuk dimuat turun dan dipaparkan
  • Mengurangkan penggunaan jalur lebar pelayan (bandwidth server)
  • Google bot lebih memilih untuk mengindeks laman web yang lebih cepat proses muat turun dan dipaparkan
  • Laman lebih stabil untuk dilayari walaupun bilangan pengunjung adalah terlalu ramai
  • Mengurangkan rungutan dan komen dari pengunjung
  • Laman kelihatan lebih sofisikated

Faktor-faktor yang mempengaruhi saiz laman

1. Penggunaan CSS dan Javascript

Dalam menghasilkan sesuatu laman web kelihatan lebih berseri dengan kehadiran stail-stail tertentu dan juga animasi yang dibantu oleh penggunaan Javascript sebenarnya sedikit sebanyak menambahkan saiz sesuatu laman web. Kebiasaannya, Cascading Style Sheet (CSS) dan Javascript merangkumi bepuluh-puluh baris. Keadaan ini akan membantutkan proses pembacaan keseluruhan dokumen laman. Lebih teruk lagi sekiranya ke semua laman menggunakan CSS dan Javascript yang sama pada setiap laman dan ini menyebabkan setiap kali laman dibuka, elemen-elemen ini akan dibaca semula. Ini sangat merugikan.

Cara mengatasi:

Langkah yang paling professional adalah dengan menggunakan CSS dan Javascript luaran. Ini dilakukan dengan mengumpulkan ke semua skrip atau aturcara CSS ke dalam satu fail luaran yang mempunyai sambungan "*.CSS" manakala untuk Javascript adalah "*.JS".

Seterusnya, hanya menggunakan pautan yang dimasukkan dibahagian tag <head> ... </head> untuk kedua-duanya bagi memanggil dan memasukkan ke semua elemen tersebut SAMA seperti anda menulisnya terus ke dalam dokumen.

Untuk CSS: <LINK rel="stylesheet" type="text/css" href="https://www.drupalnote.my/stylesheet.css" />
Untuk Javascript: <SCRIPT language="JavaScript" SRC="https://www.drupalnote.my/javascript.js"></SCRIPT>

Kelebihan menggunakan fail luaran akan menjimatkan proses muat turun. Fail-fail pautan luaran ini hanya akan dimuat turun pertama kali sahaja. Sekiranya pelayar berpindah ke laman lain yang masih memerlukan fail ini, ia akan terus dibaca dari "cache" komputer anda dan TIDAK perlu dimuat turun semula. Di samping itu, fail untuk setiap laman juga dapat dikurangkan seminimumnya.

2. Permudahkan penulisan aturcara

Sekiranya anda menggunakan perisian bantuan seperti Dreamweaver dan lain-lain, setiap kali proses kemasukan input baru dilakukan seperti elemen table, div dan lain-lain setiap atribut atau arahan aturcara akan ditulis secara penuh. Sebenarnya, penulisan atribut yang pada hakikatnya tidak perlu untuk ditulis akan menyumbang kepada penambahan saiz dokumen.

Sebagai contohnya, katakan penggunaan elemen "image" (gambar), penulisan aturcara oleh perisian biasanya akan ditulis seperti ini:

<img src="https://www.drupalnote.my/logo-ks.gif" width="230" height="130" alt="logo-ks" title="Logo KS" name="logo-ks" />

Perhatikan contoh yang saya berikan di atas. Sebenarnya kita boleh untuk permudahkan penulisan aturcara tersebut. Sekiranya saiz gambar yang kita akan gunakan adalah dalam keadaan saiz yang asal, tidak berlaku sebarang perubahan saiz pada proses paparan, atribut untuk width dan height tidak perlu ditulis dan dinyatakan kerana pelayar akan secara automatiknya menggunakan saiz original gambar tersebut.

Satu lagi, penggunaan atribut name hanya akan digunakan seandainya kita mahu menggunakan gambar tersebut sebagai objek atau terlibat dalam satu-satu aturcara Javascript. Sekiranya gambar ini hanya sekadar logo dan tiada kaitan dengan mana-mana aplikasi Javascript, atribut tersebut tidak perlu ditulis. Apa yang penting adalah atribut alt dan title kerana kedua-duanya terlibat dalam proses SEO laman web. Jadi, aturcara ini boleh diringkaskan menjadi seperti ini:

<img src="https://www.drupalnote.my/logo-ks.gif" alt="logo-ks" title="Logo KS" />

Sekiranya aturcara ini merupakan satu dokumen, maka anda sudah mengecilkan saiz laman kepada hampir SEPARUH berbanding pada saiz asal. Cuba bayangkan sekiranya penggunaan aturcara yang pertama digunakan berulang-ulang kali dalam satu laman. Dan selepas diubah suai, anda akan dapat melihat perbezaan saiz yang lebih ketara.

Terdapat banyak lagi cara untuk meringkaskan penulisan aturcara berdasarkan kepada elemen dan atribut yang digunakan. Anda boleh menjenguk tutorial yang kami sediakan dalam laman ini terutamanya sekali untuk CSS dan HTML. Setiap aturcara boleh diringkaskan dan dipadatkan tetapi menghasilkan arahan yang sama.

3. Penggunaan jenis gambar yang tepat

Bagi pembangun laman web yang baru, anda mungkin tertanya apakah jenis gambar yang sesuai untuk digunakan. Secara kasarnya, terdapat tiga pilihan jenis gambar yang biasa digunakan dalam laman web iaitu GIF, JPEG (JPG), atau PNG.

GIF atau Graphic Interchange Format mempunyai kombinasi warna setinggi 256 warna termasuk "transparent". GIF sesuai digunakan untuk gambar-gambar kecil, penghias bentuk laman web, ikon-ikon kecil dan logo. GIF lebih pantas untuk dimuat turun dan saiznya adalah lebih kecil. GIF tidak sesuai digunakan untuk gambar foto dan panorama kerana kualiti yang dihasilkan adalah teruk.

JPEG (JPG) atau Joint Photographic Experts Group mempunyai kombinasi warna setinggi 16 bit atau 16 million kombinasi tetapi tidak menyokong "transparent". JPEG sesuai digunakan untuk gambar-gambar foto.  Anda tidak seharusnya menggunakan JPEG untuk gambar-gambar kecil bagi membina laman web kerana walaupun berdimensi kecil, tetapi sekiranya dibandingkan dengan GIF, saiznya adalah lebih besar.

PNG atau Portable Network Graphics adalah format gambar yang menyokong kombinasi warna setinggi 32 billions dan "transparent". Saiz yang dihasilkan adalah lebih besar jika dibandingkan dengan GIF dan JPEG tetapi mampu untuk hasilkan kualiti gambar yang lebih cantik. Ia sesuai digunakan pada laman web yang menyediakan muat turun gambar berkualiti tinggi. Satu lagi, saya tidak galakkan penggunaan PNG untuk gambar-gambar kecil yang mempunyai "transparent" kerana kebanyakan laman web yang versi dahulu tidak menyokongnya.

4. Penggunaan kualiti gambar yang sesuai

Bagi laman yang menyediakan gambar-gambar yang berkualiti tinggi untuk dipaparkan, kemungkinan besar anda begitu taksub sehingga menggunakan tahap kualiti yang begitu tinggi. Sebanarnya, semakin tinggi kualiti, saiz yang dikeluarkan adalah lebih tinggi. Namun sebenarnya anda tidak perlu tergopoh gapah dan begitu optimis dengan kualiti.

Cara mengatasi:

Anda boleh gunakan "thumbnails" untuk merujuk kepada saiz asal gambar dengan kualiti yang tinggi berbanding meletakkan terus gambar tersebut pada laman tersebut. Ini akan melambatkan proses muat turun dan tidak semua pengguna mahu melihat gambar tersebut.

Selain itu, anda boleh gunakan proses cuba-cuba terlebih dahulu untuk melihat kualiti yang sesuai untuk gambar yang bakal dihasilkan dengan saiz yang paling minimum tetapi kualiti pada tahap optimum. Lihat gambar di bawah ini yang membandingkan kualiti JPEG pada nilai-nilai yang berbeza.

Only local images are allowed.

Gambar di atas telah saya hasilkan menerusi pelbagai kualiti penyimpanan dalam jenis JPEG. Jika anda perhatikan, pada kualiti 60% dan ke atas, kualiti gambar adalah hampir sama walaupun saya menggunakan "gradient" supaya kesannya lebih jelas. Pada kualiti 50%, "gradient" mula kelihatan bertitik-titik dan kurang licin manakala pada kualiti 20% memang hancur sekali. Oleh itu, saya lebih cenderung untuk menggunakan kualiti 60% dan dapat menjimatkan saiz gambar sebanyak 4.34 KB. Satu nilai yang besar dan hampir menyamai 2 gambar tambahan yang sama.

5. Saiz dan dimensi gambar yang besar

Kebanyakan laman web sekarang yang terlalu taksub dengan konsep rekabentuk berasaskan Web 2.0, hampir 30% menggunakan dimensi dan saiz gambar yang besar-besar. Keadaan ini serba sedikit melambatkan laman anda untuk dipaparkan kerana pengguna gambar yang berdimensi besar meningkatkan kadar paparan sebanyak 110 - 150% dari yang biasa.

Cara mengatasi:

Anda masih boleh menggunakan gambar yang berdimensi besar tetapi dengan saiz gambar yang kecil. Caranya adalah menggunakan teknik pemotongan terhadap gambar yang asal. Seterusnya, ceraikan setiap potongan kepada fail-fail individu dan cantumkan kembali dalam laman web dengan menggunakan elemen <table> atau <div>.

Only local images are allowed.

Setiap gambar yang diceraikan akan dimuat turun secara serentak berdasarkan kepada pembukaan "port" yang kosong. Jika dibandingkan dengan sekeping gambar yang besar, ke semua "port" yang kosong akan ditumpukan sepenuhnya kepada gambar tersebut menyebabkan elemen-elemen atau gambar akan terpaksa menunggu giliran untuk dimuat turun.

Keadaan ini akan menyebabkan anda dapat melihat gambar yang besar sedang dibuka dari atas sampai ke bawah. Dan yang paling teruk sekiranya kelajuan internet pengguna yang agak perlahan kemungkinan besar untuk gambar tersebut terhenti dipertengahan jalan semasa proses paparan akan berlaku.

6. Penggunaan Thumbnails

Anda mungkin juga ingin membina laman web yang memaparkan hasil-hasil karya seperti fotografi, lukisan, gambar-gambar menarik atau mungkin album-album persendirian untuk tontonan umum. Penggunaan gambar-gambar yang disusun secara grid mungkin akan melambatkan proses paparan kerana saiz gambar yang berkualiti tinggi memakan masa untuk dimuat turun.

Anda perlu lebih peka. Walaupun pada keadaan saiz yang kecil yang dimasukkan ke dalam laman web, perlu pastikan bahawa sumber penggunaan gambar tersebut adalah bukan saiz original. Ini kerana walaupun saiz paparan telah dikecilkan, tetapi itu hanya tetapan dari laman web dan proses adalah tetap sama jika anda menggunakan saiz yang asal.

Cara mengatasi:

Hasilkan satu paparan kecil dahulu atau "thumbnails". Bermakna anda mempunyai dua saiz gambar, iaiatu "thumbnails" dan saiz original. Kemudian bentukkan satu pautan pada "thumbnails" ke saiz gambar yang asal. Bermakna, jika pengguna mahu melihat gambar tersebut, dia hanya perlu klik untuk mendapatkan saiz gambaran yang lebih jelas.

Perlu diingat bahawa tidak semua pengguna mahu melihat semua gambar anda. Mungkin hanya satu atau dua, jadi jangan bazirkan masa untuk memuat turun ke semua gambar.

7. Penggunaan gambar dari luaran

Dalam kandungan laman web anda, barangkali terdapat gambar-gambar dari laman web lain yang menjadi pilihan anda. Penggunaan gambar dari sumber luaran selain dari server anda sedikit sebanyak melembabkan paparan laman kerana keupayaan server anda dan server luaran mungkin berlainan. Lebih-lebih lagi jika lokasi server tersebut adalah terlalu jauh dari anda.

Cara mengatasi:

Simpan dahulu gambar tersebut dalam komputer anda dan muat naikkan ke dalam server sendiri. Keadaan ini akan mengurangkan tempoh masa muat turun kerana ke semua sumber adalah dari satu tempat sahaja.

Jika fail seperti perisian atau lagu atau apa jua yang tidak melibatkan proses muat turun ketika laman dibuka, digalakkan hanya menggunakan pautan kerana mungkin ruangan untuk server agak terhad.

Penilaian: 
3
Your rating: None Average: 2.5 (2 votes)