Core Web Vitals 2026 Checklist

LCP

Largest Contentful Paint

Mục tiêu: dưới 2.5s

0/7

Hero image dùng định dạng WebP / AVIF

Giảm kích thước file 25–50% so với JPEG/PNG, tải nhanh hơn đáng kể

Image

Thêm fetchpriority="high" cho LCP image

Yêu cầu browser tải LCP element với độ ưu tiên cao nhất ngay từ đầu

HTML

TTFB dưới 800ms

Tối ưu server response time — dùng Edge/CDN, giảm DB query, bật compression

Server

Inline Critical CSS cho Above-the-fold

Nhúng CSS cần thiết trực tiếp vào <style> để tránh render-blocking

CSS

Triển khai CDN phân phối nội dung tĩnh

Phục vụ assets từ edge node gần người dùng nhất, giảm latency đáng kể

Infra

Cấu hình Server-side Cache (HTTP Cache-Control)

Set Cache-Control: max-age và stale-while-revalidate hợp lý

Cache

Preconnect tới domain quan trọng (fonts, API, CDN)

<link rel="preconnect"> giúp thiết lập kết nối sớm, giảm round-trip

Network

CLS

Cumulative Layout Shift

Mục tiêu: dưới 0.1

0/7

Khai báo width và height cho tất cả ảnh

Browser tính trước không gian layout, không bị dịch chuyển khi ảnh tải xong

Image

Dùng aspect-ratio CSS cho responsive media

Thay thế padding-hack cũ bằng aspect-ratio: 16/9 để giữ tỉ lệ

CSS

Đặt min-height cho ad slots và embeds

Dành sẵn không gian cho quảng cáo và widget trước khi chúng được inject

Layout

Preload web fonts quan trọng

<link rel="preload" as="font"> để font sẵn sàng trước khi render text

Font

Cấu hình font-display: swap (hoặc optional)

Hiển thị fallback font ngay lập tức, tránh invisible text khi font chưa tải

Font

Tránh inject DOM content trên vùng hiển thị động

Thêm nội dung mới bên dưới viewport, không đẩy nội dung hiện tại xuống đột ngột

JS

Dùng size-adjust để căn chỉnh fallback font

Giảm FOUT layout shift bằng cách scale fallback font khớp với web font chính xác hơn

CSS

INP

Interaction to Next Paint

Mục tiêu: dưới 200ms

0/6

Chia nhỏ Long Tasks — mỗi task dưới 50ms

Dùng Chrome DevTools Performance tab để phát hiện và break up long tasks

JS

Defer và lazy-load non-critical JavaScript

Dùng defer, async, hoặc dynamic import cho code không cần thiết ngay

Loading

Sử dụng scheduler.yield() trong event handlers nặng

Nhường quyền điều khiển lại cho browser giữa các bước xử lý để không block rendering

API

Giảm JavaScript bundle size (Tree-shaking, Code-splitting)

Loại bỏ dead code, tách bundle theo route để parse và execute ít JS hơn

Bundle

Tránh blocking main thread trong event listeners

Chuyển heavy computation sang Web Workers, tránh sync XHR và blocking loops

Thread

Optimize re-renders — debounce, throttle event handlers

Dùng debounce cho input, throttle cho scroll/resize để giảm số lần browser phải re-paint

Perf