CLS (Cumulative Layout Shift) là gì? Cách triệt tiêu lỗi dịch chuyển giao diện

Bạn đang đọc một bài báo trên điện thoại và chuẩn bị nhấn vào một đường link, đột ngột một tấm ảnh hoặc banner quảng cáo nhảy ra làm **toàn bộ giao diện bị trượt xuống**, khiến bạn nhấn nhầm vào quảng cáo! Hiện tượng gây ức chế này được Google đo lường bằng chỉ số CLS (Cumulative Layout Shift - Điểm dịch chuyển bố cục tích lũy).

1. Ngưỡng tiêu chuẩn chỉ số CLS của Google

• Tốt (Xanh mượt): CLS < 0.1
• Cần cải thiện (Vàng): CLS từ 0.1 đến 0.25
• Kém (Đỏ): CLS > 0.25

2. 4 Nguyên nhân chính gây ra lỗi CLS và cách khắc phục

1. Hình ảnh không khai báo thuộc tính Width và Height cố định

Trình duyệt không biết trước kích thước của ảnh nên không thể dành chỗ. Khi ảnh tải xong, nó đẩy các văn bản bên dưới xuống. Cách khắc phục: Khai báo thuộc tính width, height hoặc dùng CSS aspect-ratio (xem bài thiếu width height ảnh bị CLS).

2. Quảng cáo / Banner nhúng nhảy ra bất ngờ

Các khối quảng cáo Google AdSense tải chậm và tự động chèn vào giữa bài viết. Cách khắc phục: Tạo sẵn một khung bọc (Placeholder Container) có kích thước cố định sẵn để dành chỗ trước.

3. Hiện tượng nhấp nháy Font chữ (FOUT / FOIT)

Khi phông chữ Google Fonts nạp xong, nó thay thế phông chữ mặc định làm thay đổi kích thước dòng văn bản. Cách khắc phục: Sử dụng next/font tự động tối ưu phông chữ WOFF2 (xem bài tối ưu font chữ next/font).

4. Chèn thêm phần tử DOM mới lên phía trên nội dung hiện tại

Tránh dùng JavaScript để chèn thêm thanh thông báo (Notification Bar) vào đầu trang sau khi trang đã render xong.

Kết luận

Triệt tiêu lỗi CLS giúp website ổn định, bảo vệ trải nghiệm người dùng không bị gián đoạn. Uwmee Software thiết kế giao diện Next.js chuẩn tĩnh không bị dịch chuyển bố cục với điểm CLS luôn = 0.0. Đọc thêm bài viết tối ưu Core Web Vitals.