Langkau ke kandungan

Asas Core Web Vitals dan Kelajuan Halaman

Fahami LCP, INP dan CLS, bezakan data lapangan daripada ujian makmal, serta semak pengalaman halaman mengikut turutan.

Pembangun mengurus tiga skrin yang saling bersambung
Jack Lee
6 Minit Bacaan
Kongsi
Dalam Halaman Ini

Core Web Vitals ialah tiga ukuran pengalaman halaman: pemuatan, respons dan kestabilan visual. Kenal pasti ukuran yang lemah dahulu, kemudian siasat elemen atau interaksi yang terlibat.

Halaman produk perkakas dapur mungkin memaparkan gambar utama lewat, tersekat apabila pembeli memilih model, dan mengalihkan butang beli apabila notis stok muncul. Setiap masalah memerlukan pembaikan berbeza.

Apakah Tiga Metrik Core Web Vitals?

MetrikPerkara yang diukurBaikLemah
LCP
Largest Contentful Paint
Masa imej atau blok teks terbesar yang kelihatan muncul semasa pemuatan2.5 saat atau kurangMelebihi 4 saat
INP
Interaction to Next Paint
Respons daripada klik, ketikan atau tekanan kekunci hingga kemas kini skrin seterusnya200 milisaat atau kurangMelebihi 500 milisaat
CLS
Cumulative Layout Shift
Pergerakan kandungan yang kelihatan tanpa dijangka; skor tanpa unit0.1 atau kurangMelebihi 0.25

Nilai yang melebihi ambang baik tetapi belum memasuki julat lemah memerlukan penambahbaikan. Penilaian menggunakan persentil ke-75 bagi lawatan yang diukur: sekurang-kurangnya tiga daripada empat perlu memenuhi ambang baik untuk metrik itu. Mudah alih dan desktop dinilai berasingan.

INP meliputi interaksi sepanjang lawatan, bukan ketikan pertama sahaja. Ia mewakili interaksi paling lambat, dengan kelonggaran untuk nilai luar biasa. Ia mengukur bila pelayar boleh memaparkan maklum balas, bukan tempoh semua permintaan latar belakang selesai. INP telah menggantikan First Input Delay (FID), jadi carta FID lama tidak lagi menunjukkan senarai tiga metrik semasa.

Mengapa Metrik Ini Penting?

Metrik ini memudahkan anda menerangkan dan menguji masalah pengalaman. Halaman yang dimuatkan dengan pantas masih boleh lambat bertindak balas terhadap penapis, manakala halaman yang responsif masih boleh mengalihkan kandungan ketika seseorang membaca.

Google menggunakan Core Web Vitals dalam sistem kedudukannya, tetapi nilai baik tidak menjamin kedudukan tinggi. Kandungan yang relevan dan berguna tetap penting. Gunakan metrik untuk memudahkan tugas pelawat, bukannya menganggap status hijau sebagai ramalan trafik.

Mengapa Angka Ujian Kelajuan Berbeza?

PageSpeed Insights memaparkan data lapangan daripada pengguna Chrome yang layak sepanjang tempoh bergerak 28 hari, serta data makmal daripada ujian Lighthouse terkawal. Data lapangan menerangkan lawatan yang direkodkan; ujian makmal membantu menghasilkan semula dan mendiagnosis masalah dalam keadaan ujian tertentu.

Semak sama ada hasil lapangan merujuk kepada URL atau seluruh origin. Data origin menggabungkan halaman di bawah alamat yang sama, seperti https://shop.example.com, bukan hanya halaman yang anda masukkan. Apabila sampel halaman tidak cukup, alat mungkin menggunakan data origin; jika itu juga tidak mencukupi, hasil lapangan tidak muncul. Bacaan yang tiada bermaksud status belum diketahui, bukannya lulus.

Dalam semakan mudah alih PageSpeed Insights bagi halaman utama SEOWithJack pada 8 Oktober 2026, skor Performance Lighthouse ialah 97, tetapi bahagian pengguna sebenar menunjukkan “No Data.” Laporan itu membantu diagnosis makmal, namun tidak dapat membuktikan halaman lulus penilaian lapangan Core Web Vitals.

Ujian pemuatan Lighthouse biasa tidak melakukan interaksi pembeli. Total Blocking Time (TBT) boleh memberi petunjuk tentang masalah respons, tetapi ia bukan INP.

Search Console melengkapkan ujian ini dengan mengumpulkan URL berindeks yang serupa dan mempunyai data lapangan mencukupi. Status kumpulan tidak bermaksud setiap halaman mempunyai hasil yang sama.

Baca Tiga Isyarat pada Satu Halaman

Pada halaman perkakas dapur, gambar produk mungkin merupakan elemen LCP. Sahkan dalam laporan sebelum menyalahkan fail imej terbesar. Pemilih model yang lambat ialah interaksi untuk diuji semula bagi INP. Notis stok yang dimuatkan tanpa dijangka di atas butiran mungkin menerangkan CLS. Pergerakan sejurus selepas tindakan pengguna tidak semestinya dikira, jadi semak anjakan yang direkodkan tanpa menganggap setiap animasi sebagai CLS.

Bezakan masalah yang diperhatikan daripada punca yang disyaki. “Gambar muncul lewat” ialah pemerhatian; “fail terlalu besar” masih andaian sehingga anda menyemak permintaan dan paparannya. Panduan imej kami menerangkan pilihan penghantaran selepas anda memastikan imej memerlukan pembaikan.

Bagaimana Menyemak Halaman Mengikut Turutan?

  1. Pilih halaman dan peranti. Gunakan halaman produk, perkhidmatan atau artikel yang penting. Catat URL tepat, jenis peranti dan tarikh ujian untuk membandingkan hasil kemudian.
  2. Baca hasil lapangan dahulu. Dalam PageSpeed Insights, pilih Mobile atau Desktop. Di bawah “Discover what your real users are experiencing,” catat skop data dan status setiap metrik. Rekodkan “No Data” secara berasingan daripada “Good.”
  3. Siasat pemuatan. Dalam bahagian diagnosis, buka “LCP breakdown” untuk mengenal pasti elemen. Bagi imej, bezakan masa menunggu pelayan, kelewatan sebelum permintaan bermula, masa muat turun dan kelewatan paparan. Ini menunjukkan mengapa pemampatan sahaja mungkin tidak menyelesaikan imej yang lewat.
  4. Cuba interaksi bermasalah. Dalam Chrome, klik kanan halaman dan pilih Inspect untuk membuka DevTools. Pilih Performance dan gunakan pemilih model halaman. Semak tab Interactions untuk masa dan elemen terlibat; gunakan Layout shifts untuk mencari pergerakan. Ini ukuran setempat, jadi cuba hasilkan semula masalah pada telefon sebenar jika boleh.
  5. Baiki dan sahkan. Ubah punca yang disahkan, uji semula halaman dan tindakan yang sama, kemudian semak halaman lain yang menggunakan templat terlibat. Selepas diterbitkan, pantau data lapangan dan kumpulan Search Console berkaitan. Tempoh bergerak itu masih merangkumi lawatan terdahulu.

Masalah Mana Patut Dibaiki Dahulu?

Mulakan dengan metrik lemah pada halaman penting atau masalah yang dikongsi banyak URL. Pilih perubahan berdasarkan punca yang diukur:

  • LCP: jika permintaan imej utama bermula lewat kerana pemuatan tertangguh, muatkan imej itu dengan segera. Jika permintaan itu sendiri lambat, semak penghantaran imej; jika respons pelayan lambat, siasat pelayan. Kelewatan berbeza memerlukan pembaikan berbeza.
  • INP: kenal pasti kerja yang melambatkan respons visual seterusnya. Pembangun mungkin perlu mengurangkan atau memecahkan tugas JavaScript yang panjang serta kerja paparan yang berat.
  • CLS: sediakan ruang untuk imej dan komponen yang dimuatkan kemudian. Semak punca pergerakan: butang yang beralih mungkin ditolak oleh notis baharu di atasnya.

Bagi masalah notis stok, arahan kepada pembangun boleh ditulis begini:

Pada templat produk mudah alih, mesej stok dimuatkan selepas butiran produk dan menolak butang beli ke bawah tanpa tindakan pembeli. Sediakan ruang untuk mesej itu sebelum ia dimuatkan. Uji semula produk yang sama dan produk kedua yang menggunakan templat tersebut, termasuk keadaan stok berbeza. Pastikan butang kekal di tempatnya dan pemilihan produk masih berfungsi.

Simpan keadaan ujian, bacaan sebelum dan selepas perubahan, serta tarikh penerbitan. Ulang ujian makmal dalam keadaan setanding untuk menyemak konsistensi perubahan. Pastikan pelawat masih boleh menyelesaikan tugas, kemudian lihat penambahbaikan dalam data lapangan berikutnya.

Soalan Lazim

Apakah LCP dan CLS?

LCP mengukur pemuatan elemen kandungan terbesar yang kelihatan; CLS mengukur pergerakan susun atur tanpa dijangka. CLS ialah skor, bukan tempoh masa. INP ialah metrik ketiga yang mengukur respons terhadap interaksi.

Bagaimana Lulus Penilaian Core Web Vitals?

Apabila ketiga-tiganya mempunyai data lapangan mencukupi, setiap nilai persentil ke-75 mesti berada pada tahap baik. PageSpeed Insights boleh menilai LCP dan CLS sahaja jika data INP tidak cukup. Jika data LCP atau CLS tidak mencukupi, penilaian tidak dapat dibuat.

Bagaimana Menyemak Core Web Vitals?

Gunakan PageSpeed Insights untuk data halaman atau origin yang tersedia dan diagnosis makmal. Gunakan Search Console untuk mencari kumpulan URL terjejas. Jika data lapangan tiada, uji tugas sebenar secara setempat sambil menunggu sampel mencukupi; jangan tandakan halaman sebagai lulus.

Apa yang Menyebabkan Skor Core Web Vitals Lemah?

Kandungan yang lewat boleh menjejaskan LCP, kerja yang menyekat maklum balas visual boleh menjejaskan INP, dan ruang yang tidak disediakan boleh menyebabkan CLS. Kenal pasti elemen, interaksi atau anjakan sebelum mengubah templat.

Kongsi Artikel Ini