Core Web Vitals (LCP, INP, CLS) — 3 số Google chấm điểm tốc độ web bạn

Hiểu đơn giản nhất

Tưởng tượng bạn đến nhà hàng. 3 yếu tố quyết định bạn quay lại:

3 chỉ số này gọi là Core Web Vitals — Google công bố 2020, dùng làm ranking factor SEO từ 2021.

Pass Core Web Vitals = cả 3 đều GOOD ở P75 (75% user). Đây là gold standard Google dùng để xếp hạng.

Tại sao bạn cần biết

• SEO ranking factor xác nhận — 2 web cùng nội dung, pass CWV xếp trước fail CWV. Google công bố từ 2021.
• Bounce rate giảm 30-50% khi web load < 2.5s. Mỗi 1 giây chậm = mất ~7% conversion.
• Mobile-first indexing. Google dùng data MOBILE để rank. Web "đẹp trên Mac, fail mobile" sẽ tụt ranking.
• Marketing budget hiệu quả hơn. Chạy Facebook Ads $1000 dẫn về web load 5s = 70% bỏ trước khi xem. Fix CWV = ROI tăng 2-3x.
• Đo được, fix được. Khác với "trải nghiệm tốt" mơ hồ, CWV có số cụ thể. Bạn biết cần fix gì + đo được kết quả.

LCP — Largest Contentful Paint

Đo: Thời gian từ lúc bạn gõ URL đến lúc element LỚN NHẤT trong viewport hiện ra.

Element lớn nhất thường là:

• <img> hero
• Background image của hero section
• Block text H1 lớn
• Video poster
• <svg> lớn

Nguyên nhân LCP chậm

Quick wins LCP

1. Preload hero image: <link rel="preload" as="image" href="/hero.webp">
2. fetchpriority="high" trên hero <img>
3. Font display swap: @font-face { font-display: swap; }
4. CDN cho static (Cloudflare miễn phí)
5. Next.js Image component với priority prop cho hero

INP — Interaction to Next Paint

Đo: Lag từ user action (click/tap/type) → screen update.

INP thay thế FID từ 2024-03-12. Khác biệt:

• FID đo chỉ first interaction
• INP đo MỌI interaction trong session, lấy worst case (P98)

Nguyên nhân INP cao

Quick wins INP

1. Debounce input handler — useDeferredValue (React 18+) hoặc setTimeout 100ms
2. Code split — chỉ load component khi cần (lazy import)
3. Web Worker cho computation nặng (Workerize, Comlink)
4. Async cho mọi click handler — không block UI thread
5. Defer/async cho third-party script

Đo INP local

// Add to your page (Chrome DevTools console):
new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.duration > 200) {
      console.warn(`Slow interaction: ${entry.duration}ms`, entry);
    }
  });
}).observe({ type: 'event', durationThreshold: 200, buffered: true });

CLS — Cumulative Layout Shift

Đo: Tổng "khoảng nhảy" của layout trong session. Unit: ratio (0-1+).

CLS = (impact fraction) × (distance fraction). Mỗi shift được tính.

Ví dụ CLS

Bạn đang đọc paragraph → quảng cáo banner load chậm → đè header → mọi content đẩy xuống 60px → bạn mất chỗ đọc.

Trước (height 100vh):
[ Header  ]
[ Paragraph 1 ]
[ Paragraph 2 ]

Sau (banner load, +80px):
[ Header  ]
[ Banner  ]  ← chèn vào, đẩy mọi thứ xuống
[ Paragraph 1 ]
[ Paragraph 2 ]

User đang đọc Paragraph 1 → giờ đọc Paragraph 2 (vì đã đẩy xuống). Cực bực bội, nhất là khi định click button → button bị đẩy → click nhầm.

Nguyên nhân CLS cao

Quick wins CLS

1. Mọi <img> PHẢI có width + height (browser tính aspect ratio):

   <img src="hero.jpg" width="800" height="500" alt="...">

2. Reserve space cho ad/iframe:

   .ad-container { min-height: 250px; }

3. font-display: optional thay vì swap (không có fallback nếu font load > 100ms)
4. Skeleton loader thay vì empty space cho dynamic content
5. Transform animation thay vì top/left/width

Đo Core Web Vitals — 3 cách

1. PageSpeed Insights (chuẩn nhất)

URL: https://pagespeed.web.dev/?url=YOUR-URL

Trả về:

• Lab data (synthetic test): score 0-100 + waterfall + opportunities
• Field data (Chrome UX Report, 28 ngày user thật): LCP/INP/CLS distribution

⚠️ Field data > Lab data. Lab có thể đẹp nhưng field chậm (vì lab dùng máy mạnh + mạng nhanh).

2. Chrome DevTools Lighthouse

Mở DevTools → tab Lighthouse → Generate Report:

• Categories: Performance, Accessibility, Best Practices, SEO
• Throttling: Slow 4G + 4x CPU slowdown (mô phỏng mobile thật)
• Trả score + actionable suggestions

Hữu ích khi dev local, before/after edit.

3. Google Search Console (production tracking)

search.google.com/search-console → property → Core Web Vitals report:

• Mobile + Desktop tabs riêng
• URLs grouped by status (GOOD/NEEDS IMPROVEMENT/POOR)
• Trend chart 28 ngày

Đây là nguồn data Google dùng để rank — track hàng tuần.

Ví dụ thực tế: vietcodex.com Core Web Vitals

Đo https://wiki.vietcodex.com/co-ban/api-la-gi qua PSI mobile:

LCP:  1.8s  ✅ GOOD     (hero image preload + WebP)
INP:  120ms ✅ GOOD     (MDX static, ít JS interaction)
CLS:  0.05  ✅ GOOD     (image có width/height + font display swap)

Lighthouse score:
- Performance:    95
- Accessibility:  98
- Best Practices: 100
- SEO:           100

3 lý do pass:

1. Cloudflare CDN + Next.js standalone → TTFB ~120ms
2. Static MDX prerender HTML → no React hydration cost
3. Image hero có width/height + lazy loading + WebP via Cloudflare Polish

Tools bổ trợ

Cái gì có thể sai

Tóm tắt 1 dòng

Core Web Vitals = 3 chỉ số Google chấm điểm web: LCP < 2.5s (load nhanh), INP < 200ms (phản hồi mượt), CLS < 0.1 (layout không nhảy). Pass cả 3 ở P75 mobile = SEO rank tốt + bounce rate giảm 30-50%. Đo qua PageSpeed Insights (lab + field) hoặc Search Console (production). Quick wins: CDN + image width/height + font-display swap + defer third-party JS.

Đọc tiếp

• CDN là gì — vì sao web load nhanh ở Hà Nội nhưng chậm ở Mỹ — CDN giảm LCP đáng kể
• Caching toàn cảnh — 5 tầng cache giữa user và database — cache pattern để fix TTFB (sắp có)
• Cloud, VPS, Shared Hosting — chọn nhà cho web theo quy mô — VPS gần user giảm TTFB
• HTML, CSS, JavaScript — 3 ngôn ngữ tạo nên mọi website — render-blocking CSS/JS là nguyên nhân #1 LCP chậm