By 
Bài viết này sẽ đưa ra cái nhìn tổng quan về Cumulative Layout Shift (CLS) và giải thích tại sao nó quan trọng trong SEO. Hãy cùng HostingViet khám phá CLS là gì và những cách cải thiện điểm CLS để tối ưu hóa trải nghiệm người dùng.
1. Giới Thiệu về CLS
Từ cuối tháng 5/2020, Google đã thêm tính năng CLS, viết tắt của Cumulative Layout Shift, vào thuật toán đánh giá trải nghiệm người dùng. Điểm số CLS được sử dụng để đo đạc mức độ ổn định của giao diện trang web khi người dùng tương tác.
tham khảo chi tiết hơn tại bài viết: https://hostingviet.vn/cls-la-gi-tai-sao-can-cai-thien-cls-trong-seo
2. Vấn Đề Thường Gặp: Thay Đổi Bố Cục Đột Ngột
Nếu bạn từng trải qua tình huống mất vị trí trên trang web do thay đổi bố cục đột ngột, bạn sẽ hiểu rằng điều này có thể làm ảnh hưởng đến trải nghiệm người dùng. Thay đổi bố cục có thể xuất phát từ việc tải tài nguyên không đồng bộ, thêm động các thành phần DOM, hoặc thậm chí là các quảng cáo thay đổi kích thước.
3. Nguyên Nhân của CLS
Chuyển động bất ngờ của nội dung trang thường xuất phát từ tải tài nguyên không đồng bộ hoặc thay đổi kích thước của các thành phần trang. Điều này có thể bao gồm hình ảnh, video, phông chữ, quảng cáo, hoặc các tiện ích bên thứ ba.
4. Đặc Điểm và Đo Đạc CLS
CLS đo lường tần suất xảy ra của thay đổi bố cục không mong muốn. Điểm số càng thấp, trải nghiệm người dùng càng tốt. Điểm CLS tính toán cả trên máy tính để bàn và thiết bị di động.
Bài viết có thể bạn quan tâm:
https://dautubanthan.com/ke-toan-vat-tu-thanh-pham-hang-hoa/
https://dautubanthan.com/goi-y-3-phan-mem-diet-malware-pho-bien-nhat-hien-nay/
5. Các Thay Đổi Bố Cục Không Ổn Định và Cách Điểm CLS Được Tính Toán
CLS được xác định bởi API không ổn định bố cục, đo lường sự thay đổi vị trí bắt đầu của các phần tử giữa hai khung hình. Điểm CLS được tính bằng cách kết hợp phần tác động và phần khoảng cách.
6. Cách Cải Thiện Điểm CLS
Chú ý đến Kích Thước của Tài Nguyên: Đảm bảo kích thước của hình ảnh và video được xác định trước để tránh thay đổi bố cục đột ngột.
Không Chèn Nội Dung Trên Nội Dung Hiện Có: Tránh chèn nội dung trên nội dung hiện có, trừ khi phản ứng với tương tác người dùng.
Sử Dụng Ảnh Động và Chuyển Tiếp Tốt: Sử dụng ảnh động và chuyển tiếp một cách tự nhiên để cập nhật nội dung mà không làm ảnh hưởng đến trải nghiệm người dùng.
7. Công Cụ Đo Điểm CLS
Chrome User Experience Report
PageSpeed Insights
Search Console (Core Web Vitals report)
8. Lưu Ý Khi Cải Thiện Điểm CLS
Tuân Thủ Nguyên Tắc Hướng Dẫn: Luôn bao gồm thuộc tính kích thước và tránh thay đổi đột ngột.
Chuyển Đổi Hình Ảnh Động Tự Nhiên: Sử dụng transform CSS để làm động các phần tử mà không gây thay đổi bố cục.
Kết luận, hiểu rõ về CLS và áp dụng các biện pháp cải thiện có thể giúp website của bạn đạt được điểm CLS tốt, từ đó cải thiện vị trí trên công cụ tìm kiếm và trải nghiệm người dùng. Hãy áp dụng những nguyên tắc này để website của bạn trở nên ổn định và hấp dẫn hơn trong mắt cả Google và người dùng.
Comments