| name | performance-web-vitals |
| description | null |
Web Vitals
Category: performance · Status: 🟢 Active
When to use
Khi cần đạt ngưỡng Core Web Vitals (LCP, CLS, INP) cho SEO và trải nghiệm thật của người dùng.
Steps
- Đo bằng Lighthouse (lab) và
web-vitals / RUM (field) — ưu tiên field data.
- LCP (≤2.5s): tối ưu ảnh hero, preload tài nguyên quan trọng, giảm TTFB, tránh chặn render.
- CLS (≤0.1): đặt width/height cho ảnh/iframe, chừa chỗ cho ad/embed, tránh chèn nội dung động đẩy layout.
- INP (≤200ms): chia nhỏ tác vụ dài, tránh JS chặn main thread, debounce, dùng transition cho update nặng.
- Theo dõi liên tục, đặt ngưỡng cảnh báo, tránh hồi quy khi thêm tính năng.
Template
import { onLCP, onCLS, onINP } from 'web-vitals';
onLCP(console.log); onCLS(console.log); onINP(console.log);
Example
Good: ảnh có kích thước cố định (CLS thấp), preload font/hero (LCP tốt).
Avoid: font swap gây nhảy layout, handler nặng đồng bộ làm INP cao.
Checklist