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