Hướng dẫn kiểm tra và cải thiện Core Web Vitals cho website

Một website tải được chưa có nghĩa là website mang lại trải nghiệm tốt. Người dùng còn quan tâm nội dung chính xuất hiện nhanh hay chậm, thao tác có phản hồi tức thời không và giao diện có bất ngờ dịch chuyển khi đang đọc hay không. Core Web Vitals giúp lượng hóa ba khía cạnh này.

Bài hướng dẫn dưới đây giúp bạn đo đúng, tìm nguyên nhân và lập danh sách cải thiện theo mức độ ưu tiên, thay vì chạy theo một điểm số tổng hợp.

Ba chỉ số cần hiểu trước khi đo

Google đánh giá các ngưỡng này ở phân vị thứ 75. Hiểu đơn giản, phần lớn lượt truy cập thực tế cần đạt mức tốt trên cả thiết bị di động và máy tính.

Bước 1: Đo một trang bằng PageSpeed Insights

1. Mở PageSpeed Insights và nhập URL đầy đủ của trang cần kiểm tra.
2. Xem riêng kết quả trên thiết bị di động và máy tính; không dùng kết quả desktop để suy đoán cho mobile.
3. Kiểm tra phần dữ liệu người dùng thực tế trước. Đây là dữ liệu hiện trường từ Chrome UX Report trong khoảng 28 ngày, nếu URL hoặc website có đủ lượng mẫu.
4. Dùng phần dữ liệu thử nghiệm của Lighthouse để tìm nguyên nhân kỹ thuật và kiểm tra nhanh sau mỗi thay đổi.

Dữ liệu hiện trường trả lời “người dùng thật đang gặp gì”; dữ liệu thử nghiệm giúp trả lời “có thể sửa ở đâu”. Hai loại dữ liệu phục vụ hai mục đích khác nhau.

Bước 2: Xác định đúng trang và điều kiện kiểm tra

Không nên chỉ kiểm tra trang chủ. Hãy chọn đại diện cho các mẫu trang quan trọng như bài viết, trang sản phẩm, danh mục, landing page và trang có biểu mẫu. Ghi lại URL, thiết bị, thời điểm, phiên bản triển khai và kết quả trước khi tối ưu để có cơ sở so sánh.

Bước 3: Cải thiện LCP

Phần tử LCP thường là ảnh lớn, banner hoặc khối chữ chính. Khi LCP chậm, hãy kiểm tra theo thứ tự:

• Nén ảnh, dùng WebP hoặc AVIF khi phù hợp và cung cấp kích thước ảnh theo màn hình.
• Không lazy-load ảnh hero đang nằm ngay trong màn hình đầu tiên; ưu tiên tải tài nguyên này.
• Giảm thời gian phản hồi máy chủ bằng cache, tối ưu truy vấn và chọn hạ tầng phù hợp.
• Loại bỏ CSS, JavaScript chặn hiển thị; chỉ tải tài nguyên thật sự cần cho phần đầu trang.
• Dùng CDN khi người dùng phân bố ở nhiều khu vực địa lý.

Bước 4: Cải thiện INP

INP kém thường xuất hiện khi luồng chính bận xử lý JavaScript quá lâu. Hãy thử:

• Chia tác vụ dài thành các phần nhỏ để trình duyệt có cơ hội phản hồi thao tác.
• Giảm mã JavaScript không sử dụng và trì hoãn script bên thứ ba không thiết yếu.
• Tránh thực hiện quá nhiều công việc trong một sự kiện click, nhập liệu hoặc cuộn.
• Cập nhật giao diện sớm để người dùng nhận được tín hiệu phản hồi, sau đó mới hoàn thành tác vụ nặng.

Bước 5: Giảm CLS

• Khai báo thuộc tính kích thước hoặc tỷ lệ khung hình cho ảnh, video và iframe.
• Dành sẵn không gian cho quảng cáo, banner, thông báo và nội dung tải bất đồng bộ.
• Không chèn nội dung mới lên phía trên phần người dùng đang đọc, trừ khi họ chủ động yêu cầu.
• Tải font hợp lý và dùng font dự phòng có thông số gần giống để hạn chế chữ nhảy.

Bước 6: Lập thứ tự ưu tiên

Ưu tiên các mẫu trang có nhiều lưu lượng hoặc ảnh hưởng trực tiếp đến chuyển đổi. Trong mỗi trang, xử lý vấn đề tạo tác động lớn nhưng ít rủi ro trước: ảnh quá nặng, thiếu kích thước ảnh, script bên thứ ba không cần thiết và cache chưa hợp lý.

Bước 7: Đo lại và theo dõi

Lighthouse có thể phản ánh thay đổi ngay, nhưng dữ liệu hiện trường cần thời gian tích lũy. Sau khi triển khai, hãy theo dõi Search Console và PageSpeed Insights, đồng thời ghi nhận thay đổi về tỷ lệ thoát, chuyển đổi hoặc mức độ tương tác. Tối ưu hiệu suất là quy trình liên tục, không phải một lần “chấm điểm”.

Checklist nhanh

• Đã kiểm tra cả mobile và desktop.
• Đã phân biệt dữ liệu hiện trường với dữ liệu thử nghiệm.
• Ảnh đầu trang được nén và có kích thước phù hợp.
• Ảnh, video và iframe đều có không gian dự kiến.
• JavaScript bên thứ ba được rà soát.
• Có số liệu trước và sau thay đổi.

Nguồn tham khảo

• Google Search Central: Core Web Vitals
• Google: Giới thiệu PageSpeed Insights
• web.dev: Bắt đầu đo Web Vitals