Tối ưu Core Web Vitals 2026 — LCP, CLS, INP về xanh

Site chậm = mất khách + tụt SEO. Google Core Web Vitals chính thức là ranking factor từ 2021, INP thay FID từ 03/2024. Bài này định nghĩa 3 chỉ số bắt buộc 2026, 6 nguyên nhân CWV kém phổ biến VN, pipeline tối ưu 4 phase Web22, và bảng giá tham khảo.

Core Web Vitals 2026 — 3 chỉ số bắt buộc

Google đo trải nghiệm người dùng qua 3 chỉ số chính, áp dụng cho mọi site mobile + desktop:

LCP (Largest Contentful Paint) — < 2.5s

Thời gian từ khi user click link đến khi element lớn nhất hiển thị (hero image, h1, video). Đo loading speed thực tế.

• Tốt: < 2.5s
• Cần cải thiện: 2.5s – 4s
• Kém: > 4s

CLS (Cumulative Layout Shift) — < 0.1

Đo độ “nhảy” của layout trong quá trình load. Image không có width/height, font load chậm, ad inject sau load = CLS cao.

• Tốt: < 0.1
• Cần cải thiện: 0.1 – 0.25
• Kém: > 0.25

INP (Interaction to Next Paint) — < 200ms

Mới — thay FID từ 03/2024. Đo độ responsive của UI khi user click/tap. JS heavy, event handler chậm = INP cao.

• Tốt: < 200ms
• Cần cải thiện: 200ms – 500ms
• Kém: > 500ms

Đo qua PageSpeed Insights (CrUX field data 28 ngày, real users) — KHÔNG chỉ Lighthouse lab data (synthetic test).

6 nguyên nhân CWV kém phổ biến VN

Audit 100 site VN 2026, phân tích nguyên nhân:

1. Image không optimize (35% case)

• Image > 500KB (PNG/JPG không nén)
• Không dùng WebP/AVIF (giảm 30-60% size)
• Không lazy load below-fold
• Hero image không preload → LCP cao
• Image không có width/height attr → CLS cao

Fix: convert WebP qua Imagify/ShortPixel, lazy load native, preload hero image với <link rel="preload">.

2. Render-blocking JS (25%)

• Plugin chặn rendering (Jetpack, Elementor heavy)
• jQuery + jQuery Migrate cũ
• Script không có async/defer

Fix: defer non-critical JS, dequeue plugin không dùng, code splitting cho theme custom.

3. Third-party script (15%)

• Google Analytics + Tag Manager + Facebook Pixel + LiveChat = 200-500KB JS
• Mỗi script add 50-200ms LCP

Fix: load conditionally, defer, dùng Third Party Capital wrapper.

4. Hosting kém (10%)

• Shared hosting siêu rẻ → TTFB > 1s
• Server VN data center old
• Không có HTTP/2 hoặc HTTP/3

Fix: VPS Vultr/DigitalOcean, Cloudflare APO, LiteSpeed/Nginx.

5. Layout shift (10%)

• Image không có width/height
• Font web load chậm khiến text reflow
• Banner/popup inject sau load

Fix: explicit width/height cho mọi image, font-display: swap + preload, reserve space cho dynamic content.

6. Font không preload (5%)

• Google Fonts CSS render-blocking
• Web font không có font-display
• FOIT (Flash of Invisible Text)

Fix: self-host font, preload critical font file, font-display: swap.

Pipeline tối ưu CWV 4 phase

Phase 1 — Audit + Measure (~1 tuần)

• CrUX field data 28 ngày qua PageSpeed Insights
• Lighthouse audit lab data 5 page chính
• Chrome DevTools performance trace
• WebPageTest waterfall analysis
• Output: report 84 điểm + priority fix list

Phase 2 — LCP fix (1-2 tuần)

• Optimize hero image (WebP, dimension, preload)
• Inline critical CSS < 14KB
• Defer non-critical CSS
• Server response (TTFB < 600ms)
• Cloudflare APO hoặc edge caching

Phase 3 — CLS fix (~1 tuần)

• Width/height attribute cho mọi image + iframe
• aspect-ratio CSS cho responsive
• Font preload + font-display: swap
• Reserve space cho ad/widget dynamic

Phase 4 — INP fix (1-2 tuần)

• Audit long task > 50ms
• Code split JS chunk lớn
• Debounce/throttle event handler
• Web Worker cho heavy compute
• Re-measure CrUX sau 14 ngày

Bảng giá tối ưu CWV 2026

Dịch vụ tối ưu hiệu năng Web22

• CWV optimization — đưa LCP/CLS/INP về xanh
• Audit performance — health check 84 điểm + roadmap

Dịch vụ liên quan

• SEO — CWV là technical SEO foundation
• Phát triển WordPress — performance design ngay từ build
• Web chuẩn SEO — site mới với CWV xanh từ launch

Câu hỏi thường gặp