Bạn đang đọc một đoạn văn thì ảnh xuất hiện và đẩy cả phần chữ xuống. Hoặc vừa chạm vào một liên kết, một khối quảng cáo chen vào khiến bạn bấm nhầm. Những thay đổi vị trí bất ngờ như vậy là dấu hiệu cần kiểm tra độ ổn định bố cục, trong đó CLS là một chỉ số liên quan.
Ghi lại thời điểm trang bị dịch chuyển
Đừng chỉ chụp màn hình sau khi trang tải xong. Hãy quay ngắn quá trình mở trang, cuộn và tương tác để thấy phần tử nào xuất hiện trước lúc nội dung nhảy. Thử lần truy cập mới và lần truy cập lại vì bộ nhớ đệm có thể làm một lỗi khó tái hiện hơn.
Phân biệt phần tử bị đẩy với phần tử gây ra thay đổi. Một tiêu đề dịch xuống chưa chắc có lỗi trong tiêu đề; ảnh hoặc khung nội dung phía trên có thể vừa thay đổi chiều cao. Ghi vị trí, thiết bị và thao tác giúp người sửa tránh xử lý nhầm vùng.
Dành sẵn không gian cho ảnh và nội dung nhúng
Ảnh cần có thông tin kích thước hoặc tỷ lệ phù hợp để trình duyệt bố trí vùng hiển thị trước khi tải xong. Video, bản đồ và khung nội dung bên ngoài cũng cần khoảng dành trước. Kích thước phải thích ứng theo màn hình, không cố định một chiều cao bất hợp lý cho mọi thiết bị.
Với khối có chiều cao thay đổi, như quảng cáo hoặc đánh giá khách hàng, cân nhắc vùng chứa phù hợp với nội dung dự kiến. Không nên chèn bất ngờ một khối lớn phía trên phần người đọc đang theo dõi. Việc giữ chỗ cần được cân bằng với trải nghiệm, tránh tạo những khoảng trống khó hiểu.
Kiểm tra font và thông báo xuất hiện muộn
Khi font thay thế font tạm, độ rộng chữ và số dòng có thể đổi. Rà các tiêu đề dài, nút và đoạn mở đầu để xem sự thay đổi có đáng kể không. Lựa chọn font dự phòng gần về kích thước là một phần cần cân nhắc, bên cạnh cách tải font.
Thông báo cookie, thanh khuyến mãi hoặc nội dung tải qua mã cũng có thể thay đổi bố cục. Kiểm tra chúng ở trạng thái khách mới, khách đã chọn tùy chọn và sau khi đóng. Không sửa bằng cách phủ mọi thứ lên nội dung, vì một lớp che ổn định vẫn gây khó sử dụng.
Kiểm tra cả trong lúc cuộn
Một bài đo lúc mở trang có thể bỏ sót thay đổi xuất hiện sau đó. Thử cuộn đến vùng ảnh tải chậm, mở mục hỏi đáp và quay lại đầu trang. Sau mỗi thay đổi, xem nội dung có đủ chỗ và liên kết còn ở vị trí dễ bấm không.
Bạn có thể gửi video lỗi bố cục cho Tý Hon, kèm URL và thiết bị. Phạm vi xử lý nên dựa trên phần tử gây xê dịch đã xác định, không chỉ yêu cầu một điểm CLS đẹp hơn.
Tham khảo: Tối ưu Cumulative Layout Shift.
