Google PageSpeed Insights áp dụng thuật toán CLS như thế nào?

09/05/2024

Google PageSpeed Insights sử dụng thuật toán CLS (Cumulative Layout Shift) để đánh giá trải nghiệm người dùng liên quan đến sự dịch chuyển không mong muốn của các phần tử trên trang web. CLS được sử dụng trong việc đánh giá tốc độ tải và sự ổn định của giao diện người dùng, đặc biệt là trong quá trình tải trang web.

1. Dưới đây là cách PageSpeed Insights áp dụng thuật toán CLS

Thời Điểm Thực Hiện Đo Lường:
- PageSpeed Insights sẽ tải trang web và theo dõi các thay đổi trong cấu trúc và nội dung của trang trong quá trình tải.
Xác Định Các Yếu Tố Có Thể Dịch Chuyển:
- PageSpeed Insights xác định các phần tử trên trang web mà có thể dịch chuyển, bao gồm hình ảnh, video, quảng cáo, và các phần tử HTML khác.
Theo Dõi Sự Dịch Chuyển:
- Trong quá trình tải, PageSpeed Insights theo dõi các phần tử này và đo lường sự thay đổi vị trí của chúng so với trước khi trang được tải hoàn toàn.
Tính Toán CLS:
- PageSpeed Insights tính toán điểm số CLS bằng cách tổng hợp các dịch chuyển không mong muốn của các phần tử trên trang trong quá trình tải. Điểm số CLS được tính dựa trên tỷ lệ diện tích màn hình và tỷ lệ thay đổi vị trí của các phần tử.
Đánh Giá Kết Quả:
- Dựa trên điểm số CLS tính được, PageSpeed Insights cung cấp đánh giá và khuyến nghị cách để giảm thiểu sự dịch chuyển không mong muốn và cải thiện trải nghiệm người dùng.

PageSpeed Insights cung cấp thông tin chi tiết về CLS bằng cách hiển thị các yếu tố gây dịch chuyển và cung cấp các đề xuất cụ thể để cải thiện trải nghiệm người dùng và điểm số CLS của trang web.

2. Các cảnh báo về sự tương phản màu sắc

Màu nền background color của nút và màu của chữ

Ví dụ:

Google cảnh báo về sự tương phản màu sắc

Cách khắc phục

Mở website: https://dequeuniversity.com/rules/axe/4.7/color-contrast
Chọn màu chữ
Chọn màu nền của nút - background color
=> Làm sao màu chữ và màu nền của nút giao thoa mà Pass qua 4 chỉ số là OK. Xem thêm hình 2 bên dưới