Cumulative layout shift

Cumulative Layout Shift

Cumulative Layout Shift (CLS) là chỉ số đo mức độ thay đổi vị trí bất ngờ của các phần tử trên trang trong quá trình tải. Hiện tượng này xảy ra khi nội dung nhảy chỗ, khiến người dùng lỡ nhấp vào chỗ khác hoặc mất phương hướng. Các nguyên nhân phổ biến gồm hình ảnh hoặc quảng cáo không có kích thước cố định, nội dung được chèn động hoặc font chữ tải muộn. CLS được tính bằng tổng độ dịch chuyển của các phần tử trong suốt vòng đời tải trang, càng nhỏ càng tốt. Một chỉ số CLS cao thường dẫn đến trải nghiệm tệ, làm giảm sự tin tưởng và gây phiền toái cho người dùng. Để giảm CLS, bạn nên khai báo sẵn chiều rộng và chiều cao cho hình ảnh và khung quảng cáo, hoặc dành một vùng trống cho nội dung sẽ xuất hiện sau. Tránh chèn nội dung mới lên đầu trang khi người dùng đang tương tác, và dùng chuyển động CSS thay vì thay đổi layout trực tiếp. Sử dụng kỹ thuật tải font hợp lý cũng giúp ngăn nhảy chữ khi font gốc chưa tải xong. Theo dõi và sửa CLS sẽ cải thiện sự mượt mà của trang và giảm khả năng người dùng nhấn nhầm hoặc rời đi. Điều này đặc biệt quan trọng trên điện thoại di động, nơi màn hình nhỏ làm cho các thay đổi layout khó chịu hơn.