Web Vitals API Là Gì?
Web Vitals API là bộ API tích hợp sẵn trong trình duyệt web, cho phép đo lường trực tiếp các chỉ số trải nghiệm cốt lõi (Core Web Vitals) như LCP, CLP, INP mà không cần cài đặt thêm thư viện nào. Trình duyệt tự thu thập dữ liệu hiệu suất theo thời gian thực, bạn chỉ cần gọi hàm để đọc kết quả.
Nói đơn giản hơn: thay vì phụ thuộc hoàn toàn vào công cụ bên ngoài như Lighthouse hay PageSpeed Insights, Web Vitals API cho phép bạn tự đo hiệu suất trang web ngay trong code, liên tục, trên từng người dùng thực tế.
Web Vitals API Khác Gì So Với Lighthouse?
Nhiều bạn nhầm hai cái này. Lighthouse là công cụ kiểm tra tổng quan, chạy trong môi trường giả lập, cho điểm 0-100. Core Web Vitals API thì ngược lại, đo trên trình duyệt thật của người dùng, không cho điểm mà trả về số liệu thô.
Một điểm quan trọng: Lighthouse chạy một lần tại một thời điểm, còn Web Vitals API chạy liên tục. Bạn có thể thu thập dữ liệu từ hàng ngàn visitor và tính trung bình, kết quả chính xác hơn nhiều so với một lần test.
Ba Chỉ Số Chính Mà Web Vitals API Đo
API tập trung vào ba chỉ số trải nghiệm cốt lõi mà Google dùng để xếp hạng website:
1. LCP (Largest Contentful Paint) — Thời gian render khối nội dung lớn nhất trên màn hình. Mục tiêu dưới 2.5 giây. Nếu trang có ảnh hero lớn, LCP thường phụ thuộc vào tốc độ tải ảnh đó.
2. INP (Interaction to Next Paint) — Độ trễ khi người dùng tương tác (click, gõ phím) cho đến khi màn hình phản hồi. Mục tiêu dưới 200 mili giây. INP thay thế FID từ tháng 3/2024.
3. CLS (Cumulative Layout Shift) — Tổng độ dịch chuyển bố cục trong quá trình tải. Mục tiêu dưới 0.1. Nếu bạn từng click nhầm nút vì trang đột nhiên nhảy, đó là CLS cao.
Cách Sử Dụng Web Vitals API Như Thế Nào?
Đây là phần thú vị nhất. API cung cấp đối tượng PerformanceObserver trong JavaScript để lắng nghe các sự kiện hiệu suất. Code cơ bản chỉ vài dòng.
Ví dụ thực tế: bạn muốn đo LCP của trang, chỉ cần tạo một PerformanceObserver theo dõi loại largest-contentful-paint. Mỗi khi trình duyệt render xong khối lớn nhất, API sẽ báo về. Bạn ghi lại giá trị và gửi lên server để phân tích.
Đối với INP, API lắng nghe tất cả tương tác người dùng trong suốt phiên truy cập, lấy giá trị tồi nhất làm kết quả. CLP thì cộng dồn tất cả lần dịch chuyển layout.
Nếu không muốn tự viết code, thư viện web-vitals của Google (có trên npm) bao bọc API này lại, chỉ cần vài dòng là xong. Rất tiện cho dự án thực tế.
Tại Sao Web Vitals API Quan Trọng Với SEO?
Google xác nhận rõ: Core Web Vitals là yếu tố xếp hạng trực tiếp. Trang nào tải nhanh, phản hồi mượt, ít dịch chuyển sẽ được ưu tiên hơn trong kết quả tìm kiếm.
Nhưng vấn đề là tốc độ tải trang đo bằng Lighthouse một lần không đại diện cho trải nghiệm thực tế. Một trang có thể chạy nhanh trên máy cấu hình cao nhưng chậm trên điện thoại đời cũ. Web Vitals API giải quyết vấn đề này bằng cách thu thập dữ liệu từ mọi thiết bị thật.
Ngoài ra, sau khi Google ra mắt AI Overviews và AI Mode, tốc độ trang còn ảnh hưởng đến khả năng AI crawl và parse nội dung. Trang chậm dễ bị AI bỏ qua khi cần trả lời nhanh cho người dùng.
Cách Thu Thập Dữ Liệu Web Vitals Hiệu Quả
Đo thì dễ, nhưng thu thập có hệ thống mới khó. Mình thấy nhiều team mắc lỗi chỉ đo mà không lưu trữ phân tích. Dưới đây là cách tiếp cận thực tế.
Bước 1: Cài thư viện web-vitals từ npm. Dùng hàm onLCP(), onINP(), onCLS() để lắng nghe. Mỗi hàm trả về giá trị số thực.
Bước 2: Gửi dữ liệu lên server bằng navigator.sendBeacon() hoặc fetch. Đừng quên gửi kèm thông tin thiết bị, đường dẫn trang, thời điểm đo.
Bước 3: Lưu vào database, tính phân vị thứ 75 (P75). Google dùng P75 làm ngưỡng đánh giá, không phải trung bình. Nghĩa là 75% người dùng phải đạt ngưỡng tốt.
Bước 4: Thiết lập dashboard theo dõi theo thời gian. So sánh trước/sau khi tối ưu để biết cải tạo có hiệu quả không.
Công Cụ Nào Tích Hợp Sẵn Web Vitals API?
Ngoài việc tự code, nhiều nền tảng đã tích hợp sẵn:
Google Search Console có báo cáo Core Web Vitals dựa trên dữ liệu Chrome User Experience Report (CrUX) — dữ liệu thu thập từ người dùng Chrome thật. Đây là cách dễ nhất để xem trang mình đang đứng đâu.
Google Analytics 4 có web_vitals event tự động nếu bật Enhanced Measurement. Tuy nhiên dữ liệu GA4 hơi tổng hợp, khó xem chi tiết từng trang.
Chrome DevTools hiển thị Web Vitals ngay trong tab Performance, tiện khi debug. Lighthouse cũng dùng dữ liệu này nhưng dưới dạng mô phỏng.
Ngoài ra các dịch vụ như Vercel Analytics, Cloudflare Web Analytics, SpeedCurve đều dựa trên Web Vitals API để thu thập dữ liệu real-user monitoring (RUM).
Sai Lầm Thường Gặp Khi Dùng Web Vitals API
Thứ nhất: chỉ đo trên desktop, bỏ qua mobile. Hơn 60% traffic Việt Nam là mobile, và thiết bị di động thường chậm hơn máy tính nhiều. Nếu chỉ nhìn số liệu desktop, bạn sẽ có cảm giác ảo rằng trang đang chạy ổn.
Thứ hai: nhìn trung bình thay vì P75. Trung bình che giấu các trường hợp xấu. Một trang có trung bình LCP 2 giây nhưng P75 lên 5 giây nghĩa là 25% người dùng đang chờ rất lâu.
Thứ ba: tối ưu điểm số thay vì trải nghiệm. Nhiều người cố ép LCP xuống 1.5 giây bằng cách giấu nội dung, lazy-load quá mức. Kết quả: điểm đẹp nhưng người dùng không thấy gì trong 2 giây đầu. Hãy nhớ mục tiêu là trải nghiệm, không phải con số.
Có Nên Tự Build Dashboard Web Vitals Không?
Nếu website nhỏ dưới 10.000 lượt/tháng, mình khuyên dùng Google Search Console là đủ. Miễn phí, đủ dữ liệu để biết tình trạng tổng quan.
Khi website lớn hơn, hoặc cần dữ liệu real-time theo từng trang, từng thiết bị, thì tự build dashboard là đáng đầu tư. Kết hợp Web Vitals API với một database đơn giản và Grafana/Metabase là có dashboard đẹp.
Nếu dùng WordPress, nhiều plugin như WP Rocket hay Site Kit đã tích hợp sẵn báo cáo Web Vitals. Không cần code gì thêm.
Tóm Lại
Web Vitals API là cầu nối giữa trải nghiệm người dùng thật và dữ liệu hiệu suất mà bạn có thể đo lường. Không cần công cụ phức tạp, chỉ cần vài dòng JavaScript là thu thập được LCP, INP, CLP từ mọi visitor.
Trong bối cảnh Google ngày càng đề trọng trải nghiệm trang, đặc biệt trên mobile, việc theo dõi Web Vitals liên tục không còn là tùy chọn mà là bắt buộc nếu bạn nghiêm túc với SEO. Bắt đầu từ Google Search Console, khi cần chi tiết hơn thì tự build hoặc dùng dịch vụ RUM.
