Tính năng tối ưu hoá CLS giúp Yahoo! Nhật Bản tăng trưởng như thế nào! tăng 15% lượt xem trang trong mỗi phiên

Việc tối ưu hoá CLS thêm 0,2 giúp số lượt xem trang mỗi phiên tăng 15%, thời lượng phiên dài hơn 13% và tỷ lệ thoát giảm 1,72 điểm phần trăm.

Tomoki Kiraku

Milica Mihajlija

Shunya Shishido

Trung tâm trợ giúp Yahoo! JAPAN là một trong những công ty truyền thông lớn nhất tại Nhật Bản, cung cấp hơn 79 tỷ lượt xem trang mỗi tháng. Nền tảng tin tức của họ, Yahoo! JAPAN News có hơn 22 tỷ lượt xem trang mỗi tháng và có một nhóm kỹ thuật chuyên cải thiện trải nghiệm người dùng.

Bằng cách liên tục theo dõi Các chỉ số quan trọng về trang web, họ đã xác định được điểm Điểm số tổng hợp về mức thay đổi bố cục (CLS) của trang web với số lượt xem trang trên mỗi phiên tăng 15% và thời lượng phiên tăng 13%.

0,2

Mức độ cải thiện CLS (Điểm số tổng hợp về mức thay đổi bố cục)

15,1_%

Tăng số lượt xem trang trên mỗi phiên

13,3_%

Thời lượng phiên dài hơn

Lưu ý: Điểm số tổng hợp về mức thay đổi bố cục đo lường mức độ ổn định về mặt hình ảnh của một trang web. Dữ liệu này giúp định lượng tần suất người dùng gặp phải những thay đổi ngoài dự kiến về bố cục.

Nội dung trang di chuyển xung quanh đột ngột thường gây ra lượt nhấp không chủ ý, sự mất phương hướng trên trang và cuối cùng là sự thất vọng của người dùng. Người dùng bực bội có xu hướng không ở lại lâu. Để làm hài lòng người dùng, bố cục trang phải ổn định trong toàn bộ vòng đời hành trình của người dùng. Đối với Yahoo! NHẬT BẢN Tin tức cải tiến này đã tác động tích cực đáng kể đến các chỉ số tương tác quan trọng của doanh nghiệp.

Để biết chi tiết kỹ thuật về cách họ cải thiện CLS, hãy đọc tài liệu Yahoo! Bài đăng của nhóm kỹ thuật của JAPAN News.

Xác định vấn đề

Việc theo dõi Các chỉ số quan trọng về trang web (bao gồm cả CLS) đóng vai trò quan trọng trong việc phát hiện các vấn đề và xác định nguồn gốc của các vấn đề đó. Tại Yahoo! JAPAN News, Search Console cung cấp thông tin tổng quan đầy đủ về các nhóm trang có vấn đề về hiệu suất và Lighthouse giúp xác định các cơ hội để cải thiện trải nghiệm trên trang. Khi dùng những công cụ này, họ phát hiện ra rằng trang chi tiết về bài viết có CLS kém.

Báo cáo Các chỉ số quan trọng về trang web của Google Search Console.

Bài kiểm tra "Tránh thay đổi bố cục lớn" của Lighthouse cho biết những yếu tố đang đóng góp vào điểm CLS và mức độ đóng góp.

Điều quan trọng bạn cần lưu ý là phần tích luỹ của Thay đổi bố cục tích luỹ – điểm số được ghi lại trong toàn bộ vòng đời của trang. Trong thực tế, điểm số có thể bao gồm các thay đổi xảy ra do tương tác của người dùng, chẳng hạn như cuộn trang hoặc nhấn vào một nút. Để thu thập điểm CLS từ dữ liệu thực tế, đội ngũ này đã tích hợp tính năng báo cáo thư viện JavaScript web-vitals.

Lưu ý: Trong chiến lược theo dõi hiệu suất, họ cũng đang xây dựng một công cụ nội bộ với Lighthouse CI để liên tục kiểm tra hiệu suất giữa các doanh nghiệp trong công ty.

Nhóm này đã sử dụng Công cụ của Chrome cho nhà phát triển để xác định những phần tử đang thay đổi bố cục trên trang. Khu vực thay đổi bố cục trong Công cụ cho nhà phát triển trực quan hoá các phần tử góp phần vào CLS bằng cách làm nổi bật chúng bằng hình chữ nhật màu xanh dương mỗi khi có sự thay đổi về bố cục.

Minh hoạ việc thay đổi bố cục.

Họ phát hiện ra rằng sự thay đổi bố cục xảy ra sau khi hình ảnh chính ở đầu bài viết được tải cho khung hiển thị đầu tiên.

Thay đổi bố cục trên trang chi tiết của bài viết.

Trong ví dụ trên, khi hình ảnh tải xong, văn bản sẽ được đẩy xuống (sự thay đổi vị trí được biểu thị bằng đường màu đỏ).

Cải thiện CLS cho hình ảnh

Đối với hình ảnh có kích thước cố định, bạn có thể ngăn việc thay đổi bố cục bằng cách chỉ định thuộc tính width và height trong phần tử img và sử dụng thuộc tính CSS aspect-ratio có trong các trình duyệt hiện đại. Tuy nhiên, Yahoo! JAPAN News không chỉ cần hỗ trợ các trình duyệt hiện đại mà còn cả các trình duyệt được cài đặt trong các hệ điều hành tương đối cũ như iOS 9.

Họ sử dụng Hộp tỷ lệ khung hình – một phương thức sử dụng thẻ đánh dấu để đặt trước không gian trên trang trước khi tải hình ảnh. Phương thức này đòi hỏi bạn phải biết trước tỷ lệ khung hình của hình ảnh mà chúng có thể lấy được từ API phụ trợ.

Trái: không gian trống dành riêng cho hình ảnh ở đầu trang; bên phải: hình ảnh chính được tải trong không gian dành riêng mà không thay đổi bố cục.

Kết quả

Số lượng URL có hiệu suất kém trong Search Console đã giảm 98% và CLS trong dữ liệu phòng thí nghiệm đã giảm từ khoảng 0,2 xuống 0. Quan trọng hơn, có một số điểm cải thiện tương ứng về các chỉ số kinh doanh.

Search Console sau khi cải thiện.

Lưu ý: Search Console không phản ánh các điểm cải tiến theo thời gian thực.

Khi Yahoo! JAPAN News so sánh các chỉ số tương tác của người dùng trước và sau khi tối ưu hoá CLS, họ nhận thấy nhiều điểm cải thiện:

15,1_%

Tăng số lượt xem trang trên mỗi phiên

13,3_%

Thời lượng phiên dài hơn

1,72_%*

Tỷ lệ thoát thấp hơn (*phần trăm điểm)

Bằng cách cải thiện CLS và các chỉ số quan trọng khác về trang web, Yahoo! JAPAN News cũng có nhãn"Trang nhanh" trong trình đơn theo bối cảnh của Chrome Android.

Nhãn "Trang nhanh" trong Chrome trên Android.

Việc thay đổi bố cục gây khó chịu và ngăn người dùng đọc thêm trang. Tuy nhiên, bạn có thể cải thiện điều này bằng cách sử dụng các công cụ thích hợp, xác định vấn đề và áp dụng các phương pháp hay nhất. Việc cải thiện CLS là một cơ hội để cải thiện doanh nghiệp của bạn.

Để biết thêm thông tin, hãy đọc tài liệu Yahoo! Bài đăng của nhóm kỹ thuật JAPAN.