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