Core Web Vitals ialah tiga metrik Google yang mengukur kualiti pengalaman pengguna di laman web anda. Skor yang baik merupakan faktor ranking rasmi sejak 2021, dan relevan untuk tapak Malaysia yang berdepan cabaran hosting murah dan imej tidak dioptimumkan.
Apa Itu Core Web Vitals?
Core Web Vitals adalah sebahagian daripada inisiatif Web Vitals Google - satu usaha menyediakan panduan bersatu untuk isyarat kualiti yang membentuk pengalaman pengguna. Tiga metrik ini mengukur tiga aspek berbeza: kelajuan muat, interaktiviti, dan kestabilan visual.
Ia bukan sekadar metrik teknikal. Ia mencerminkan apa yang pengguna sebenarnya rasa semasa melayari laman anda - sama ada kandungan muncul dengan pantas, sama ada butang dan menu bertindak balas dengan segera, dan sama ada halaman melompat-lompat ketika dimuatkan.
Memahami SEO teknikal secara menyeluruh membantu anda meletakkan Core Web Vitals dalam konteks yang lebih luas bersama crawlability, HTTPS, dan schema markup.
Tiga metrik Core Web Vitals dan ambangnya:
| Metrik | Mengukur | Baik | Perlu Penambahbaikan | Lemah |
|---|---|---|---|---|
| LCP | Kelajuan muat | < 2.5s | 2.5s - 4.0s | > 4.0s |
| INP | Interaktiviti | < 200ms | 200ms - 500ms | > 500ms |
| CLS | Kestabilan visual | < 0.1 | 0.1 - 0.25 | > 0.25 |
LCP (Largest Contentful Paint)
LCP mengukur masa yang diperlukan untuk elemen kandungan terbesar dalam viewport dipaparkan kepada pengguna. Elemen ini lazimnya imej hero, banner utama, atau blok teks besar di bahagian atas halaman.
Ambang LCP
Sasaran adalah LCP di bawah 2.5 saat. Antara 2.5 hingga 4.0 saat dikategori sebagai perlu penambahbaikan, manakala melebihi 4.0 saat dianggap lemah dan menjejaskan pengalaman pengguna dengan ketara.
Elemen Yang Dikira Sebagai LCP
- Tag
<img>dengan imej - Elemen
<video>(imej poster) - Elemen dengan imej latar belakang CSS via
url() - Blok teks besar seperti
<p>,<h1>, atau<div>
Punca Biasa LCP Lambat
Masalah pelayan:
- TTFB (Time to First Byte) tinggi akibat hosting shared yang sesak
- Tiada caching halaman dikonfigurasi
- Pangkalan data dengan pertanyaan lambat
Masalah sumber:
- Imej hero bersaiz besar tanpa mampatan (PNG 2MB+ sangat biasa di tapak Malaysia)
- JavaScript yang menghalang rendering (render-blocking)
- Fon web yang lambat dimuatkan
Punca khusus Malaysia: Hosting shared murah menyebabkan kelajuan rendah kerana satu pelayan dikongsi ratusan tapak. Apabila trafik mana-mana tapak melonjak, semua tapak lain pada pelayan yang sama turut perlahan.
Cara Perbaiki LCP
1. Optimumkan imej:
- Tukar imej ke format WebP (saiz 25-35% lebih kecil berbanding JPEG)
- Mampat imej menggunakan alat seperti Squoosh atau ShortPixel
- Gunakan atribut
srcsetuntuk imej responsif - Preload imej LCP dengan tag
<link rel="preload">
2. Kurangkan TTFB:
- Naik taraf ke hosting VPS atau cloud jika TTFB melebihi 600ms
- Dayakan caching halaman (WP Rocket, W3 Total Cache untuk WordPress)
- Gunakan CDN Cloudflare - node Singapore memberikan latensi rendah untuk Malaysia
3. Buang penghalang rendering:
- Tangguhkan (defer) JavaScript yang tidak kritikal
- Inline CSS kritikal di dalam
<head> - Buang plugin atau script yang tidak digunakan
INP (Interaction to Next Paint)
INP menggantikan FID (First Input Delay) sejak Mac 2024. Berbeza dengan FID yang hanya mengukur interaksi pertama, INP mengukur responsiviti semua interaksi sepanjang hayat halaman - setiap klik, ketikan, dan tekanan papan kekunci.
Ambang INP
Sasaran adalah INP di bawah 200 milisaat. Ini bermaksud apabila pengguna mengklik butang, halaman harus bertindak balas dalam masa kurang dari 0.2 saat. Antara 200ms hingga 500ms dianggap perlu penambahbaikan, dan melebihi 500ms terasa seperti laman web “beku” atau rosak.
Punca Biasa INP Tinggi
Berkaitan JavaScript:
- Tugas JavaScript yang berjalan lama dan menyekat main thread
- Event handler yang melakukan terlalu banyak kerja serentak
- Script pihak ketiga seperti chatbot, widget sembang langsung, atau pemuatan iklan berat
- Bundle JavaScript yang terlalu besar
Berkaitan rendering:
- Pengiraan semula gaya (style recalculation) yang kompleks
- Layout yang dipaksa serentak (forced synchronous layout)
Cara Perbaiki INP
1. Audit script pihak ketiga:
- Kenal pasti script yang menyumbang paling banyak kepada blokade main thread menggunakan tab Performance dalam Chrome DevTools
- Tangguhkan pemuatan chatbot atau widget sehingga pengguna berinteraksi
- Buang script yang tidak memberi nilai kepada pengguna
2. Pecahkan tugas JavaScript panjang:
Sebarang tugas JavaScript yang melebihi 50ms boleh menyebabkan halaman terasa tidak responsif. Pecahkan kepada tugas kecil menggunakan setTimeout atau scheduler.yield().
3. Optimumkan event handler: Gunakan teknik debounce untuk peristiwa yang dicetuskan kerap seperti input teks atau scroll, supaya fungsi tidak dijalankan terlalu banyak kali dalam masa singkat.
CLS (Cumulative Layout Shift)
CLS mengukur kestabilan visual halaman - sejauh mana elemen pada halaman melompat atau bergerak secara tidak dijangka semasa pengguna membacanya. Bayangkan anda hampir mengklik butang, tiba-tiba iklan dimuatkan dan butang bergerak ke bawah - itu adalah contoh CLS yang buruk.
Ambang CLS
Sasaran adalah CLS di bawah 0.1. Ini diukur menggunakan formula yang mengambil kira kedua-dua saiz elemen yang bergerak (impact fraction) dan jarak pergerakannya (distance fraction). Skor antara 0.1 hingga 0.25 perlu penambahbaikan, dan melebihi 0.25 dianggap lemah.
Punca Biasa CLS Tinggi
Imej dan media tanpa dimensi:
- Imej yang tiada atribut
widthdanheight- pelayar tidak tahu berapa ruang untuk ditempah sebelum imej dimuatkan - Iklan, embed YouTube, atau iframe tanpa saiz yang ditetapkan
Kandungan dinamik:
- Banner atau notis yang dimuatkan selepas kandungan utama dan menolak kandungan ke bawah
- Fon web yang menyebabkan teks “melompat” ketika fon selesai dimuatkan (FOUT - Flash of Unstyled Text)
- Popup atau bar notis yang muncul dari atas halaman
Cara Perbaiki CLS
1. Tetapkan dimensi untuk semua imej:
Sentiasa sertakan atribut width dan height pada tag <img>. Pelayar menggunakan nilai ini untuk menempah ruang sebelum imej dimuatkan, mengelakkan pergeseran layout.
Alternatifnya, gunakan CSS aspect-ratio untuk memastikan bekas imej mempunyai nisbah yang betul walaupun sebelum imej dimuatkan.
2. Tempah ruang untuk iklan dan embed:
Jika tapak anda menayangkan iklan atau embed luaran, gunakan CSS min-height pada bekas iklan untuk menempah ruang minimum. Ini menghalang kandungan di bawah iklan daripada melompat apabila iklan dimuatkan.
3. Optimumkan pemuatan fon:
Gunakan font-display: swap atau font-display: optional dalam deklarasi @font-face. Ini memberitahu pelayar cara menangani fon ketika ia sedang dimuatkan dan mengurangkan pergeseran teks.
4. Elakkan memasukkan kandungan di bahagian atas:
Jika anda perlu menambah elemen secara dinamik (seperti banner promosi atau notis), tambahkan di bahagian bawah kandungan, bukan di atas. Ini menghalang kandungan yang sedang dibaca daripada bergerak ke bawah.
Kenapa Core Web Vitals Penting untuk Ranking Google
Core Web Vitals menjadi faktor ranking rasmi Google sejak Jun 2021 melalui Page Experience update. Ini bermakna Google secara aktif menggunakan skor ini sebagai salah satu isyarat dalam menentukan kedudukan halaman dalam hasil carian.
Konteks penting:
- Core Web Vitals adalah satu daripada ratusan faktor ranking - kandungan yang relevan dan berkualiti masih lebih penting
- Impak paling ketara dalam SERP yang kompetitif di mana dua halaman mempunyai kualiti kandungan yang hampir sama
- Google menilai desktop dan mudah alih secara berasingan
- Apabila dua halaman setanding dari segi kandungan, halaman dengan Core Web Vitals lebih baik cenderung mendapat kedudukan lebih tinggi
Untuk tapak perniagaan Malaysia - terutama e-dagang dan perkhidmatan profesional - pengoptimuman Core Web Vitals boleh memberi kelebihan nyata berbanding pesaing yang mengabaikannya. Kelajuan halaman juga meningkatkan kadar penukaran kerana pengguna kurang cenderung meninggalkan halaman yang pantas.
Baca lebih lanjut tentang apa itu SEO untuk memahami bagaimana Core Web Vitals sesuai dalam strategi SEO keseluruhan anda.
Cara Ukur Core Web Vitals
Data Lab vs Data Lapangan
| Jenis | Sumber | Kegunaan |
|---|---|---|
| Data Lab | Persekitaran ujian terkawal | Nyahpepijat, pembangunan |
| Data Lapangan | Pengukuran pengguna sebenar (RUM) | Pengalaman sebenar, faktor ranking |
Data lapangan dari Chrome UX Report (CrUX) adalah yang digunakan Google untuk isyarat ranking. Data lab berguna untuk mengesan masalah tetapi tidak mempengaruhi ranking secara langsung.
Alat Pengukuran
Alat Google:
- PageSpeed Insights - data lab dan data lapangan dalam satu laporan; titik mula terbaik untuk audit cepat
- Google Search Console - laporan Core Web Vitals seluruh tapak dengan pecahan halaman yang gagal
- Chrome UX Report - data lapangan agregat untuk domain; boleh diakses melalui BigQuery atau Looker Studio
- Chrome DevTools - panel Performance untuk nyahpepijat interaksi INP secara terperinci
Cara Baca PageSpeed Insights
PageSpeed Insights menunjukkan dua bahagian utama:
Bahagian Data Lapangan (Field Data):
- Berdasarkan pengguna Chrome sebenar dalam tempoh 28 hari lepas
- Menunjukkan lulus atau gagal untuk penilaian Core Web Vitals
- Data ini mempengaruhi ranking
Bahagian Data Lab:
- Ujian simulasi dari pelayan Google
- Berguna untuk nyahpepijat isu spesifik
- Tidak mempengaruhi ranking secara langsung
Jika tapak anda baru atau mempunyai trafik rendah, data lapangan mungkin tidak tersedia. Dalam kes ini, gunakan data lab sebagai panduan sambil membina trafik.
Masalah Core Web Vitals Biasa di Laman Malaysia
Tapak Malaysia menghadapi beberapa cabaran unik yang mempengaruhi skor Core Web Vitals:
1. Hosting Shared Murah
Ramai pemilik tapak SME di Malaysia memilih hosting shared berharga RM3-10 sebulan. Masalahnya, TTFB tinggi - sering melebihi 1-2 saat - terus menjejaskan LCP kerana kandungan tidak boleh dipaparkan sebelum pelayan menjawab permintaan.
Penyelesaian: Pertimbangkan peningkatan ke VPS atau gunakan Cloudflare sebagai lapisan cache di hadapan hosting sedia ada.
2. Imej Besar Tanpa Pengoptimuman
Imej yang dimuat naik terus dari kamera atau telefon - sering berukuran 3-10MB - tanpa sebarang pemprosesan. Ini adalah punca LCP yang paling biasa dan paling mudah diselesaikan.
Penyelesaian: Mampat imej ke bawah 200KB untuk imej hero, guna format WebP, dan tetapkan dimensi yang betul.
3. Script Pihak Ketiga Berlebihan
Widget sembang langsung (live chat), piksel Facebook, Google Tag Manager dengan berpuluh tag, dan pemalam media sosial - semuanya menambah berat halaman dan boleh menyebabkan INP dan LCP yang tinggi.
Penyelesaian: Audit semua script pihak ketiga. Buang yang tidak memberi nilai, tangguhkan yang tidak kritikal, dan muat script sembang hanya apabila pengguna berinteraksi.
4. Tema WordPress Yang Berat
Tema WordPress premium dengan banyak ciri visual sering memuatkan CSS dan JavaScript yang besar walaupun ciri tersebut tidak digunakan.
Penyelesaian: Guna plugin seperti WP Rocket atau Perfmatters untuk menangguhkan script tidak kritikal. Pertimbangkan tema yang lebih ringan atau penyelesaian pembina laman yang dioptimumkan.
Langkah-Langkah Pembaikan Core Web Vitals
Ikuti urutan ini untuk pendekatan yang sistematik:
Langkah 1: Audit dengan PageSpeed Insights Masukkan URL utama tapak anda ke PageSpeed Insights. Baca bahagian “Opportunities” dan “Diagnostics” untuk cadangan spesifik. Fokus pada isu dengan anggaran masa simpanan tertinggi.
Langkah 2: Kenal pasti metrik yang paling jauh dari ambang baik Tangani metrik yang paling jauh dari ambang “baik” dahulu kerana ia memberi impak terbesar kepada pengalaman pengguna dan ranking.
Langkah 3: Optimumkan imej Ini lazimnya memberi pulangan tertinggi dengan usaha paling rendah. Mampat, tukar ke WebP, tetapkan dimensi, dan lazy load imej bawah fold.
Langkah 4: Tangani script pihak ketiga Audit semua script luaran menggunakan tab Network dalam Chrome DevTools. Tanya diri sendiri: adakah script ini perlu? Bolehkah ia ditangguhkan?
Langkah 5: Tingkatkan hosting atau tambah CDN Jika TTFB melebihi 600ms secara konsisten, hosting adalah kesesakan utama. Cloudflare percuma boleh mengurangkan TTFB dengan ketara melalui caching edge.
Langkah 6: Pantau secara berterusan Sediakan laporan Core Web Vitals dalam Google Search Console dan semak setiap bulan. Prestasi boleh merosot selepas kemas kini tema, plugin baru, atau lonjakan trafik.
Lihat panduan SEO on-page untuk memahami bagaimana kelajuan halaman berinteraksi dengan pengoptimuman kandungan - kedua-duanya perlu seiring untuk hasil ranking terbaik.
Core Web Vitals bukan sasaran sekali capai dan lupa. Ia adalah penanda kesihatan tapak yang berterusan. Mulakan dengan PageSpeed Insights hari ini, kenal pasti masalah terbesar, dan selesaikan satu persatu - setiap penambahbaikan memberi manfaat kepada pengguna dan ranking secara serentak.