Nhiều người nhận được thông báo rằng Google đã thêm chỉ số Core web vitals vào trong Google Search Console. Một trong những vấn đề quan trọng nhất liên quan đến chỉ số vitals là CLS.
CLS viết tắt bởi Optimize Cumulative Layout Shift.
Sự thay đổi về bố cục (Layout shifts) rất dễ gây mất tập trung và khó chịu cho người dùng trang web. Bạn tưởng tượng đang đọc một bài báo khi tất cả các elements trên trang đột ngột thay đổi /dịch chuyển vị trí khi đã tải xong và bạn bị khó chịu cảm giác mất tập trung.
Vì vậy, CLS có thể gây ra các vấn đề thực tế nghiêm trọng.
Làm sao sửa CLS?
Đây chắc chắn là một trong những lỗi khó khắc phục nhất vì bạn không dễ dàng phát hiện ra điều gì đang tạo ra vấn đề CLS.
Nếu trang web của bạn có điều gì đó khiến nội dung thay đổi, đó có thể là nguyên nhân chính gây ra lỗi CLS.
5 lý do dưới đây có thể giúp bạn sử lý vấn đề CLS
1. Tắt sticky headers – tính năng sticky ở header dễ gây cho nội dung bị dịch chuyển lên xuống.
2. Tắt hiệu ứng shrinking của logo – phóng to nhỏ logo khi cuộn trang. Logo của bạn Cũng bao gồm thuộc tính size với thẻ img. Ảnh mà thiếu thuộc tính size cũng là một lý do phổ biến thứ hai của vấn đề CLS trên kinh nghiệm rút ra của tôi.
3. Luôn luôn thêm thuộc tính size cho thẻ img và video DOM.
Nếu bạn sử dụng WordPress CMS thì trong quá trình upload ảnh nó sẽ tự động thêm thuộc tính width height cho thẻ ảnh.
VD:
<img src='thelink' width='400px' height='300px'>
4. Đừng bao giờ thêm nội dung phía trước một nội dung khác.
Ngoại trừ phản hồi bởi tương tác của người dùng. Điều này đảm bảo bất kỳ thay đổi bố cục nào xảy ra đều được mong đợi. Một ví dụ điển hình về điều này là các popup bật lên như đăng ký bản tin newsletter cho website WordPress.
5. Tắt hiệu ứng animations.
Hoặc chuyển animation thành animation của thuộc tính tạo ra sự thay đổi bố cục. Tạo hiệu ứng chuyển tiếp theo cách đưa ra ngữ cảnh và tính liên tục từ trạng thái này sang trạng thái khác. Hoặc tốt hơn là tránh xa các hình ảnh động (gif).
Nếu điều này là quá nhiều đối với bạn, hãy liên hệ với chúng tôi. Với đội ngũ chuyên gia tối ưu pagespeed sẽ giúp bạn khắc phục sự cố CLS của bạn và các lỗi quan trọng về web vitals errors khác một cách tối ưu nhất.
Một cách dễ dàng để kiểm tra xem bạn có khắc phục được sự cố CLS hay không là test bằng công cụ đo tốc độ trang của google (Pagespeed Insight).
