Penurunan dalam prestasi kelajuan satu-satu laman mungkin boleh disebabkan pelbagai faktor yang menyumbang kepada pembentukan struktur lengkap laman itu sendiri. Dalam proses untuk memastikan kelajuan laman berada di tahap paling optimum, kita memerlukan beberapa alat bantuan yang akan menganalisa dan memaparkan perkara yang boleh diperbetulkan.

Terdapat empat (4) alatan yang sangat berguna dan mudah untuk digunakan bagi memaparkan elemen-elemen. Setiap alatan ini akan diterangkan dengan lengkap fungsi serta cara-cara untuk menggunakanya. Alatan di bawah disenaraikan mengikut urutan bagi memudahkan proses kerja.

1. Validasi kod aturcara dengan W3C Validator

Dapat peringkat awal, kita perlu memastikan kod binaan laman yang dihasilkan oleh sistem atau kita tulis adalah menepati piawai Konsortium W3C. Ini bertujuan memastikan setiap kod yang dipaparkan tidak diganggu dengan kod-kod tergantung dan mendapat penulisan kod yang sempurna.

http:/kripkornstudios.com.my/ahli-berdaftar/parasolx

Layari http://validator.w3.org/. Terdapat tiga cara untuk memeriksa laman iaitu menerusi URL, muat naik fail atau memasukkan secara terus keseluruhan kod. Pada pilihan "More options" terdapat beberapa pilihan yang mungkin dapat membantu. Sekiranya anda tidak pasti jenis dokumen yang digunakan pada laman, abaikan kedua-dua pilihan ini.

Seterusnya tandakan kekotak "Show source". Ini akan membolehkan pada keputusan akhir, keseluruhan struktur dokumen yang dibaca oleh perisian validasi ini ditunjukkan. Amat berguna untuk laman menggunakan sistem kandungan dokumen atau kandungan dinamik. Setelah itu klik butang "Check" unutk memulakan proses tersebut.

http:/kripkornstudios.com.my/ahli-berdaftar/parasolx

Dalam contoh di atas, laman https://parasolx.net adalah piawai kepada W3C dengan jenis dokumen HTML5. Keputusan ini berlainan untuk jenis dokumen yang lain kerana standard yang ditetapkan adalah berlainan. HTML5 adalah jenis atau kod piawai yang paling terbaru. Dan sekiranya terdapat ralat, anda perlu melihat kepada analisis keputusan yang ditunjukkan seperti berikut:

http:/kripkornstudios.com.my/ahli-berdaftar/parasolx

Elemen yang ralat ditunjukkan setiap satu. Seperti dalam contoh di atas, untuk elemen "a", disenaraikan penggunaan atribut yang sah dan boleh digunakan. Perhatikan terdapat atribut "title" dan "alt" yang kedua-dua tidak wujud dalam senarai yang dipaparkan. Seterusnya dengan cara membuang kedua-dua atribut tersebut, lakukan proses validasi semula untuk menyemak semula.

2. Periksa skor kelajuan laman dengan "Page speed" atau "YSlow"

Setelah kita selesai memastikan ke semua kod aturcara laman adalah sah, langkah seterusnya melihat kemampuan atau faktor-faktor lain yang mempengaruhi kelajuan laman. Page speed (dikeluarkan oleh pihak Google) adalah alat yang boleh dimuat turun secara percuma. Perisian ini merupakan sambungan fungsi kepada Mozilla Firefox dan terhad kepadanya sahaja. Dalam erti kata lain, anda pelu mempunyai perisian pelayar Firefox untuk menggunakannya.

Perisian lain iaitu YSlow (dikeluarkan oleh pihak Yahoo!) juga boleh digunakan dan fungsinya adalah sama. Yang membezakan kedua-duanya adalah bentuk, algoritma dan skor penilaian yang diberikan. Namun kedua-duanya menghasilkan keputusan yang hampir sama. Setelah selesai proses pemasangan, kita jalankan proses analisa untuk melihat skor nilai yang diperoleh.

http:/kripkornstudios.com.my/ahli-berdaftar/parasolx

Skor yang diperoleh untuk laman yang sama adalah 88%. Ia juga menyenaraikan aspek-aspek yang boleh dipertingkatkan untuk menaikkan skor. Contoh di atas, apa yang boleh dilakukan adalah:

  • meringkaskan dan memadatkan fail-fail Javascript yang digunakan kepada saiz yang lebih kecil
  • menetapkan masa "cache" untuk elemen-elemen dalam laman supaya lebih lama.

Setiap laman mungkin akan ditunjukkan menunjukkan keputusan yang berlainan. Anda boleh bermula dengan menyelesaikan satu-satu masalah sehingga satu tahap skor optimum diperoleh. Tidak terdapat satu nilai skor piawai yang ditetapkan tetapi semakin tinggi skor, semakin tinggi prestasi laman.

3. Periksa setiap satu elemen yang membina laman

Dua langkah di atas lebih ke arah teknikal untuk memastikan elemen-elemen yang membina sau-satu laman berada dalam keadaan paling optimum. Seterusnya kita akan memeriksa prestasi setiap elemen tersebut satu-satu persatu bagaimana ia mempengaruhi kelajuan laman. Untuk langkah ini, layari laman web Web Page Test, https://www.webpagetest.org/.

Dalam langkah 1 dan 2, setiap analisa yang dilakukan tidak mengambil kira lokasi pengguna dan lokasi penghosan web yang menempatkan kandungan laman. Untuk analisa ketiga, kita berupaya untuk memeriksa setiap satu elemen berdasarkan kepada lokasi pilihan.

http:/kripkornstudios.com.my/ahli-berdaftar/parasolx

  • Untuk memulakan proses analisa, anda perlu memasukkan alamat URL halaman utama.
  • Seterusnya pilih lokasi pelayan untuk dilakukan percubaan.
  • Kemudian klik butang "Start Test".
  • Tunggu sehingga proses ini selesai dan kita akan mula untuk menganalisa keputusan yang diperoleh.

Keputusan berikut akan dipaparkan. Terdapat 3 data rumusan yang boleh digunakan untuk analisis.

http:/kripkornstudios.com.my/ahli-berdaftar/parasolx

Rumusan 1 -- menjelaskan masa, saiz dokumen dan jumlah permintaan untuk melengkapkan paparan laman web

Rumusan 2 -- memberikan gambaran secara demografik proses muat turun setiap elemen untuk paparan pertama kali (tanpa sebarang "cache")

Rumusan 3 -- gambaran demografik proses muat turun untuk paparan kali kedua, iaitu sekiranya "cache" sudah dimuat turun untuk pertama kali.

Bahagian yang perlu dilihat untuk proses pengoptimuman kelajuan laman adalah Rumusan 1 dan Rumusan 2. Untuk rumusan 1 beri penekanan kepada bilangan permintaan "Request". Ini adalah faktor terbesar yang menentukan kelajuan laman. Semakin tinggi nilai ini, semakin perlahan laman anda. Untuk maklumat yang lebih mendalam, rujuk pada demografik di rumusan 2.

http:/kripkornstudios.com.my/ahli-berdaftar/parasolx

Anda boleh klik pada gambar di bawah lajur "Waterfall" untuk melihat aturan proses muat turun setiap elemen. Dari sini kita dapat melihat garis masa setiap elemen. Sekiranya terdapat elemen yang mempunyai masa terlalu lama untuk dimuat turun, buangkannya dari halaman utama. Dengan cara ini kita dapat mengurangkan masa yang diperuntukkan sebelum ini.

Pada bahagian lajur "Optimization Checklist" menyenaraikan cara-cara yang boleh dilakukan bagi mengoptimumkan setiap elemen. Antaranya adalah mengurangkan saiz gambar, meningkatkan tempoh masa "cache" setiap elemen dan jika mampu aktifkan sistem CDN.

4. Bandingkan laman anda dengan laman lain

Setelah selesai melakukan ketiga-tiga di atas dan langkah pengoptimuman telah diambil, sampailah ke peringkat terakhir. Di bahagian ini kita cuba untuk mencabar kelajuan halaman kita dengan mana-mana halaman yang mungkin setaraf atau boleh dijadikan sebagai rujukan. Selalunya, bagi mendapatkan tahap kepuasan yang sepenuhnya, saya sering mencabar dengan laman web Google.

Layari laman ini: whichloadsfaster.com (laman sudah tidak wujud, alternatif web: https://www.webpagetest.org/compare). Web ini menyediakan dua ruangan iaitu kiri dan kanan. Masukkan halaman anda pada mana-mana bahagian dan pihak pencabar pada sebelah yang berlawanan. Kemudian jalankan pembandingan.

Bagi membolehkan proses ini dilakukan dengan lebih sempurna, saya gunakan fungsi "Repeat" dan nilai ditetapkan kepada 20. Dan hasil pembandingan adalah seperti berikut:

http:/kripkornstudios.com.my/ahli-berdaftar/parasolx

Sungguhpun laman web ini tidak mampu untuk menandingi Google, tetapi hanya ketinggalan 38% di belakang Google yang mempunyai paparan yang begitu ringkas. Anda boleh melakukan ujian ini setiap kali proses optimuman untuk langkah 1 hingga 3 selesai dilakukan. Dengan cara ini kita dapat melihat tahap keberkesanan proses "tuning" yang dilakukan.

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

Komen

wadai's picture

Rasa macam ketinggalan bas pulak.. post ni memang dah lama tp info ni sangat membantu.. tq para