Pengoptimuman PageSpeed — Jadikan Laman Web Anda Lebih Cepat pada 2026

Mengapa Kelajuan Adalah Faktor Penarafan

Google telah mengesahkan bahawa kelajuan halaman mempengaruhi penarafan. Halaman yang lambat menyebabkan pengguna berasa frustrasi, dan Google ingin memberikan pengalaman terbaik. Data dari Google menunjukkan bahawa kebarangkalian pengguna meninggalkan halaman meningkat sebanyak 32% apabila masa pemuatan meningkat dari 1 kepada 3 saat.

Tetapi bukan hanya tentang penarafan. Kelajuan secara langsung mempengaruhi keuntungan anda:

Penukaran — Setiap saat tambahan masa pemuatan mengurangkan penukaran sehingga 7%
Kadar melantun — 53% pengguna mudah alih meninggalkan halaman yang mengambil lebih daripada 3 saat untuk dimuat
Pengalaman pengguna — Halaman yang cepat kelihatan profesional dan boleh dipercayai

Core Web Vitals — Metik Kelajuan Google

Google mengukur kelajuan melalui tiga metrik Core Web Vitals:

LCP — Largest Contentful Paint

Mengukur apabila elemen terbesar yang dapat dilihat (biasanya gambar atau tajuk) selesai dimuat.

Baik: Di bawah 2.5 saat
Perlu penambahbaikan: 2.5 — 4.0 saat
Buruk: Lebih daripada 4.0 saat

INP — Interaction to Next Paint

Mengukur seberapa cepat halaman respons apabila pengguna berinteraksi (klik, taip, tatal).

Baik: Di bawah 200ms
Perlu penambahbaikan: 200 — 500ms
Buruk: Lebih daripada 500ms

CLS — Cumulative Layout Shift

Mengukur berapa banyak susun atur berubah semasa pemuatan. Anda tahu rasa itu — anda ingin mengklik sesuatu, tetapi tiba-tiba kandungan bergerak dan anda tertekan sesuatu yang lain.

Baik: Di bawah 0.1
Perlu penambahbaikan: 0.1 — 0.25
Buruk: Lebih daripada 0.25

10 Tips Pengoptimuman Konkret

1. Mengoptimumkan Imej

Imej biasanya adalah punca terbesar masalah. Gunakan format moden seperti WebP atau AVIF, yang dapat mengurangkan saiz fail sebanyak 30-50% tanpa kehilangan kualiti yang ketara.

Memampatkan semua imej sebelum dimuat naik
Gunakan loading="lazy" pada imej yang tidak dapat dilihat pada muat awal
Sentiasa nyatakan width dan height untuk mengelakkan CLS
Gunakan imej responsif dengan srcset untuk pelbagai saiz skrin

2. Minify CSS dan JavaScript

Buang kod yang tidak digunakan, ruang kosong, dan komen dari fail CSS dan JS anda. Kebanyakan alat binaan melakukan ini secara automatik, tetapi verifikasi bahawa ia sebenarnya berlaku dalam pengeluaran.

3. Aktifkan Pemampatan

Pastikan server anda menghantar fail dengan pemampatan Gzip atau Brotli. Ini boleh mengurangkan saiz fail sehingga 70%.

4. Gunakan Caching Pelayar

Tetapkan header Cache-Control supaya pelayar menyimpan fail statik (CSS, JS, imej) secara lokal. Kali seterusnya pengguna melawat, fail-fail ini tidak perlu dimuat turun lagi.

5. Kurangkan Masa Respons Server

Masa respons server anda (Time to First Byte, TTFB) harus di bawah 200ms. Penyelesaian:

Gunakan penyedia hosting yang pantas
Aktifkan caching sisi server
Optimumkan pertanyaan database
Gunakan CDN untuk menghantar fail statik dari server yang dekat dengan pengguna

6. Tangguhkan JavaScript yang Tidak Kritikal

JavaScript yang tidak diperlukan untuk pandangan awal harus dimuat secara asinkron dengan async atau defer. Ini biasanya termasuk analitik, widget chat, dan penyisipan media sosial.

7. Pra-muat Sumber Kritikal

Gunakan untuk fon, CSS, dan imej yang diperlukan untuk pandangan awal. Ini memberitahu pelayar untuk memberi keutamaan kepada fail-fail ini.

8. Buang Sumber yang Menghalang Render

CSS dan JavaScript dalam menghalang rendering halaman. Pindahkan CSS yang tidak kritikal ke bahagian bawahan, dan masukkan CSS yang diperlukan untuk pandangan awal (CSS kritikal).

9. Gunakan CDN

Rangkaian Penghantaran Kandungan menyebarkan fail anda pada server di seluruh dunia. Pengguna memuat turun dari server terdekat, yang secara signifikan mengurangkan latensi.

10. Mengoptimumkan Fon Web

Fon khusus boleh melambatkan paparan teks:

Gunakan font-display: swap supaya teks muncul dengan fon sementara semasa fon khusus dimuat
Subset fon anda kepada hanya karakter yang anda gunakan
Pra-muat fon yang paling penting
Pertimbangkan fon sistem untuk teks badan

Cara Menguji Kelajuan Anda

Google PageSpeed Insights

Alat rasmi dari Google. Memberi anda data lab (simulasi) dan data lapangan (pengguna sebenar) bersama dengan cadangan penambahbaikan yang konkrit.

Chrome DevTools

Buka DevTools (F12), pergi ke panel "Performance" dan rakam pemuatan halaman. Anda dapat melihat dengan tepat apa yang mengambil masa dan dalam urutan apa fail dimuat.

WebPageTest

Alat pengujian lanjutan yang membolehkan anda menguji dari lokasi dan kelajuan sambungan yang berbeza. Menyediakan diagram air terjun yang terperinci.

Keutamaan — Mulakan Di Sini

Jika anda perlu memilih tiga perkara untuk difokuskan:

Imej — Memampatkan dan menukar ke WebP. Impak terbesar dengan usaha paling sedikit.
Caching — Tetapkan header Cache-Control yang betul. Persediaan satu kali.
JavaScript — Tangguhkan semua yang tidak kritikal. Kurangkan skrip pihak ketiga.

Ingin tahu dengan tepat bagaimana laman anda berfungsi? Jalankan audit percuma dan lihat Core Web Vitals dan skor kelajuan anda.