Lập kế hoạch cải thiện chỉ số CLS để đảm bảo công bằng hơn cho các trang dài hạn.
Ngày phát hành: 7 tháng 4 năm 2021
Gần đây, chúng tôi (Nhóm chỉ số tốc độ của Chrome) đã trình bày nghiên cứu ban đầu về các lựa chọn để chỉ số CLS trở nên công bằng hơn đối với những trang mở trong thời gian dài. Chúng tôi đã nhận được nhiều ý kiến phản hồi rất hữu ích và sau khi hoàn tất quá trình phân tích trên quy mô lớn, chúng tôi đã hoàn tất thay đổi mà chúng tôi dự định thực hiện đối với chỉ số này: khoảng thời gian phiên tối đa với khoảng cách 1 giây, giới hạn ở mức 5 giây.
Hãy đọc tiếp để biết thông tin chi tiết!
Chúng tôi đã đánh giá các lựa chọn như thế nào?
Chúng tôi đã xem xét tất cả ý kiến phản hồi nhận được từ cộng đồng nhà phát triển và đưa ý kiến đó vào thành phần cân nhắc.
Chúng tôi cũng đã triển khai các tuỳ chọn hàng đầu trong Chrome và tiến hành phân tích quy mô lớn các chỉ số trên hàng triệu trang web. Chúng tôi đã kiểm tra xem mỗi tuỳ chọn cải thiện loại trang web nào và các tuỳ chọn so sánh như thế nào, đặc biệt là xem xét những trang web được các tuỳ chọn chấm điểm khác nhau. Nhìn chung, chúng tôi nhận thấy rằng:
- Tất cả các tuỳ chọn đều làm giảm mối tương quan giữa thời gian trên trang và điểm số thay đổi bố cục.
- Không có lựa chọn nào làm giảm điểm cho bất kỳ trang nào. Vì vậy, bạn không cần phải lo lắng rằng thay đổi này sẽ làm giảm điểm số của trang web.
Điểm quyết định
Tại sao lại là cửa sổ phiên?
Trong bài đăng trước, chúng tôi đã đề cập đến một số chiến lược phân chia cửa sổ để nhóm các thay đổi về bố cục lại với nhau, đồng thời đảm bảo điểm số không tăng lên vô hạn. Ý kiến phản hồi mà chúng tôi nhận được từ các nhà phát triển phần lớn đều ủng hộ chiến lược cửa sổ phiên vì chiến lược này nhóm các thay đổi về bố cục với nhau một cách trực quan nhất.
Để xem lại các khoảng thời gian phiên, hãy xem ví dụ sau:
Trong ví dụ trên, nhiều thay đổi về bố cục xảy ra theo thời gian khi người dùng xem trang. Mỗi phần tử được biểu thị bằng một thanh màu xanh dương. Bạn sẽ thấy ở trên rằng các thanh màu xanh dương có chiều cao khác nhau; các thanh này thể hiện điểm số của từng thay đổi bố cục riêng lẻ. Cửa sổ phiên bắt đầu bằng lần thay đổi bố cục đầu tiên và tiếp tục mở rộng cho đến khi có khoảng trống không có thay đổi bố cục. Khi lần chuyển đổi bố cục tiếp theo xảy ra, một cửa sổ phiên mới sẽ bắt đầu. Vì có 3 khoảng trống không có sự thay đổi bố cục, nên có 3 cửa sổ phiên trong ví dụ. Tương tự như định nghĩa hiện tại của CLS, điểm số của mỗi lần thay đổi được cộng lại để điểm số của mỗi cửa sổ là tổng số lần thay đổi bố cục riêng lẻ.
Dựa trên nghiên cứu ban đầu, chúng tôi đã chọn khoảng cách là 1 giây giữa các khoảng thời gian phiên và khoảng cách đó phù hợp trong quá trình phân tích quy mô lớn của chúng tôi. Vì vậy, "Khoảng thời gian phiên" hiển thị trong ví dụ trên là 1 giây.
Tại sao lại là khoảng thời gian phiên tối đa?
Chúng tôi đã thu hẹp chiến lược tóm tắt xuống còn 2 lựa chọn trong nghiên cứu ban đầu:
- Điểm trung bình của tất cả các cửa sổ phiên, đối với các cửa sổ phiên rất lớn (các cửa sổ không giới hạn với khoảng cách 5 giây giữa các cửa sổ).
- Điểm tối đa của tất cả các khoảng thời gian phiên, đối với các khoảng thời gian phiên nhỏ hơn (giới hạn ở 5 giây, với khoảng cách 1 giây giữa các khoảng thời gian phiên).
Sau nghiên cứu ban đầu, chúng tôi đã thêm từng chỉ số vào Chrome để có thể phân tích trên quy mô lớn trên hàng triệu URL. Trong quá trình phân tích trên quy mô lớn, chúng tôi nhận thấy nhiều URL có mẫu thay đổi bố cục như sau:
Ở dưới cùng bên phải, bạn có thể thấy chỉ có một thay đổi nhỏ về bố cục trong Session Window 2 (Cửa sổ phiên 2), khiến điểm số rất thấp. Điều đó có nghĩa là điểm trung bình khá thấp. Nhưng nếu nhà phát triển khắc phục sự thay đổi nhỏ về bố cục đó thì sao? Sau đó, điểm số chỉ được tính trên Cửa sổ phiên 1, tức là điểm số của trang gần như tăng gấp đôi. Điều này thực sự sẽ làm nhà phát triển không hài lòng và không muốn cải thiện sự thay đổi bố cục chỉ vì thấy điểm số giảm xuống. Và việc xoá thay đổi bố cục nhỏ này rõ ràng sẽ tốt hơn một chút cho trải nghiệm người dùng, vì vậy, điểm số sẽ không giảm đi.
Do vấn đề về giá trị trung bình này, chúng tôi quyết định tiếp tục với các khoảng thời gian tối đa nhỏ hơn, có giới hạn. Vì vậy, trong ví dụ trên, Cửa sổ phiên 2 sẽ bị bỏ qua và chỉ tổng số lượt thay đổi bố cục trong Cửa sổ phiên 1 mới được báo cáo.
Tại sao lại là 5 giây?
Chúng tôi đã đánh giá nhiều kích thước cửa sổ và nhận thấy hai điều:
- Đối với các cửa sổ ngắn, tốc độ tải trang chậm hơn và tốc độ phản hồi chậm hơn đối với các lượt tương tác của người dùng có thể chia các lượt thay đổi bố cục thành nhiều cửa sổ và cải thiện điểm số. Chúng tôi muốn giữ cho cửa sổ đủ lớn để không làm chậm lại!
- Có một số trang liên tục thay đổi bố cục nhỏ. Ví dụ: trang điểm số thể thao thay đổi một chút theo từng lần cập nhật điểm số. Những thay đổi này gây phiền toái, nhưng không gây phiền toái hơn khi thời gian trôi qua. Vì vậy, chúng tôi muốn đảm bảo rằng cửa sổ được giới hạn cho các loại thay đổi bố cục này.
Với 2 điều này, khi so sánh các kích thước cửa sổ khác nhau trên nhiều trang web trong thế giới thực, chúng tôi kết luận rằng 5 giây là giới hạn phù hợp cho kích thước cửa sổ.
Điều này sẽ ảnh hưởng như thế nào đến điểm CLS của trang?
Vì bản cập nhật này giới hạn CLS (Mức thay đổi bố cục tích luỹ) của một trang, nên không có trang nào có điểm thấp hơn do thay đổi này.
Dựa trên phân tích của chúng tôi, 55% nguồn gốc sẽ không nhận thấy thay đổi nào về CLS ở phân vị thứ 75. Điều này là do các trang của họ hiện không có bất kỳ thay đổi bố cục nào hoặc các thay đổi bố cục mà họ có đã bị giới hạn trong một cửa sổ phiên duy nhất.
Các nguồn gốc còn lại sẽ thấy điểm số cải thiện ở phân vị thứ 75 nhờ thay đổi này. Hầu hết các trang web sẽ chỉ cải thiện một chút, nhưng khoảng 3% sẽ cải thiện điểm số từ mức "cần cải thiện" hoặc "kém" lên mức "tốt". Những trang này thường sử dụng thanh cuộn vô hạn hoặc có nhiều bản cập nhật giao diện người dùng chậm, như mô tả trong bài đăng trước đó của chúng tôi.
Làm cách nào để thử tính năng này?
Chúng tôi sẽ sớm cập nhật các công cụ để sử dụng định nghĩa chỉ số mới! Cho đến lúc đó, bạn có thể dùng thử phiên bản CLS đã cập nhật trên bất kỳ trang web nào bằng cách sử dụng ví dụ về cách triển khai JavaScript hoặc nhánh nhánh của tiện ích Chỉ số quan trọng về trang web.
Cảm ơn tất cả những người đã dành thời gian đọc bài đăng trước và gửi ý kiến phản hồi!