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