Core Web Vitals: Hiểu LCP, INP và CLS để tối ưu website

Core Web Vitals là nhóm chỉ số mô tả ba mặt của trải nghiệm: tải nội dung chính, phản hồi khi người dùng tương tác và độ ổn định bố cục. Google Search Central nêu ba chỉ số là LCP, INP và CLS, đồng thời khuyến nghị hướng tới LCP trong 2,5 giây đầu, INP không quá 200 mili giây và CLS không quá 0,1 cho trải nghiệm tốt. Đây là mốc hướng dẫn để ưu tiên cải thiện, không phải lời hứa rằng một điểm số sẽ tự động đưa trang lên thứ hạng nào đó.

Điểm quan trọng là đo theo trang và bối cảnh thật. Trang chủ, trang sản phẩm, checkout và bài viết có tài nguyên, script và hành vi khác nhau. Một trang đạt điểm trong môi trường thử nghiệm nhưng ảnh hưởng bởi mạng chậm, điện thoại cũ hoặc popup trong thực tế vẫn cần được xem xét.

Ba chỉ số đo điều gì?

LCP: nội dung lớn nhất xuất hiện khi nào?

Largest Contentful Paint đo thời điểm phần tử nội dung lớn nhất trong vùng nhìn thấy được hiển thị, thường là ảnh hero, tiêu đề lớn hoặc khối văn bản chính. LCP chậm khiến người dùng không biết trang đã tải đến đâu. Nguyên nhân có thể là máy chủ phản hồi chậm, tài nguyên quan trọng bị trì hoãn, ảnh hero quá lớn, font chặn hiển thị hoặc JavaScript dựng nội dung cần thiết.

INP: giao diện phản hồi ra sao?

Interaction to Next Paint phản ánh độ trễ từ thao tác như chạm, nhấp hoặc gõ đến khi trình duyệt có thể vẽ phản hồi tiếp theo. Menu, bộ lọc, biến thể sản phẩm và form là các điểm cần kiểm tra. Handler dài, nhiều script bên thứ ba, re-render lớn hoặc công việc đồng bộ trên main thread có thể làm thao tác bị treo.

CLS: bố cục có nhảy không?

Cumulative Layout Shift đo những thay đổi vị trí bất ngờ trong suốt vòng đời trang. Ảnh không có kích thước, quảng cáo hoặc iframe không giữ chỗ, font đổi làm văn bản dồn, banner chèn phía trên và popup tự xuất hiện là nguyên nhân thường gặp. Người dùng có thể bấm nhầm dù trang cuối cùng trông đúng.

Theo hướng dẫn Web Vitals của Google, đánh giá các ngưỡng ở phân vị thứ 75, tách riêng điện thoại và desktop. Cả ba chỉ số cần đạt ngưỡng. Lighthouse không đo trực tiếp INP trong lần tải trang tự động; TBT chỉ là chỉ số hỗ trợ chẩn đoán, không thay thế dữ liệu tương tác thực tế.

Đo đúng trước khi sửa

Google phân biệt dữ liệu thực tế từ người dùng với dữ liệu phòng thí nghiệm. Field data cho biết nhóm thiết bị, mạng và địa điểm thật; lab data giúp tái hiện điều kiện kiểm soát để chẩn đoán. Hãy xem báo cáo Core Web Vitals trong Search Console, chạy PageSpeed Insights cho URL mẫu và kiểm tra DevTools khi cần. Một URL đơn lẻ không đại diện cho toàn bộ template. Google giải thích Core Web Vitals cũng khuyên dùng báo cáo thực tế để theo dõi.

Ghi lại phiên bản theme, app, tag, ảnh và thay đổi code khi đo. Nếu điểm dao động, xem số mẫu, loại thiết bị, cache, nội dung động và chiến dịch đang chạy trước khi kết luận. Mục tiêu là tìm nguyên nhân có thể hành động, không săn một con số đẹp.

Cách xử lý LCP

Bắt đầu từ phần tử LCP trên từng mẫu. Nếu là ảnh hero, dùng tệp đúng kích thước hiển thị, định dạng phù hợp, preload có chọn lọc và tránh lazy-load phần nằm ngay trong vùng nhìn thấy. Nếu là văn bản, giảm tài nguyên chặn render, kiểm tra font và đưa nội dung chính vào HTML có thể đọc sớm. Nếu máy chủ phản hồi chậm, xem hosting, cache, truy vấn dữ liệu và vị trí người dùng.

Không preload mọi ảnh hoặc font. Tài nguyên ưu tiên cần khớp nội dung thật trên trang; preload thừa có thể tranh băng thông với CSS, script hoặc ảnh quan trọng. Tối ưu hình ảnh website là bước đi kèm khi LCP phụ thuộc ảnh.

Cách xử lý INP

Liệt kê tương tác quan trọng: mở menu, lọc danh mục, chọn biến thể, thêm giỏ, mở accordion và gửi form. Đo handler, chia việc dài thành phần nhỏ, trì hoãn tác vụ không phục vụ thao tác hiện tại và tránh re-render toàn bộ cây giao diện. Xóa app, widget hoặc tag không tạo giá trị; nếu phải giữ, tải sau nội dung chính hoặc chỉ ở trang cần.

Kiểm tra trạng thái đang tải, lỗi và thành công. Một giao diện phản hồi nhanh nhưng không cho biết thao tác đã nhận vẫn khiến người dùng bấm lặp. Với website ecommerce, xem dịch vụ website thương mại điện tử cùng luồng giỏ và checkout, không chỉ đo trang chủ.

Cách xử lý CLS

Đặt width và height hoặc aspect ratio cho ảnh, video, iframe và vùng quảng cáo. Dành chỗ cho banner, cookie notice và thông báo có thể xuất hiện. Tải font với chiến lược phù hợp, kiểm tra fallback và tránh chèn nội dung phía trên phần người dùng đang đọc. Animation nên dùng thuộc tính không làm thay đổi layout; popup không nên tự đẩy nội dung đang hiển thị.

Kiểm tra lần đầu tải, tải lại có cache, cuộn sâu và tương tác sau vài giây. Một layout ổn khi mở nhưng nhảy khi widget chat khởi tạo vẫn là lỗi trải nghiệm.

Ưu tiên theo giá trị trang

Không cần sửa mọi URL cùng lúc. Chọn mẫu có nhiều lượt vào, có CTA quan trọng hoặc tạo ra doanh thu và hỗ trợ. Ghi quan sát trước và sau theo cùng điều kiện; đồng thời kiểm tra chuyển đổi, lỗi, thời gian hoàn tất tác vụ và phản hồi người dùng. Core Web Vitals là một phần của trải nghiệm trang, không thay thế nội dung, khả năng truy cập, bảo mật hay cấu trúc thông tin.

Checklist nhanh

1. Biết phần tử LCP, tương tác chậm và nguồn gây CLS trên từng mẫu.
2. Có dữ liệu field và lab, không kết luận từ một lần chạy.
3. Ảnh hero đúng kích thước, có ưu tiên tải và không lazy-load nhầm.
4. Script, app, tag và widget được đánh giá theo giá trị.
5. Handler tương tác không chạy công việc dài không cần thiết.
6. Ảnh, iframe, quảng cáo và banner có chỗ giữ trước.
7. Font, popup và animation không làm nội dung nhảy.
8. Mẫu sản phẩm, checkout và form được thử trên điện thoại.
9. Ghi phiên bản thay đổi để biết nguyên nhân.
10. Theo dõi trải nghiệm cùng mục tiêu kinh doanh, không chỉ điểm số.

Shopify hướng dẫn tối ưu hiệu năng cũng nhắc theme, app, ảnh, video và code bên thứ ba đều có thể ảnh hưởng các chỉ số. Dùng khung này để đối chiếu nền tảng hiện tại, rồi đọc checklist SEO kỹ thuật trước khi ra mắt khi cần kiểm tra toàn site.

Nguồn tham khảo

• Google Search Central: Understanding Core Web Vitals
• Shopify Help Center: Improving online store performance
• Google Search Central: Technical SEO techniques

Một vòng chẩn đoán có thể bàn giao

Chọn một template chậm và ghi thiết bị, mạng, URL, trạng thái cache, LCP element và tương tác cần kiểm. Với LCP, xác định thời gian nằm ở server, tải tài nguyên hay render. Với INP, thử đúng menu, filter hoặc form người dùng đang thao tác. Với CLS, ghi phần tử dịch chuyển và điều gì được chèn trước nó. Không tối ưu ba chỉ số bằng cùng một giải pháp mặc định.

Ví dụ một bài có hero lớn và ảnh tải lười: kiểm ưu tiên tải hero trước khi đổi hosting. Nếu menu chậm do handler xử lý nhiều việc, giảm công việc đồng bộ trước khi nén thêm ảnh. Nếu font làm chữ đổi dòng, kiểm kích thước và cách tải font. Đây là giả thuyết để kiểm bằng trace, không phải nguyên nhân đã xác nhận trên mọi website.

Sau sửa, đo trong điều kiện tương đương, kiểm lại tác vụ và ghi kết quả field riêng với lab. Caching hỗ trợ một số phần tải, nhưng phải giữ đúng ngôn ngữ và dữ liệu người dùng. Không báo INP thực chỉ từ một lượt tải Lighthouse tự động.