Utama / Kandungan Artikel / Umum / Kelajuan Web Optimum
Blogging Umum

Kelajuan Web Optimum

Kelajuan Web
Laman web yang baik bukan sahaja bergantung kepada penulisan yang bagus semata-mata ianya hendaklah menitikberatkan prestasi optimum dan rekabentuk supaya lancar dan selesa ketika pelawat melayari laman web / blog anda yang membuatkan mereka suka untuk terus melihat kandungan blog dan menjadi pelawat setia.

Pengenalan

Salah satu pertimbangan yang paling penting dalam pembangunan laman web adalah untuk memastikan ia loading dengan cepat. Sebelum anda mula untuk mengoptimumkan laman web anda, nilai perkembangan penting untuk melihat bagaimana ia berfungsi. Salah satu cara untuk melakukan ini adalah mengukur prestasi web anda supaya ia menjadi penanda aras untuk dinilai. Pilihan terbaik yang boleh digunakan ialah Pingdom dan PageSpeed Insights oleh Google.

Ukur Prestasi Web

PageSpeed Insights

Lawati: PageSpeed Insights

Google PageSpeed Insights menunjukkan keputusan untuk mudah alih dan desktop bersama-sama senarai perkara untuk diperbaiki. Ukuran rating yang diperoleh bukan bermakna kelajuan web anda, ianya mengukur sejauhmana web anda telah aplikasikan perkara-perkara penting bagi meningkatkan prestasi.

Pingdom

Lawati: Speed Test

Klik Settings dan pilih lokasi yang paling dekat dengan pelayan web anda. Sebagai contoh web adiazudin.com dihoskan oleh Exabytes Network menggunakan pelayan mereka di Kuala Lumpur. Berdasarkan lokasi pilihan yang disediakan oleh Pingdom, paling hampir dengan Malaysia ialah Melbourne, Australia. Paste URL laman web anda dan klik Test Now.

Pingdom akan merumuskan prestasi terbaik laman web berdasarkan 4 metrik:

  • Perf. Grade.
  • Requests.
  • Load time.
  • Page size.
Kelajuan Web - Pingdom Speed Test
Keputusan ujian kelajuan

Antara 4 metrik ini, paling penting untuk dinilai ialah Load time!

Load time laman web ini mencapai prestasi terpantas setakat ini dengan tempoh loading kurang dari 1 saat iaitu 694ms.

Gred prestasi adalah garis panduan umum bagaimana laman web anda dioptimumkan, tetapi ia tidak penting untuk mendapatkan skor yang sempurna. Kelajuan loading (Load time) adalah perkara paling penting wajib ditekankan, paling cepat adalah paling baik kerana apabila Google melawat laman web anda, ia tidak peduli atau ambil tahu soal skor / gred prestasi, hanya tempoh masa loading diambil kira.

Purata Kelajuan Yang Tepat

Perlu diingatkan ketika menjalankan Pingdom Speed Test, lakukan ujian beberapa kali terutama jika laman web anda menggunakan Cache. Ini kerana ketika kali pertama sesebuah halaman web dilawati (termasuklah bot Pingdom) versi bukan cache diperoleh, saya akan terangkan berkenaan cache di bahagian Perkara Penting Untuk Tingkatkan Prestasi. Cara cache dijana ialah pelawat pertama akan mengaktifkan versi cache terhadap sesuatu halaman, kita tidak tahu adakah kita pelawat pertama bagi sesuatu halaman, kebiasaannya saya lakukan 3 kali untuk bacaan akhir yang tepat.

Laman web adiazudin.com menggunakan cache premium oleh WP Rocket supaya menjana prestasi terbaik dan optimum.

Perkara Penting Tingkatkan Prestasi

a. Prestasi Server

Server atau dalam Bahasa Melayu ialah Pelayan. Pelayan web ialah tempat dimana pengkalan data anda disimpan. Nyawa kepada laman web anda terletak di sini. Pelayan yang kita guna adalah sebuah komputer yang memiliki spesifikasi memori, processor, jumlah storan yang dibekalkan serta jenis storan yang digunakan. Semua aspek ini membawa kepada kelajuan server anda.

Kebiasaan pemilik domain yang baru mengendalikan laman web menggunakan pelayan yang dikongsi bersama pemilik domain lain iaitu Share Hosting kerana ia ditawarkan pada harga yang murah. Jika kewangan anda lebih stabil dalam ertikata lain anda mampu membayar kos yang lebih mahal, pilihan seterusnya ialah Semi-Dedicated Server dan yang terbaik ialah Dedicated Server yang mana anda tidak berkongsi dengan orang lain. Dedicated Server menawarkan prestasi yang lebih berkuasa yang semestinya membawa kepada prestasi yang unggul.

Harga yang bakal anda bayar berdasarkan kepada syarikat penyedia perkhidmatan yang dipilih, sebagai contoh harga bagi Exabytes Network:

Laman web ini menggunakan perkhidmatan Exabytes Network, jadi contoh yang saya nyatakan adalah harga yang mereka tawarkan.

b. Penggunaan CDN

CDN ialah singkatan kepada “Content Delivery Network” iaitu rangkaian pelayan (server) yang bertugas menyebarkan kandungan cache web anda kepada pelawat melalui server yang paling hampir dari segi kedudukan geografi mereka. Maknanya ialah pelawat mendapat akses terhadap cache web dari server paling hampir dengan mereka supaya menerima dengan lebih pantas.

Laman web ini menggunakan servis CDN daripada CloudFlare. Boleh tonton video ringkas di bawah:

CDN CloudFlare

Terdapat 76 Pusat Data dalam rangkaian CloudFlare, ada satu di dalam negara di Kuala Lumpur dan negara jiran Singapore. Boleh rujuk peta: The CloudFlare Global Network.

Penyedia rangkaian CDN yang popular:

c. Pemampatan Imej

Imej pasti digunakan dalam laman web anda, jangan abaikan soal saiz imej yang dimuatnaik kerana kelajuan loading setiap artikel juga terpengaruh dengan saiz imej yang digunakan. Sila pastikan imej optimum dari segi saiz fail dan ukuran yang digunakan bersesuaian dengan layout web anda. Tujuannya ialah jangan membazir ruang, bandwidth dan paling mustahak masa loading jangan dibazirkan dengan menunggu imej muncul satu demi satu.

Imej yang digunakan bagi laman web disimpan dalam format JPG ataupun PNG. Saiz ideal ialah tidak lebih daripada 400KB, seboleh-bolehnya kurang daripada 100KB.

Bagaimana untuk mampatkan imej supaya ia disimpan dalam saiz yang kecil. Saya sering menggunakan servis mampatan imej yang disediakan oleh Imagify.io ataupun TinyJPG / TinyPNG.

Satu perkara lagi, bagi pengguna WordPress terdapat plugin untuk mampatkan imej tetapi saya tidak mahu guna. Adalah lebih baik install plugin seminima yang boleh iaitu yang betul-betul mustahak sahaja. Tidak perlu untuk install selagi boleh dalam WordPress sehingga menjejaskan prestasi, saya hanya ada 18 plugins yang digunakan dalam WordPress. Proses mampatkan imej boleh dibuat secara manual ketika anda dalam proses menulis artikel.

Baca juga artikel berikut:

Kecilkan saiz imej dengan TinyPNG

d. Minify HTML, CSS & JS

Minify atau pengecilan adalah membuang aksara atau ruang di dalam kod yang tidak diperlukan bagi menjalankan kod berkenaan.

Perkara yang tidak diperlukan ialah:

  • Ruang kosong antara aksara.
  • Perenggan baru.
  • Komen / label.
  • Tanda pemisah.

4 perkara yang disebutkan di atas dibuang kerana tidak penting dibiarkan untuk disimpan kerana tanpanya kod lebih bersih dan cepat dibaca oleh server. Kod yang terlibat ialah CSS, HTML dan JavaScript. Dengan mengurangkan jumlah kod yang perlu dipindahkan melalui web, proses ini lebih lancar, kod yang kecil dan menjimatkan bandwidth.

Proses minify boleh dilakukan secara auto dan manual. Melalui Cache Plugin / CloudFlare fungsi minify boleh diaktifkan. Boleh juga untuk minify CSS secara manual seperti yang saya lakukan untuk stylesheet utama web ini. Saya lakukan proses minify CSS di laman web CSS Minifier, kemudian copy dan paste dalam style.css.

e. Cache

Dalam konteks pengkomputeran, cache adalah tempat untuk menyimpan data buat sementara waktu.

Data aktif sering dicache untuk mengurangkan tempoh loading. Apabila anda kembali ke laman web yang kerap diakses, pelayar web mengakses bahagian fail yang telah disimpan sebagai cache. Ini bermakna bahawa pelayar web mengulangi maklumat sedia ada, keadaan ini membuat proses loading menjadi lebih cepat.

Cara cache plugin berkerja adalah dengan menyimpan fail-fail HTML yang dihasilkan secara dinamik dan menggunakan semula data yang dihasilkan sebelum ini apabila permintaan dibuat oleh pelawat laman web berkenaan. Kaedah ini bagi mengelakkan daripada proses membaca skrip PHP dari pengkalan data WordPress berulang setiap kali pelawat refresh laman yang telahpun disimpan dalam cache. Melainkan cache tersebut dipadamkan dan perlu dihasilkan semula.

Saya harap penerangan ini anda boleh faham, sesiapa yang menggunakan cache plugin akan sedar proses ini.

Cache Plugin yang popular dikalangan pengguna WordPress ialah W3 Total Cache, WP Super Cache dan Hyper Cache. Sesetengah memilih plugin premium seperti WP Rocket yang saya gunakan untuk laman web ini.

WP Rocket menawarkan ciri-ciri yang lebih luas daripada cache plugin percuma yang lain. Penggunaannya adalah berbaloi walaupun terpaksa mengeluarkan belanja sebanyak USD$39 (RM158) untuk satu domain.

Rujuk: Ciri-ciri WP Rocket.

Kesimpulan

Seperti yang anda lihat, terdapat banyak perkara yang boleh dilakukan untuk meningkatkan prestasi laman web. Beberapa penyelesaian mungkin mudah untuk dilaksanakan, manakala sesetengahnya kadangkala ia memakan masa. Namun begitu, tugas memastikan prestasi terbaik adalah amat penting. Jika laman web anda tidak dioptimumkan dengan baik, anda menghadapi risiko kehilangan pelawat dan tiada sesiapapun yang mahu perkara buruk ini terjadi.

Kandungan Lain

Kandungan Lain

Nota KBAT Sejarah Tingkatan 5
Nota KBAT Sejarah Tingkatan 5
Kerja dari rumah dengan iLancee

Tambah Komen

Baca Polisi Komen

Komen anda sangat dialu-alukan pada blog ini tetapi admin telah menetapkan piawaian dalam meluluskan komen. Komen tidak diluluskan jika terdapat perkara-perkara yang disebutkan di bawah ini:

  1. Komen adalah spam.
  2. Beriklan di ruangan komen.
  3. Mengandungi bahasa kesat dan tidak sopan.
  4. Komen tidak berkaitan topik artikel.
  5. Mengandungi singkatan perkataan.
  6. Kesalahan tatabahasa seperti perkataan bermula dengan huruf kecil di awal ayat, ejaan kata nama khas tidak dimulakan dengan huruf besar dan penggunaan elipsis sesuka hati.

Polisi ini adalah tertakluk kepada perubahan pada bila-bila masa tanpa sebarang notis.

Klik di sini untuk kirim komen

Perkongsian Artikel

Jika artikel ini bermanfaat, sila kongsikan bersama rakan-rakan anda!

Kelajuan Web Optimum

Kelajuan web adalah aspek penting yang perlu diberikan perhatian oleh setiap webmaster dan blogger. Apakah elemen yang terlibat?

Kongsi bersama rakan