Đo lường và tối ưu CLS cho trải nghiệm web

[Nhật Quang]

Cumulative Layout Shift (CLS) là thước đo độ ổn định hình ảnh của trang web và nằm trong Core Web Vitals ảnh hưởng đến thứ hạng tìm kiếm. Bài viết này giải thích CLS là gì, cách đo, nguyên nhân phổ biến và những cách tối ưu để cải thiện trải nghiệm người dùng.

CLS là gì và tại sao quan trọng?​

Cumulative Layout Shift (CLS) đo mức độ "dịch chuyển bất ngờ" của nội dung sau khi trang đã hiển thị lần đầu. Những dịch chuyển này có thể khiến người dùng bấm nhầm nút, mất tập trung khi đọc hoặc thậm chí gây lỗi khi thao tác (ví dụ thanh toán bị bấm nhầm).

Cách tính điểm CLS​

CLS được tính bằng tổng các lần layout shift trong một cửa sổ thời gian (tối đa 5 giây) bằng tích của hai thành phần: impact fraction (tỉ lệ diện tích bị ảnh hưởng) và distance fraction (tỉ lệ di chuyển so với vùng nhìn thấy). Ví dụ, nếu ảnh hưởng là 70% và phần chính di chuyển 20% chiều cao màn hình thì điểm shift = 0.7 * 0.2 = 0.14.

Các ngưỡng tham khảo:

• 0.25: kém

Nguyên nhân phổ biến gây CLS​

• Ảnh, iframe hoặc quảng cáo không có kích thước cố định và được tải sau khi nội dung đã render.
• Web font tải muộn làm thay đổi layout khi font chính thay thế font dự phòng.
• Thành phần được chèn động (ví dụ banner, widget, nội dung SPA) khiến nội dung hiện có bị đẩy xuống.
• Tải chậm tài nguyên hoặc JavaScript thay đổi DOM sau khi trang đã hiển thị.

Giải pháp và kỹ thuật khắc phục​

• Đặt width và height cho ảnh và iframe để trình duyệt có thể dành sẵn không gian trước khi tài nguyên tải.
• Sử dụng placeholder (khung trống) với đúng kích thước hoặc aspect-ratio để giữ bố cục khi nội dung chậm tải.
• Với SPA, đặt min-height cho vùng chứa chính hoặc reserve không gian cho các khối có thể chèn sau này.
• Giảm layout shift do web font: dùng font-display: fallback hoặc font-display: optional để tránh thay đổi kích thước chữ bất ngờ.
• Không chèn nội dung ở trên cùng trang (ví dụ banner, popup) sau khi trang đã render nếu chưa reserve chỗ cho nó.
• Sử dụng kỹ thuật lazy-load nhưng vẫn khai báo kích thước để không làm thay đổi bố cục.

Đo lường CLS và công cụ hỗ trợ​

• Chrome DevTools: bật phần Animations và kích hoạt "Layout Shift Regions" để thấy vùng bị dịch chuyển.
• Lighthouse (lab data): đo layout shift trong quá trình tải ban đầu của trang.
• Field data (Real User Monitoring): cho dữ liệu thực tế từ người dùng, bao gồm khi cuộn và tương tác.
• Các công cụ giám sát người dùng thực tế sẽ giúp xác định chính xác lúc nào và trên thiết bị nào xảy ra CLS.

Lưu ý khi phân tích CLS​

• Chỉ những layout shift "bất ngờ" mới tính vào CLS — những thay đổi xảy ra trong vòng 500ms sau tương tác người dùng sẽ bị bỏ qua.
• Sự khác biệt giữa dữ liệu lab và field là phổ biến: lab chỉ kiểm tra tải lần đầu, còn field ghi nhận khi người dùng cuộn, mở menu hay tương tác.
• Ưu tiên theo dõi cả hai nguồn dữ liệu: dùng lab để debug nhanh và field để bắt các vấn đề thực tế xảy ra với người dùng.

Checklist nhanh để giảm CLS​

• Khai báo width/height hoặc aspect-ratio cho ảnh và iframe.
• Dự trữ không gian cho quảng cáo và banner trước khi chèn.
• Áp dụng font-display phù hợp cho web font.
• Tránh chèn DOM lên nội dung đang hiển thị; nếu cần, reserve chỗ trước.
• Giám sát bằng RUM để phát hiện và sửa các CLS xảy ra khi người dùng cuộn hoặc tương tác.

Nguồn: https://www.debugbear.com/docs/metrics/cumulative-layout-shift