Core Web Vitals là gì? LCP, INP, CLS giải thích dễ hiểu và cách cải thiện

Bạn đã từng mở một website, chờ mãi mới thấy nội dung, bấm nút không phản hồi, hoặc đang định bấm thì bố cục nhảy làm bấm nhầm? Đó chính là những trải nghiệm mà Core Web Vitals đo lường. Google dùng các chỉ số này như một phần tín hiệu xếp hạng, và quan trọng hơn, khách hàng rời đi khi gặp website như vậy.

Ba chỉ số của Core Web Vitals

Chỉ số	Đo điều gì	Ngưỡng tốt
LCP (Largest Contentful Paint)	Thời gian hiện nội dung lớn nhất (ảnh banner, tiêu đề lớn)	Không quá 2,5 giây
INP (Interaction to Next Paint)	Độ trễ từ khi bấm, chạm đến khi trang phản hồi	Không quá 200 mili giây
CLS (Cumulative Layout Shift)	Mức độ bố cục bị xê dịch khi đang tải	Không quá 0,1

INP thay thế chỉ số FID từ tháng 3/2024, đo độ phản hồi toàn diện hơn.

Cách đo Core Web Vitals

• PageSpeed Insights: nhập địa chỉ trang, xem dữ liệu thực tế từ người dùng (nếu website đủ lượt truy cập) và kết quả đo thử nghiệm. Xem cách kiểm tra tốc độ website.
• Google Search Console: báo cáo Core Web Vitals nhóm các trang theo trạng thái Tốt, Cần cải thiện, Kém.
• Công cụ trong trình duyệt: dành cho lập trình viên kiểm tra chi tiết.

Luôn ưu tiên kết quả trên điện thoại, vì phần lớn khách truy cập bằng di động và điện thoại thường yếu hơn máy tính.

Cải thiện LCP (tải nội dung chính chậm)

• Nén ảnh banner, dùng định dạng WebP, kích thước vừa đủ. Xem tối ưu kích thước ảnh.
• Không đặt slider nhiều ảnh nặng ở đầu trang.
• Hosting đủ mạnh, máy chủ phản hồi nhanh; dùng bộ nhớ đệm (cache).
• Ưu tiên tải ảnh đầu trang, tải chậm (lazy load) ảnh phía dưới.
• Giảm font chữ, CSS, JavaScript chặn hiển thị.

Cải thiện INP (bấm chậm phản hồi)

• Giảm số plugin, mã theo dõi, chat, popup chạy cùng lúc.
• Trì hoãn các đoạn mã không cần thiết đến khi người dùng tương tác.
• Tránh các hiệu ứng nặng chạy liên tục.

Cải thiện CLS (bố cục nhảy)

• Khai báo chiều rộng, chiều cao cho ảnh, video, khung nhúng.
• Dành sẵn chỗ cho banner, quảng cáo, thông báo cookie.
• Tránh chèn nội dung đột ngột phía trên nội dung đang xem.
• Tải font chữ đúng cách để chữ không thay đổi kích thước khi font tải xong.

Thứ tự ưu tiên khi tối ưu

1. Trang chủ và các trang mang lại nhiều khách nhất (xem trong Google Analytics, Search Console).
2. Trang dịch vụ, sản phẩm chạy quảng cáo.
3. Bài viết có nhiều lượt truy cập.

Không cần đạt điểm 100. Mục tiêu là vượt ngưỡng tốt cho dữ liệu thực tế trên điện thoại.

Ví dụ: website bán hàng cải thiện tốc độ

Một website bán mỹ phẩm có điểm tốc độ trên điện thoại thấp: banner trang chủ là slider 5 ảnh, mỗi ảnh hơn 1MB; nhiều plugin hiệu ứng; mã chat và mã theo dõi tải ngay khi mở trang. Sau khi thay slider bằng một ảnh tĩnh đã nén, gỡ plugin không cần thiết, trì hoãn mã chat đến khi người dùng tương tác và bật bộ nhớ đệm, chỉ số LCP và INP cải thiện rõ rệt, tỷ lệ người thoát ngay khi vào trang giảm.

Dữ liệu thực tế và dữ liệu thử nghiệm

• Dữ liệu thực tế (field data): thu thập từ người dùng thật qua trình duyệt Chrome, phản ánh trải nghiệm thật. Google dùng dữ liệu này để đánh giá.
• Dữ liệu thử nghiệm (lab data): đo trong điều kiện giả lập, hữu ích để tìm nguyên nhân và kiểm tra sau khi sửa.

Website ít lượt truy cập có thể chưa có dữ liệu thực tế; khi đó dùng dữ liệu thử nghiệm làm tham khảo.

Danh sách kiểm tra nhanh

1. Ảnh đầu trang đã nén, có kích thước khai báo.
2. Không có slider nặng ở đầu trang.
3. Plugin không dùng đã gỡ.
4. Bộ nhớ đệm và nén tệp đã bật.
5. Mã chat, mã theo dõi được trì hoãn hợp lý.
6. Font chữ tải tối ưu, số lượng font vừa phải.
7. Hosting đáp ứng tốt, máy chủ phản hồi nhanh.

Câu hỏi thường gặp

Điểm PageSpeed cao có chắc lên top không?
Không. Tốc độ là một yếu tố, nội dung hữu ích và độ uy tín vẫn quan trọng hơn. Nhưng website chậm sẽ mất khách dù có lên top.

Website WordPress có đạt Core Web Vitals tốt được không?
Được, nếu dùng giao diện nhẹ, plugin chọn lọc, hosting tốt và cấu hình bộ nhớ đệm đúng. Findme có dịch vụ tối ưu tốc độ cho website đang chạy.