Core Web Vitals là gì? Hướng dẫn đầy đủ cách đo và tối ưu (cập nhật INP)

1) Core Web Vitals gồm những chỉ số nào?

Core Web Vitals hiện tập trung vào 3 khía cạnh: tốc độ hiển thị, khả năng phản hồi và độ ổn định bố cục. Từ tháng 03/2024, INP (Interaction to Next Paint) chính thức thay thế FID.

1.1. LCP – Largest Contentful Paint

Đo: Thời gian để phần nội dung lớn trong vùng nhìn thấy được hiển thị hoàn chỉnh (thường là ảnh/hero/banner hoặc đoạn text lớn).

• Mốc đánh giá: Tốt: < 2.5s · Cần cải thiện: 2.5–4s · Kém: > 4s
• Nguyên nhân LCP chậm: ảnh nặng, CSS/JS chặn hiển thị, TTFB cao, tải phông chữ chậm.

<link rel="preload" as="image" href="/images/hero.avif"imagesrcset="/images/hero@1x.avif 1x, /images/hero@2x.avif 2x"fetchpriority="high"><link rel="preload" as="style" href="/css/critical.css">

<link rel="preload" as="style" href="/css/main.css" onload="this.rel='stylesheet'">

<link rel="preload" as="font" href="/fonts/Inter-Variable.woff2" type="font/woff2" crossorigin><style>@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Variable.woff2') format('woff2'); font-display: swap; }</style>

1.2. INP – Interaction to Next Paint

Đo: Mức phản hồi tổng thể sau khi người dùng tương tác (click, tap, gõ phím). INP lấy giá trị gần xấu trong phiên.

• Mốc đánh giá: Tốt: < 200ms · Cần cải thiện: 200–500ms · Kém: > 500ms
• Nguyên nhân: JavaScript nặng (long tasks), quá nhiều thư viện bên thứ ba, xử lý sự kiện không tối ưu, re-render quá nhiều.

// Chia xử lý nặng thành từng đợt nhỏrequestIdleCallback(() => { /* xử lý nhẹ khi rảnh */ });// Lazy-load widget sau tương tácdocument.addEventListener('click', () => import('./heavy-widget.js'));// Gửi tác vụ nặng sang Workerconst worker = new Worker('/worker.js');worker.postMessage({ type: 'calc', payload: bigData });

1.3. CLS – Cumulative Layout Shift

Đo: Mức dịch chuyển bố cục tích lũy trong quá trình tải (nội dung “nhảy”).

• Mốc đánh giá: Tốt: < 0.1 · Cần cải thiện: 0.1–0.25 · Kém: > 0.25
• Nguyên nhân: media không khai báo kích thước, quảng cáo/embeds chèn không chừa chỗ, font gây FOIT/FOUT, lazy-load chèn phía trên.

img.hero { width: 100%; height: auto; aspect-ratio: 16/9; }

2) Tại sao Core Web Vitals quan trọng?

• Ảnh hưởng SEO: CWV là một tín hiệu trong nhóm Page Experience. Không phải yếu tố số 1, nhưng tạo lợi thế khi các yếu tố khác tương đương.
• Tác động kinh doanh: Trang nhanh, ổn định giúp tăng chuyển đổi, giảm bounce, tăng thời gian và số trang/phiên.
• Dựa trên dữ liệu thật: CWV dùng dữ liệu người dùng Chrome (field data), phản ánh điều kiện thiết bị/mạng đa dạng.

3) Cách đo và giám sát Core Web Vitals

3.1. Công cụ nên dùng

• Search Console → Core Web Vitals: báo cáo field data theo nhóm URL, phân loại Tốt/Cần cải thiện/Kém.
• PageSpeed Insights: hiển thị field + lab data và gợi ý tối ưu.
• Lighthouse (DevTools): test cục bộ để debug nhanh.
• CrUX: dữ liệu field công khai ở mức origin.
• Thư viện web-vitals: gắn vào site để tự đo LCP/INP/CLS trên người dùng thật.

3.2. Phân biệt field vs lab

• Field data: dữ liệu thực, dùng để đánh giá CWV trong xếp hạng; cập nhật chu kỳ 28 ngày.
• Lab data: môi trường kiểm thử, dễ tái lập; phù hợp chẩn đoán và kiểm tra trước khi phát hành.

3.3. Thiết lập đo tùy chỉnh (gợi ý)

• Gắn web-vitals và gửi metric về analytics/BigQuery.
• Làm dashboard theo thiết bị, theo template (category/product/blog), theo quốc gia.
• Đặt cảnh báo khi phần trăm URL “Tốt” giảm.

4) Quy trình tối ưu CWV theo mức độ ưu tiên

Bước 1: Nắm “bức tranh lớn”

Xác định nhóm URL Kém/Cần cải thiện trong Search Console, ưu tiên mobile và 1–2 template quan trọng (Trang chủ, Danh mục, Sản phẩm...).

Bước 2: Sửa nhanh các “quick wins”

• Bật nén Brotli, HTTP/2/3, CDN cache tĩnh.
• Chuyển ảnh sang WebP/AVIF, lazy-load ảnh ngoài màn hình.
• Preload CSS/Font/Ảnh hero; khai báo kích thước media.
• Giảm số lượng/kích thước JS bên thứ ba.

Bước 3: Giảm JavaScript – chìa khóa cho INP

• Đặt mục tiêu JS tải ban đầu phù hợp (ví dụ < 170–200KB gzip với trang nội dung).
• Code-splitting theo route; lazy-load component ít dùng.
• Trì hoãn script không thiết yếu đến sau tương tác.
• Đưa tính toán nặng sang Web Worker.

Bước 4: Tối ưu server & dữ liệu

• Edge cache HTML nếu phù hợp (ISR/Full-page cache).
• Cache các block tĩnh; sử dụng stale-while-revalidate.
• Tối ưu DB/ORM, tránh N+1 query; API trả đúng dữ liệu cần.

Bước 5: Kiểm thử & theo dõi

• Chạy Lighthouse trước/sau, so sánh lab metrics.
• Triển khai theo dạng canary, theo dõi field data.
• Lặp lại với template khác.

5) Checklist nhanh theo từng chỉ số

LCP Checklist

• Ảnh hero định dạng AVIF/WebP, kích thước phù hợp, có srcset.
• Preload ảnh hero + CSS/Font quan trọng; tách Critical CSS.
• Giảm TTFB: CDN, cache HTML, nén Brotli.
• Tránh CSS/JS chặn render; dùng defer/async cho script.

INP Checklist

• Tổng JS tải ban đầu đạt mục tiêu; dọn third-party không cần thiết.
• Không có long tasks > 50ms liên tiếp (theo Performance panel).
• Dùng requestAnimationFrame, setTimeout, Web Worker cho tác vụ nặng.
• Debounce/throttle sự kiện; kiểm soát re-render (memoization, virtualization).

CLS Checklist

• Mọi media có width/height hoặc aspect-ratio.
• Quảng cáo/embeds có khung cố định; không đẩy nội dung.
• Tránh chèn banner phía trên nội dung đang đọc.
• Font preload + font-display: swap/optional.

6) Sai lầm thường gặp (và cách khắc phục)

1. Chỉ nhìn điểm Lighthouse 100/100: Không đảm bảo field data tốt; cần theo dõi Search Console.
2. Lazy-load cả ảnh hero: Ảnh above-the-fold nên tải ưu tiên, không lazy.
3. Lạm dụng thư viện UI & icon: Chỉ import phần dùng; dùng SVG sprite/icon dạng biên dịch.
4. Thêm nhiều script qua Tag Manager: Dễ phình to JS. Audit định kỳ, tắt thẻ thừa, cân nhắc server-side tagging.
5. SPA nặng không tối ưu render: Áp dụng SSR/SSG/ISR, streaming, partial hydration.
6. Không chừa chỗ cho quảng cáo: Đặt placeholder cùng kích thước, ràng buộc cao–thấp.

7) Ví dụ tối ưu nhanh trên trang bài viết

1. Ảnh tiêu đề: chuyển sang AVIF 1200px, preload ảnh đầu và CSS.
2. Font: preload WOFF2, font-display: swap.
3. JS: bỏ carousel không dùng; hoãn script chat tới khi người dùng cuộn 50% trang.
4. Quảng cáo: khung 336×280 cố định, hiển thị sau nội dung chính.
5. Đo lường: gắn web-vitals để gửi LCP/INP/CLS về analytics.

Kỳ vọng: LCP giảm ~1–1.5s, INP < 200ms, CLS < 0.05.

8) Hỏi đáp nhanh (FAQ)

1) INP khác FID như thế nào?

FID đo độ trễ input lần đầu; INP đo toàn bộ tương tác và lấy giá trị gần xấu , phản ánh trải nghiệm tổng thể tốt hơn.

2) Mobile và Desktop có ngưỡng khác nhau không?

Ngưỡng giống nhau: LCP < 2.5s, INP < 200ms, CLS < 0.1. Mobile thường khó đạt hơn, nên ưu tiên tối ưu trên mobile.

3) Có cần 100 điểm Lighthouse để SEO tốt?

Không. Mục tiêu là đạt ngưỡng “Tốt” trên field data; điểm Lighthouse chỉ hỗ trợ debug trong lab.

4) Core Web Vitals có phải yếu tố xếp hạng số 1?

Không. Nội dung và mục đích tìm kiếm quan trọng hơn. CWV giúp nâng trải nghiệm và có thể cải thiện thứ hạng khi các yếu tố khác tương đương.

5) Quảng cáo có khiến CLS xấu?

Có thể. Hãy đặt khung kích thước cố định và tránh chèn trước nội dung đã hiển thị.

6) Website dùng React/Vue/Next/Nuxt có khó đạt CWV?

Không nếu áp dụng SSR/SSG, code-splitting, partial hydration, tối ưu ảnh/font và giảm JS bên thứ ba.

7) Search Console cập nhật CWV bao lâu?

Thường theo chu kỳ 28 ngày do dựa trên dữ liệu người dùng thực.

9) Mẫu đoạn mã hữu ích

Lazy-load ảnh ngoài màn hình

<img src="/img/post-2.avif" alt="Mô tả ảnh"width="1200" height="800"loading="lazy" decoding="async">

Lazy-load component nặng sau tương tác

let heavyLoaded = false;const loadHeavy = () => {if (heavyLoaded) return;import('./heavy-widget.js').then(mod => mod.mount());heavyLoaded = true;};window.addEventListener('scroll', () => {if (window.scrollY > 800) loadHeavy();}, { passive: true });document.addEventListener('click', loadHeavy, { once: true });

Chuyển tác vụ nặng sang Web Worker

// main.jsconst worker = new Worker('/worker.js');worker.postMessage({ type: 'calc', payload: bigData });worker.onmessage = () => {// cập nhật UI nhanh, cải thiện INP};// worker.jsself.onmessage = (e) => {if (e.data.type === 'calc') {// xử lý nặng ở workerself.postMessage({ done: true });}};

10) Kết luận & lộ trình gợi ý

Core Web Vitals là thước đo thực tế cho chất lượng trải nghiệm web. Đặt mục tiêu LCP < 2.5s, INP < 200ms và CLS < 0.1 trên field data để đồng thời cải thiện SEO, chuyển đổi và doanh thu.

1. Đo lường & ưu tiên: xác định template xấu trong Search Console.
2. Tối ưu nhanh: ảnh/CSS/font/cache/CDN/preload.
3. Giảm JavaScript: code-splitting, trì hoãn, dọn third-party, Worker hóa tác vụ nặng.
4. Ổn định bố cục: khai báo kích thước media, placeholder cho ads/embeds.
5. Theo dõi liên tục: gắn web-vitals, dashboard theo dõi mobile/desktop (rolling 28 ngày).