Core Web Vitals 2026 — 3 chỉ số chính

Tháng 3/2024, Google đã chính thức thay FID bằng INP trong Core Web Vitals. Năm 2026, 3 chỉ số chính là:

Chỉ số Đo gì Good Need improvement Poor
LCP (Largest Contentful Paint) Thời gian render content lớn nhất ≤ 2.5s 2.5-4s > 4s
INP (Interaction to Next Paint) Thời gian phản hồi interaction ≤ 200ms 200-500ms > 500ms
CLS (Cumulative Layout Shift) Mức độ layout shift bất ngờ ≤ 0.1 0.1-0.25 > 0.25

Tất cả 3 chỉ số phải Good cho website pass Core Web Vitals. Pass = boost ranking signal, fail = không penalty trực tiếp nhưng đối thủ pass sẽ rank cao hơn.

1. LCP (Largest Contentful Paint)

LCP là gì?

Thời gian từ lúc user request URL đến lúc element lớn nhất hiển thị xong (thường là hero image hoặc heading lớn).

Element nào thường là LCP?

  • <img> lớn nhất (hero image, featured image)
  • <video> poster
  • Background image của element lớn
  • <h1> hoặc block text lớn

Cách tối ưu LCP

1. Optimize images

  • Compress ảnh trước upload (TinyPNG, Squoosh, ImageOptim)
  • Format mới: WebP (giảm 25-35% so với JPEG), AVIF (giảm 50%)
  • Lazy load images dưới fold, loading="eager" cho LCP image
  • Responsive images với srcset + sizes
  • Specify dimensions width/height để tránh layout shift

2. Preload critical resources

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<link rel="preload" as="font" href="/font.woff2" type="font/woff2" crossorigin>

3. CDN cho assets

  • Cloudflare (free), Bunny CDN, KeyCDN
  • Serve images, CSS, JS từ edge gần user

4. Server response time (TTFB < 600ms)

  • Hosting tốt (không shared bottom-tier)
  • HTTP/2 hoặc HTTP/3
  • Caching ở server (Redis, Memcached, full-page cache)

5. Render-blocking resources

  • Minify CSS, JS
  • Defer non-critical JS
  • Inline critical CSS

6. Avoid font shifts

  • font-display: swap cho web fonts
  • Preload font files
  • Hoặc dùng system fonts

LCP cho WordPress

  • Plugin: WP Rocket (paid, best) hoặc W3 Total Cache (free)
  • EWWW Image Optimizer convert auto WebP
  • Asset CleanUp disable scripts không cần
  • Theme: tránh page builders nặng (Elementor, Divi heavy mode)

LCP cho Shopify

  • Theme: chọn theme có Performance Score > 70
  • Disable apps không dùng
  • Optimize hero image (≤ 200KB)
  • Use Shopify Image API (auto-resize)

2. INP (Interaction to Next Paint)

INP là gì? (Thay FID từ March 2024)

INP đo thời gian phản hồi interaction — từ lúc user click/tap đến lúc browser paint frame mới.

INP đo TẤT CẢ interactions trên trang (không chỉ first like FID). Là chỉ số khó nhất trong CWV.

Cách INP được tính

Browser ghi nhận tất cả interactions (click, tap, keypress). INP = giá trị tệ nhất trong các interaction đó (hoặc 98th percentile cho trang có nhiều interaction).

Cách tối ưu INP

1. Reduce JavaScript execution

  • Code split với webpack/Vite
  • Tree shaking loại code chết
  • Lazy load components dưới fold
  • Web Workers cho heavy computation

2. Avoid long tasks (> 50ms)

  • Break large JS functions thành chunks
  • requestIdleCallback cho non-critical
  • Debounce/throttle event handlers

3. Optimize third-party scripts

  • Audit GTM, Facebook Pixel, hotjar...
  • Defer hoặc load async
  • Self-host critical scripts

4. Avoid layout-triggering CSS

  • Animate transform và opacity (GPU-accelerated)
  • Tránh animate width, height, top, left

5. Use modern frameworks correctly

  • React: useMemo, useCallback, lazy load components
  • Vue: v-once, defineAsyncComponent
  • Svelte: built-in optimization

INP cho ngành cụ thể

  • E-commerce: optimize "Add to cart" click — phải < 200ms
  • Booking: form submission feedback ngay
  • News: scroll smooth, không jank

Test INP

  • Chrome DevTools → Performance → Record → check Interactions
  • Web Vitals extension — real-time INP
  • Real User Monitoring (RUM): GA4 Web Vitals, Datadog, New Relic

3. CLS (Cumulative Layout Shift)

CLS là gì?

Đo tổng mức layout shift không mong muốn — khi content "nhảy" trong khi user đọc.

Nguyên nhân CLS phổ biến

1. Images không có dimensions

<!-- BAD -->
<img src="hero.jpg">

<!-- GOOD -->
<img src="hero.jpg" width="1200" height="630">

2. Ads / embeds insert dynamically

  • Reserve space cho ads container
  • Set min-height cho YouTube/Twitter embeds

3. Web fonts swap

  • font-display: swap (tránh FOIT) nhưng có thể gây CLS
  • Use size-adjust, ascent-override (modern browsers)

4. Pop-ups và notifications

  • Tránh insert content above-the-fold sau load
  • Modal phải fixed position, không push content

5. Dynamic content

  • Skeleton screen thay vì empty space
  • Reserve space cho lazy-loaded content

Cách fix CLS

Aspect ratio boxes

.img-container {
    aspect-ratio: 16 / 9;
    width: 100%;
}
.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Reserve space cho ads

<div style="min-height: 250px; min-width: 300px">
    <!-- Ad sẽ load vào đây -->
</div>

Modern font loading

@font-face {
    font-family: 'Inter';
    src: url('/inter.woff2') format('woff2');
    font-display: swap;
    size-adjust: 100.06%;  /* Match fallback metrics */
}

Đo lường Core Web Vitals

1. PageSpeed Insights (Field + Lab data)

URL: https://pagespeed.web.dev

  • Field Data: real users (Chrome UX Report)
  • Lab Data: simulated test
  • Show LCP/INP/CLS rõ ràng

2. Search Console Core Web Vitals report

  • Path: SC → Experience → Core Web Vitals
  • Group URLs theo status (Good/Need improvement/Poor)
  • Track trend over time

3. GA4 Web Vitals (Real User Monitoring)

  • Add Web Vitals script
  • Send metrics to GA4 events
  • Phân tích theo device, browser, country

4. Chrome DevTools Lighthouse

  • Run audit ngay trong browser
  • Suggestion cụ thể từng issue
  • Trace timeline để debug

5. Tools chuyên sâu

  • WebPageTest (advanced waterfall)
  • GTmetrix (alternative to PSI)
  • DebugBear (continuous monitoring)
  • Calibre (enterprise)

Core Web Vitals impact lên ranking

Google nhiều lần xác nhận CWV là ranking factor nhưng:

  • Là tie-breaker giữa content tương đương
  • Không thay được content tốt
  • Mobile-first (Google đánh giá mobile CWV chính)

Quan trọng: CWV không phải "all-or-nothing". Score 80 vs 95 không khác biệt lớn — chính việc pass threshold mới ảnh hưởng.

Roadmap tối ưu CWV cho website

Tuần 1: Audit

  • Run PageSpeed Insights cho top 10 pages
  • Identify pages fail nhất
  • Note specific issues

Tuần 2: Quick wins

  • Compress + WebP images
  • Add width/height to images
  • Defer non-critical JS
  • Minify CSS/JS

Tuần 3-4: Medium effort

  • Implement CDN
  • Optimize fonts
  • Lazy load images dưới fold
  • Reduce third-party scripts

Tuần 5+: Advanced

  • Code splitting JS
  • Service worker caching
  • HTTP/3 enable
  • Image CDN (Cloudflare Images, Imgix)

Common myths về CWV

"PageSpeed score 100 = phải có để rank"

Sai. Score 80-90 đủ pass CWV. Đừng over-optimize.

"CLS chỉ ảnh hưởng UX, không SEO"

Sai. CLS là 1 trong 3 chỉ số CWV chính, ảnh hưởng ranking.

"INP chỉ matter cho SPA"

Sai. INP đo mọi interaction trên mọi website, kể cả static blog.

"Lighthouse score = Google's score"

Không hoàn toàn. Lighthouse = lab data (simulation). Google dùng field data (real users from Chrome).

"CDN sẽ fix tất cả"

Không. CDN giúp TTFB và LCP, nhưng không fix INP (do JS execution) hoặc CLS (do layout).

CWV vs Traffic User

Traffic User giúp boost behavioral signals. Nhưng nếu CWV tệ:

  • LCP cao → user bounce trước khi load → Dwell Time thấp
  • INP chậm → frustration → pogo-stick
  • CLS cao → rage click → user thoát

Phải fix CWV trước khi chạy Traffic User mạnh — nếu không sẽ lãng phí ngân sách traffic.

Kết luận

Core Web Vitals 2026 với INP thay FID là chuẩn mới. Đầu tư fix CWV = đầu tư vào foundation SEO mà mọi yếu tố khác phụ thuộc.

Roadmap:

  1. Fix CWV đầu tiên (foundation)
  2. Content quality tốt
  3. Traffic User từ Traffic Việt boost signal
  4. Backlink + E-E-A-T build authority

Liên hệ Traffic Việt qua 039 309 1996 để được audit CWV miễn phí + tư vấn Traffic User chiến lược.