Trong vài tháng, trang web tin tức hàng đầu của Vương quốc Anh đã cải thiện CLS thêm 250% từ 0,25 lên 0,1.
Thách thức về độ ổn định về hình ảnh
Việc thay đổi bố cục có thể rất gây phiền toái. Độ ổn định về hình ảnh của Telegraph Media Group (TMG) đặc biệt quan trọng vì độc giả chủ yếu dùng các ứng dụng của chúng tôi để xem tin tức. Nếu bố cục thay đổi trong khi đọc bài viết, thì người đọc có thể sẽ mất vị trí của mình. Đây có thể là trải nghiệm gây khó chịu và mất tập trung.
Từ góc độ kỹ thuật, việc đảm bảo các trang không chuyển đổi và làm gián đoạn trình đọc có thể khó khăn, đặc biệt là khi các phần của ứng dụng được tải không đồng bộ và được thêm vào trang một cách linh động.
Tại TMG, chúng tôi có nhiều nhóm đóng góp mã phía máy khách:
- Kỹ thuật cốt lõi. Triển khai các giải pháp của bên thứ ba cho các lĩnh vực như đề xuất nội dung và nhận xét.
- Tiếp thị. Chạy thử nghiệm A/B để đánh giá cách độc giả tương tác với các tính năng hoặc thay đổi mới.
- Quảng cáo. Quản lý các yêu cầu quảng cáo và đặt giá thầu trước quảng cáo.
- Biên tập. Nhúng mã trong các bài viết như bài đăng trên Twitter hoặc video, cũng như các tiện ích tuỳ chỉnh (ví dụ: công cụ theo dõi trường hợp vi-rút corona).
Việc đảm bảo từng nhóm này không khiến bố cục của trang bị xáo trộn có thể là việc khó khăn. Bằng cách sử dụng chỉ số Điểm số tổng hợp về mức thay đổi bố cục để đo lường tần suất hoạt động của độc giả, các nhóm sẽ hiểu rõ hơn về trải nghiệm người dùng thực tế và đặt ra mục tiêu rõ ràng để cố gắng đạt được. Kết quả là CLS thứ 75 của chúng tôi cải thiện từ 0,25 lên 0,1 và bộ chứa vượt qua của chúng tôi tăng từ 57% lên 72%.
250%
Mức cải thiện CLS ở bách phân vị thứ 75
15%
Thêm nhiều người dùng có điểm CLS cao
Nơi chúng tôi bắt đầu
Khi sử dụng trang tổng quan CrUX, chúng tôi có thể xác định rằng các trang của mình đang thay đổi nhiều hơn mong muốn.
Lý tưởng nhất là chúng tôi muốn ít nhất 75% độc giả có trải nghiệm "tốt", vì vậy, chúng tôi bắt đầu xác định nguyên nhân gây ra sự bất ổn định về bố cục.
Cách chúng tôi đo lường sự thay đổi về bố cục
Chúng tôi sử dụng kết hợp Công cụ của Chrome cho nhà phát triển và WebPageTest để giúp nhận ra nguyên nhân khiến bố cục thay đổi. Trong Công cụ cho nhà phát triển, chúng tôi đã sử dụng mục Trải nghiệm của thẻ Hiệu suất để làm nổi bật các thực thể riêng lẻ của việc thay đổi bố cục và cách các bản sao đó đóng góp vào tổng điểm.
WebPageTest hữu ích làm nổi bật vị trí thay đổi bố cục xảy ra trong chế độ xem theo dòng thời gian khi chọn "Đánh dấu thay đổi bố cục" .
Sau khi xem xét từng thay đổi trên các mẫu được truy cập nhiều nhất, chúng tôi đã đưa ra một danh sách các ý tưởng để cải thiện.
Giảm mức thay đổi bố cục
Chúng tôi tập trung vào 4 khía cạnh có thể giảm sự thay đổi về bố cục: – quảng cáo – hình ảnh – tiêu đề – nhúng
Quảng cáo
Quảng cáo tải sau lần hiển thị đầu tiên thông qua JavaScript. Một số vùng chứa họ tải vào không có chiều cao dành riêng.
Mặc dù không biết chiều cao chính xác, nhưng chúng tôi có thể đặt trước không gian bằng cách sử dụng kích thước quảng cáo phổ biến nhất được tải trong vùng.
Chúng tôi đã đánh giá sai chiều cao trung bình của quảng cáo trong một số trường hợp. Đối với máy đọc sách trên máy tính bảng, khe cắm bị thu gọn.
Chúng tôi đã xem lại vị trí quảng cáo và điều chỉnh chiều cao để sử dụng kích thước phổ biến nhất.
Hình ảnh
Rất nhiều hình ảnh trên trang web được tải từng phần và dành riêng không gian cho các hình ảnh đó.
Tuy nhiên, các hình ảnh cùng dòng ở đầu các bài viết không có bất kỳ không gian nào dành riêng trên vùng chứa, cũng như không có các thuộc tính chiều rộng và chiều cao liên kết với thẻ. Điều này khiến bố cục dịch chuyển khi được tải.
Bạn chỉ cần thêm thuộc tính chiều rộng và chiều cao vào hình ảnh để đảm bảo bố cục không thay đổi.
Đầu trang
Tiêu đề nằm bên dưới nội dung trong mã đánh dấu và được đặt ở trên cùng bằng CSS. Ý tưởng ban đầu là ưu tiên tải nội dung trước khi điều hướng. Tuy nhiên, việc này khiến trang chuyển đổi trong giây lát.
Việc di chuyển tiêu đề lên đầu mã đánh dấu đã cho phép trang hiển thị mà không cần sự thay đổi này.
Nhúng
Một số nội dung nhúng thường được sử dụng có tỷ lệ khung hình được xác định. Ví dụ: video trên YouTube. Trong khi trình phát đang tải, chúng tôi lấy hình thu nhỏ từ YouTube và sử dụng hình thu nhỏ đó làm phần giữ chỗ trong khi video tải.
Đo lường tác động
Chúng tôi có thể dễ dàng đo lường tác động ở cấp tính năng bằng cách sử dụng công cụ được đề cập ở đầu bài viết. Tuy nhiên, chúng tôi muốn đo lường CLS cả ở cấp mẫu và cấp trang web. Chúng tôi sử dụng SpeedCurve để xác thực các thay đổi ở cả giai đoạn trước khi phát hành công khai và giai đoạn phát hành chính thức.
Sau đó, chúng tôi có thể xác thực kết quả trong dữ liệu rum (do mPulse cung cấp) sau khi mã này được phát hành chính thức.
Việc kiểm tra dữ liệu rum giúp chúng tôi tự tin rằng những thay đổi mà mình đang thực hiện có tác động tích cực đến độc giả.
Số liệu cuối cùng mà chúng tôi xem xét là dữ liệu rum mà Google thu thập. Điều này hiện đặc biệt quan trọng vì chúng sẽ sớm ảnh hưởng đến thứ hạng trang. Đối với những người mới bắt đầu, chúng tôi đã sử dụng Báo cáo trải nghiệm người dùng trên Chrome, cả trong dữ liệu cấp nguồn gốc hằng tháng có sẵn trên Trang tổng quan CrUX, cũng như bằng cách truy vấn BigQuery để truy xuất dữ liệu p75 trước đây. Bằng cách này, chúng tôi dễ dàng thấy rằng đối với tất cả lưu lượng truy cập được đo lường bằng CrUX, CLS phần trăm thứ 75 của chúng tôi đã tăng 250% từ 0,25 lên 0,1 và nhóm vượt qua của chúng tôi đã tăng từ 57% lên 72%.
Ngoài ra, chúng tôi có thể sử dụng API Báo cáo trải nghiệm người dùng của Chrome và tạo một số trang tổng quan nội bộ chia thành các mẫu.
Tránh lỗi hồi quy CLS
Một khía cạnh quan trọng của việc cải thiện hiệu suất là tránh sự hồi quy. Chúng tôi đã thiết lập một số ngân sách hiệu suất cơ bản cho các chỉ số chính và đưa CLS vào những chỉ số đó.
Nếu vượt quá ngân sách, thử nghiệm sẽ gửi thông báo đến một kênh Slack để chúng tôi có thể điều tra nguyên nhân. Chúng tôi cũng đã thiết lập báo cáo hằng tuần để ngay cả khi các mẫu vẫn còn trong ngân sách, chúng tôi sẽ biết được bất kỳ thay đổi nào có tác động tiêu cực.
Chúng tôi cũng đang lên kế hoạch mở rộng ngân sách để sử dụng dữ liệu rum cũng như dữ liệu tổng hợp, sử dụng mPulse để thiết lập cả cảnh báo tĩnh và khả năng là phát hiện hoạt động bất thường nhằm giúp chúng tôi nhận biết được những thay đổi bất thường.
Điều quan trọng là chúng tôi phải tiếp cận các tính năng mới dựa trên CLS. Rất nhiều thay đổi mà tôi đã đề cập là những thay đổi chúng tôi phải khắc phục sau khi phát hành cho độc giả. Độ ổn định của bố cục sẽ là một yếu tố cần cân nhắc trong thiết kế giải pháp của mọi tính năng mới về sau. Nhờ đó, chúng ta có thể tránh những thay đổi không mong muốn về bố cục ngay từ đầu.
Kết luận
Những cải tiến mà chúng tôi đã thực hiện cho đến thời điểm này khá dễ triển khai và đã tạo ra tác động đáng kể. Rất nhiều thay đổi mà tôi đã nêu trong bài viết này không mất nhiều thời gian để thực hiện và đã được áp dụng cho mọi mẫu được dùng phổ biến nhất. Điều này có nghĩa là các thay đổi đó đã tạo ra tác động tích cực trên diện rộng cho độc giả.
Trang web vẫn còn một số điểm cần cải thiện. Chúng tôi đang tìm cách để có thể cải thiện thêm mức độ cải thiện đối với logic phía máy chủ phía máy khách, nhờ đó giúp cải thiện CLS nhiều hơn nữa. Chúng tôi sẽ tiếp tục theo dõi và giám sát các chỉ số của mình để không ngừng cải thiện số liệu và cung cấp cho độc giả trải nghiệm người dùng tốt nhất có thể.