ZHENESJAKOTHVIRUFRAR

Core Web Vitals

Định nghĩa

Core Web Vitals là bộ ba chỉ số do Google công bố, dùng để đo lường trải nghiệm thực tế của người dùng khi tương tác với một trang web. Chúng không đo "website có đẹp không" mà đo website có nhanh, mượt và ổn định không — những yếu tố ảnh hưởng trực tiếp đến tỷ lệ chuyển đổi (CVR) và thứ hạng tìm kiếm.

Bộ ba chỉ số gồm:

- LCP (Largest Contentful Paint) — Tốc độ tải phần tử lớn nhất

- INP (Interaction to Next Paint) — Độ trễ phản hồi khi người dùng tương tác (thay thế FID từ tháng 3/2024)

- CLS (Cumulative Layout Shift) — Mức độ dịch chuyển bố cục ngoài ý muốn

Với một shop DTC, đây là "điểm thi sức khỏe" cho toàn bộ hành trình từ lúc khách bấm quảng cáo Facebook/TikTok đến lúc bấm "Đặt hàng".

Ẩn dụ dễ hiểu

Hãy tưởng tượng bạn bước vào một cửa hàng offline:

- LCP = Thời gian bạn đứng chờ nhân viên mang sản phẩm chính ra. Chờ 4 giây là bạn bỏ đi.

- INP = Khi bạn hỏi "cái này giá bao nhiêu?", nhân viên trả lời ngay hay đứng ngẩn ra 0,5 giây mới phản hồi.

- CLS = Bạn đang với tay lấy sản phẩm thì nhân viên đột ngột đẩy kệ sang chỗ khác, khiến bạn chụp hụt.

Trong thương mại điện tử, CLS đặc biệt nguy hiểm: khách định bấm "Thêm vào giỏ" nhưng nút bị đẩy xuống, họ bấm nhầm vào banner quảng cáo → thoát trang ngay.

Ngưỡng đánh giá & Công thức

Google đánh giá ở phân vị 75 (75% lượt truy cập phải đạt ngưỡng):

Chỉ sốTốtCần cải thiệnKém
**LCP**≤ 2,5s2,5s – 4,0s> 4,0s
**INP**≤ 200ms200ms – 500ms> 500ms
**CLS**≤ 0,10,1 – 0,25> 0,25

Công thức LCP:

LCP = TTFB + Thời gian tải tài nguyên + Thời gian render

Công thức CLS:

CLS = Tổng (Impact Fraction × Distance Fraction)

Trong đó Impact Fraction là tỷ lệ diện tích phần tử bị ảnh hưởng, Distance Fraction là khoảng cách dịch chuyển.

Công thức INP: đo từ lúc người dùng bấm/gõ đến lúc màn hình render khung hình tiếp theo. INP lấy giá trị cao nhất (gần như worst-case) trong suốt phiên truy cập.

So sánh với chỉ số truyền thống

Tiêu chíChỉ số cũ (FID, PageSpeed)Core Web Vitals
Đo gìChỉ độ trễ phản hồi đầu tiênToàn bộ trải nghiệm tương tác
Dữ liệuLab (môi trường giả lập)Field (người dùng thật)
Ảnh hưởng SEOGián tiếpTrực tiếp (Page Experience)
Phù hợp DTCThấpCao (gắn với CVR)

Ứng dụng trong DTC/Thương mại điện tử Việt Nam

1. Trang sản phẩm (PDP): Ảnh sản phẩm là phần tử LCP. Nén ảnh sang WebP/AVIF, dùng loading="lazy" cho ảnh phụ, đặt width/height cố định để tránh CLS. Một shop mỹ phẩm trên Shopify ghi nhận LCP giảm từ 4,2s → 2,1s giúp CVR tăng 12%.

2. Trang thanh toán: Nút "Đặt hàng" (CTA) phải là phần tử INP thấp. Tránh nhúng quá nhiều script chat (Zalo, Messenger, Tawk) vì chúng chặn main thread. Mục tiêu INP < 150ms cho nút thanh toán.

3. Landing page chạy ads: Đây là nơi CLS "giết" tiền quảng cáo nặng nhất. Banner khuyến mãi nhảy vào sau 1s làm nút CTA dịch chuyển → khách bấm nhầm. Đặt chỗ trước (reserve space) cho mọi banner động.

4. Mobile-first: Trên 4G Việt Nam, LCP trung bình của các shop nội địa thường 3,5–5s. Dùng CDN (Cloudflare, Bunny) + tối ưu font (preload, font-display: swap) có thể kéo xuống dưới 2,5s.

Dữ liệu tham chiếu thực tế:

- Mỗi 1 giây tải chậm thêm làm giảm 7% tỷ lệ chuyển đổi (theo Deloitte).

- 53% người dùng mobile rời trang nếu tải quá 3 giây (Google).

- Amazon từng đo được: chậm 100ms = mất 1% doanh thu.

Lỗi thường gặp

1. Chỉ tối ưu điểm PageSpeed Insights mà bỏ qua dữ liệu Field — điểm lab 95 nhưng CrUX (dữ liệu người dùng thật) vẫn kém.

2. Nhồi quá nhiều pixel/tracking script — mỗi script là một "cục đá" trên main thread, đẩy INP vọt lên 400–600ms.

3. Đặt quảng cáo/banner phía trên nội dung chính — vừa làm LCP chậm vừa gây CLS.

4. Không đặt kích thước ảnh/video — trình duyệt không biết chỗ nào để render → layout nhảy.

5. Dùng ảnh gốc 4000px từ xưởng chụp — tải 3MB cho một ảnh thumbnail.

6. Test trên WiFi văn phòng — phải test trên 4G throttled, đúng điều kiện khách hàng thật.

Các thuật ngữ liên quan

- CrUX (Chrome User Experience Report) — Bộ dữ liệu người dùng thật của Google

- TTFB (Time to First Byte) — Thời gian máy chủ phản hồi byte đầu tiên

- FCP (First Contentful Paint) — Lần render nội dung đầu tiên

- TBT (Total Blocking Time) — Tổng thời gian main thread bị chặn

- Page Experience — Bộ tiêu chí xếp hạng gồm CWV + HTTPS + mobile-friendly

- RAIL Model — Khung đo hiệu năng lấy người dùng làm trung tâm

- Lighthouse — Công cụ audit trong Chrome DevTools


Tóm lại: Core Web Vitals không phải "điểm số cho vui" — với shop DTC, mỗi 0,1 giây và mỗi pixel dịch chuyển đều là tiền. Tối ưu CWV là tối ưu doanh thu, không chỉ tối ưu SEO.