Skip to content

Domain, hosting, code and data — in your name, in writing

jagaweb

Penyelenggaraan & Penjagaan Laman

Mengapa Laman Web Malaysia Anda Mengambil Masa 4 Saat untuk Dimuatkan pada CelcomDigi & Maxis (Dan Cara Membaikinya)

•9 min bacaan•Oleh JagaWeb

Mendiagnosis kependaman mudah alih pada rangkaian 4G/5G tempatan: lokasi pelayan (Singapura vs AS), kedalaman DOM Elementor, beban fon, dan caching pinggir.

Ilusi Wifi Pejabat vs Realiti Rangkaian Mudah Alih Malaysia

Salah satu kesilapan paling lazim dalam kalangan pemilik perniagaan di Malaysia adalah menguji kelajuan laman web mereka menggunakan komputer riba pejabat yang disambungkan ke rangkaian gentian optik Unifi 500Mbps. Dalam persekitaran ideal tersebut, laman web kelihatan dibuka dalam masa 1 saat, memberikan rasa selamat yang palsu.

Namun hakikatnya berbeza: kebanyakan pelanggan perniagaan di Malaysia melayari laman web melalui telefon pintar pada rangkaian selular CelcomDigi, Maxis, atau U Mobile, bukan komputer riba di pejabat.

Apabila diuji pada peranti mudah alih sebenar melalui sambungan 4G/5G, laman web yang sama boleh mengambil masa jauh lebih lama untuk dipaparkan sepenuhnya. Kajian Google sendiri mengenai kelajuan laman mudah alih mendapati bahawa laman yang memuat kira-kira satu saat lebih pantas boleh meningkatkan kadar penukaran sehingga 27%, dan kebarangkalian pelawat meninggalkan laman (bounce) meningkat mendadak apabila masa pemuatan bertambah (Think with Google, "Why marketers should care about mobile page speed").

Mengapakah laman web WordPress Malaysia begitu lembap pada rangkaian mudah alih, dan apakah langkah kejuruteraan konkrit untuk membaikinya ke tahap di bawah 1.5 saat?


5 Punca Teknikal Laman Web Mengambil Masa 4 Saat pada Rangkaian Tempatan

flowchart TD
    A[Telefon Pintar CelcomDigi / Maxis] -->|1. Kependaman Selular| B[Menara Selular Tempatan]
    B -->|2. Pelayan jauh di AS: kependaman merentasi lautan| C[Pelayan Asal AS]
    C -->|3. PHP & MySQL Menjana HTML Tanpa Cache| D[Penghasilan Dokumen]
    D -->|4. Muat Turun Fon Google & Ikon Luaran| E[Halangan Pemaparan FOIT]
    E -->|5. Penghuraian DOM Elementor Yang Kembung| F[Pemaparan Visual Akhir LCP: Lambat]

    style F fill:#dc2626,stroke:#fff,color:#fff

1. Kependaman Fizikal Geolokasi Pelayan (AS vs Singapura / Kuala Lumpur)

Banyak agensi web di Malaysia melanggan perkhidmatan hosting murah yang menempatkan pusat data mereka di Amerika Syarikat (seperti Dallas, Texas atau California).

  • Setiap sambungan web mudah alih memerlukan proses jabat tangan TCP dan keselamatan TLS (HTTPS). Kependaman pergi-balik (RTT) dari bandar-bandar utama Asia ke pelayan Pantai Timur AS biasanya berada dalam lingkungan 180ms hingga 220ms (SpeedTestHQ, Average Internet Latency by Country).
  • Sebelum pelayar telefon pelanggan menerima sebarang bait data pertama (TTFB), sistem sudah membazirkan lebih daripada satu saat hanya untuk rundingan rangkaian merentasi lautan itu.
  • Sebaliknya, pelayan yang ditempatkan di Singapura (AWS ap-southeast-1) atau pusat data Kuala Lumpur (AIMS) berada pada lingkungan serantau yang jauh lebih dekat — RTT yang jauh lebih rendah, walaupun nombor tepatnya bergantung pada telco dan laluan rangkaian sebenar, jadi lebih baik diuji sendiri daripada dipetik sebagai satu angka tetap.

2. Pembengkakan Pokok DOM (DOM Tree Bloat) Pembina Laman Visual

Pembina halaman visual seperti Elementor, Divi, atau WPBakery memudahkan pereka grafik menyusun elemen tanpa menulis kod. Namun, di sebalik tabir, alat ini menjana struktur HTML yang sangat kembung:

  • Untuk memaparkan satu kotak teks ringkas, Elementor boleh menjana 8 hingga 12 lapisan <div> bersarang (elementor-section -> elementor-container -> elementor-column -> elementor-widget-wrap -> elementor-element).
  • Halaman utama purata di Malaysia kerap mempunyai kedalaman pokok DOM melebihi 32 peringkat dengan jumlah nod DOM melebihi 1,800 elemen.
  • Telefon pintar kelas pertengahan (seperti siri Redmi atau Samsung Galaxy A yang digunakan meluas di Malaysia) mempunyai cip pemproses (CPU) mudah alih yang terhad. Pelayar telefon terpaksa menghabiskan masa 1.2 hingga 1.8 saat semata-mata untuk menghuraikan struktur pokok DOM dan mengira susun atur visual (style layout reflow), membekukan skrin pengguna.

3. Fon Web Luaran Menyekat Pemaparan (Render-Blocking Google Fonts)

Amalan biasa memuatkan fail fon Google Fonts terus dari fonts.googleapis.com mencetuskan masalah kependaman serius pada rangkaian selular:

  • Pelayar telefon mesti menyelesaikan sambungan DNS pihak ketiga baharu ke pelayan Google.
  • Tanpa sifat CSS font-display: swap, pelayar telefon akan menyembunyikan semua teks sehingga fail fon selesai dimuat turun sepenuhnya—fenomena yang dikenali sebagai Flash of Invisible Text (FOIT). Pelanggan anda hanya melihat kotak kosong putih selama 2 saat pertama.

4. Lambakan Piksel Pemasaran & Skrip Penjejakan Pihak Ketiga

Banyak laman perniagaan memuatkan skrip penjejakan pemasaran secara serentak pada bahagian pengepala (<head>): Facebook Pixel, TikTok Pixel, Google Tag Manager, Hotjar, dan widget sembang WhatsApp pihak ketiga.

  • Berkas skrip JavaScript ini melebihi 600 KB kod yang tidak dimampatkan.
  • Kerana skrip ini dimuatkan secara segerak (synchronous), ia menyekat utas utama (main thread) pelayar mudah alih, menghalang kandungan utama daripada dipaparkan kepada pelawat.

5. Ketiadaan Penimbalan Pinggir Tempatan (Missing Edge POP Caching)

Setiap kali pengguna mengklik pautan, permintaan dihantar kembali ke pelayan asal untuk diproses semula oleh enjin PHP-FPM dan pangkalan data MySQL, walaupun kandungan halaman tidak pernah berubah. Ketiadaan penimbalan pada nod pinggir (Edge CDN) di Kuala Lumpur (KUL) memaksa rangkaian mudah alih mengharungi kesesakan laluan antarabangsa berulang kali.


Pelan Tindakan Kejuruteraan: Mempercepatkan Laman ke Bawah 1.5 Saat

Memperbaiki kelajuan laman web mudah alih bukan tentang memasang pemalam pembersihan cache percuma secara rawak. Ia memerlukan pelan pengoptimuman berperingkat yang menyusun semula aliran penghantaran aset.

Langkah 1: Melaksanakan Penimbalan Pinggir Penuh (Cloudflare Edge Cache Rules)

Kandungan HTML statik mesti disimpan pada nod Point of Presence (POP) Cloudflare tempatan di AIMS Kuala Lumpur (KUL) dan Cyberjaya (CJ1):

PERATURAN CACHE CLOUDFLARE EDGE (PAGE RULES):
- URL Sasaran: perniagaan-anda.com.my/*
- Cache Level: Cache Everything
- Edge Cache TTL: 7 Hari
- Browser Cache TTL: 4 Jam
- Pengecualian Automatik (Bypass on Cookie): 
  -> wp-.* | wordpress.* | comment_.* | woocommerce_items_in_cart

Dengan konfigurasi ini, 90% pelawat mudah alih tempatan menerima kandungan HTML terus dari pusat data Cyberjaya dalam masa kurang 50 milisaat, tanpa membebankan pelayan asal anda.

Langkah 2: Pengehosan Fon Tempatan (Self-Hosting Subset WOFF2)

Hapuskan sambungan luaran ke pelayan Google Fonts:

  1. Muat turun fail fon hanya untuk subset aksara Latin dalam format moden WOFF2 (saiz fail 70% lebih kecil).
  2. Simpan fail fon di dalam pelayan anda sendiri atau storan CDN.
  3. Tetapkan sifat CSS font-display: swap bagi memastikan teks dipaparkan serta-merta menggunakan fon sistem peranti sementara fon tersuai dimuat turun di latar belakang:
/* Pengehosan Fon WOFF2 Tempatan dengan Paparan Serta-merta */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6;
}

Langkah 3: Pengoptimuman Imej Generasi Baharu (WebP / AVIF) Responsif

Jangan sekali-kali menghantar imej promosi beresolusi 2,400 piksel (saiz 2MB) kepada pengguna telefon pintar dengan skrin selebar 390 piksel.

  • Tukar semua imej JPEG dan PNG kepada format WebP atau AVIF dengan kualiti mampatan 82%.
  • Gunakan atribut HTML responsif srcset supaya pelayar telefon hanya memuat turun saiz imej yang sepadan dengan lebar skrin fizikal mereka:
<img src="/images/banner-subang-400w.webp"
     srcset="/images/banner-subang-400w.webp 400w,
             /images/banner-subang-800w.webp 800w,
             /images/banner-subang-1200w.webp 1200w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Pusat Servis Alat Ganti Malaysia"
     loading="lazy"
     decoding="async"
     width="800" height="450">

Langkah 4: Penangguhan Skrip Pihak Ketiga Bukan Kritikal (defer & async)

Alihkan semua piksel penjejakan pemasaran (Meta Pixel, Google Analytics) keluar daripada utas pemaparan utama:

  • Pasang atribut defer pada skrip pihak ketiga supaya ia hanya dimuatkan selepas visual utama halaman siap dipaparkan.
  • Atau gunakan penyelesaian Cloudflare Zaraz untuk memproses piksel pemasaran pada lapisan pelayan pinggir (server-side analytics), menghapuskan beban JavaScript pada telefon pelanggan sepenuhnya.

Langkah 5: Konfigurasi Nginx untuk Pemampatan Brotli

Pastikan pelayan web anda memampatkan fail teks menggunakan algoritma Brotli (br), yang 20% lebih mampat daripada Gzip:

# Konfigurasi Pemampatan Brotli Nginx
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/javascript application/json image/svg+xml;

# Header Kawalan Cache Aset Statik
location ~* \.(woff2|webp|avif|css|js)$ {
    expires 1y;
    add_header Cache-Control "public, no-transform, immutable";
}

Anggaran Peningkatan Prestasi (Contoh Ilustrasi)

Jadual di bawah adalah contoh ilustrasi, bukan data yang diukur daripada pelanggan tertentu — ia menunjukkan arah dan skala perubahan yang biasa dijangkakan daripada setiap pembetulan di atas:

Metrik PrestasiSebelum (Hosting Kongsi / Kod Kembung)Selepas (Hosting Serantau + Cache Pinggir)Arah
Largest Contentful Paint (LCP)Gagal ambang Google (>2.5s)Lulus (<2.5s)Peningkatan
Time to First Byte (TTFB)Perlahan (1,000ms+)Pantas (jauh di bawah 200ms)Peningkatan besar
Interaction to Next Paint (INP)Sederhana/perlahanResponsif (<200ms)Peningkatan
Cumulative Layout Shift (CLS)Susun atur melompatStabilPeningkatan
Saiz Halaman KeseluruhanBeberapa MBDi bawah 1 MBPengurangan

Angka sebenar bagi mana-mana laman bergantung pada titik permulaannya — anggap ini sebagai panduan arah, bukan hasil yang dijanjikan.


Mengekalkan Kelajuan dengan Penjagaan Berterusan

Pengoptimuman kelajuan laman web bukanlah projek sekali bayar yang kekal selamanya. Setiap kali kakitangan anda memuat naik gambar produk baharu, memasang pemalam baharu, atau menambah skrip iklan Facebook baharu, kelajuan laman web mudah terjejas semula.

Di bawah Pelan JagaWeb Care (RM450/bulan), kami menjalankan semakan kesihatan prestasi dan pengoptimuman kelajuan sebagai sebahagian daripada penjagaan berterusan, supaya imej baharu atau pemalam baharu yang melambatkan laman anda dikesan sebelum ia menjadi masalah besar.

Bagi laman web sedia ada yang mengalami masalah kelajuan kritikal tetapi tidak diketahui puncanya, kami menyediakan Semakan Pemilikan & Akses (RM1,500) untuk menganalisis pangkalan data, kependaman pelayan, dan kesesakan kod anda—dengan yuran penuh RM1,500 dikreditkan semula ke atas kerja penambahbaikan sistem yang layak dalam tempoh 12 bulan.

WhatsApp