Bằng cách đo lường Các chỉ số quan trọng về trang web của người dùng thực tế, Rakuten 24 cũng nhận thấy rằng Thời gian hiển thị nội dung lớn nhất (LCP) tốt có thể giúp tăng tỷ lệ chuyển đổi thêm 61,13%.
Rakuten 24 là một cửa hàng trực tuyến cộng tác với cả nhà sản xuất hàng tiêu dùng nội địa và đa quốc gia để cung cấp nhiều mặt hàng nhu yếu phẩm hằng ngày, bao gồm chăm sóc sức khỏe, đồ uống, đồ dùng cho thú cưng, sản phẩm dành cho trẻ em và nhiều mặt hàng khác. Cửa hàng này được cung cấp bởi Rakuten Group, Inc.—một công ty hàng đầu thế giới về dịch vụ Internet và là một trong những cửa hàng có hiệu suất tốt nhất trên nền tảng thị trường kỹ thuật số của họ tại Nhật Bản.
Hiểu được tác động của hiệu suất web đối với trải nghiệm người dùng, nhóm Rakuten 24 đã liên tục đo lường, tối ưu hóa và theo dõi Các chỉ số quan trọng về trang web cũng như các chỉ số khác.
Kết quả là hơn 75% người dùng đang có Thời gian hiển thị nội dung lớn nhất (LCP) tốt, Độ trễ đầu vào đầu tiên (FID) và Thời gian hiển thị nội dung đầu tiên (FCP). Tuy nhiên, chúng tôi vẫn đang cải thiện Điểm số tổng hợp về mức thay đổi bố cục (CLS).
Sau khi phân tích dữ liệu trên trang chủ, Rakuten 24 nhận thấy rằng điểm LCP cao có thể dẫn đến:
- Tăng tỷ lệ chuyển đổi thêm tới 61,13%.
- 26,09% doanh thu trên mỗi khách truy cập.
- 11,26% tính theo giá trị trung bình của đơn đặt hàng.
- Điểm FID tốt có thể giúp tăng tỷ lệ chuyển đổi lên đến 55,88%.
Để xác định mối liên hệ chặt chẽ hơn giữa Các chỉ số quan trọng về trang web và các chỉ số kinh doanh, Rakuten 24 cũng đã chạy thử nghiệm A/B tập trung vào việc tối ưu hoá Các chỉ số quan trọng về trang web và các chỉ số có liên quan. Nhờ đó, Rakuten 24 đã nhận thấy sự cải thiện về:
- 53,37% doanh thu trên mỗi khách truy cập.
- 33,13%.
- 15,20% tính theo giá trị trung bình của đơn đặt hàng.
- 9,99% thời gian sử dụng trung bình.
- Tỷ lệ thoát giảm 35,12%.
Làm nổi bật cơ hội
Mặc dù tối ưu hoá hiệu suất web là một khoản đầu tư thông minh để cải thiện trải nghiệm người dùng và tăng trưởng kinh doanh, nhưng nhóm Rakuten 24 hiểu được mức độ khó khăn của việc thuyết phục các bên liên quan áp dụng Các chỉ số quan trọng về trang web và tập trung vào hiệu suất web. Họ tin rằng việc cho các bên liên quan biết chính xác phương thức tối ưu hoá hiệu suất Lợi tức đầu tư (ROI) có thể mang lại là cách tốt nhất để giúp họ hợp tác.
Là một dịch vụ tương đối mới và độc lập, Rakuten 24 đã sử dụng lợi thế của sự linh hoạt để đương đầu thử thách. Họ tin rằng kết quả của nghiên cứu điển hình sẽ giúp họ đưa ra nhiều quyết định dựa trên dữ liệu hơn trong tương lai, cũng như giúp các nhà phát triển khác đo lường tác động của công việc và thuyết phục các bên liên quan rằng việc cải thiện hiệu suất là đáng để đầu tư. Hãy tìm hiểu cách họ thực hiện điều đó trong bài đăng này.
Tối ưu hoá JavaScript và tài nguyên
- Loại bỏ các tài nguyên chặn hiển thị.
- Phân tách mã và sử dụng
import()động. - Chia tất cả nội dung thành các phần riêng biệt và tải từng phần dưới màn hình đầu tiên các tệp HTML.
- Thực thi và tải JavaScript theo yêu cầu.
- Xác định các tài nguyên JavaScript chậm và tối ưu hoá quá trình tải bằng cách sử dụng thuộc tính không đồng bộ trên thẻ
<script>và thiết lập các kết nối sớm đến những nguồn gốc quan trọng (Gợi ý về tài nguyên nhưdns-prefetch,preconnectvàpreload). - Xoá mã không dùng đến, sau đó rút gọn và nén mã.
- Sử dụng CDN.
- Kiểm soát việc lưu vào bộ nhớ đệm bằng Service Worker với Workbox.
Tối ưu hóa hình ảnh
- Tải từng phần hình ảnh dưới màn hình đầu tiên.
- Tối ưu hoá hình ảnh bằng CDN, phân phối hình ảnh có kích thước phù hợp, nén hình ảnh và sử dụng định dạng hình ảnh phù hợp cho công việc (WebP, SVG, Web Fonts).
Tối ưu hoá CLS (Điểm số tổng hợp về mức thay đổi bố cục)
- Sử dụng CSS
aspect-ratiođể đặt trước không gian cần thiết cho hình ảnh trong khi hình ảnh đang tải. - Sử dụng CSS
min-heightđể giảm thiểu việc thay đổi bố cục trong khi các phần tử tải từng phần.
Đo lường hiệu suất
Ngoài việc sử dụng PageSpeed Insights để kiểm tra trang web của họ, đội ngũ này muốn tìm ra một cách tốt hơn để biết những gì người dùng đang thực sự trải nghiệm trong lĩnh vực đó. Do đó, Rakuten 24 quyết định sử dụng thư viện JavaScript quan trọng của web để đo lường Các chỉ số quan trọng về trang web và các chỉ số khác trong trường, đồng thời gửi dữ liệu đến công cụ phân tích nội bộ.
Phân tích hiệu suất
Nhóm đã phân tích dữ liệu thực địa thu thập được để xác định xem có mối tương quan nào giữa Các chỉ số quan trọng về trang web và các chỉ số kinh doanh chính hay không. Họ phát hiện ra rằng những người dùng đã chuyển đổi thường có LCP cao hơn so với những người dùng không chuyển đổi.
Dữ liệu thu thập được cũng cho thấy rằng:
- LCP tốt có thể giúp tăng tỷ lệ chuyển đổi thêm tới 61,13%, doanh thu trên mỗi khách truy cập tăng 26,09% và giá trị trung bình của đơn đặt hàng là 11,26%.
- FID tốt có thể giúp tăng tỷ lệ chuyển đổi thêm tới 55,88% so với dữ liệu trung bình chung.
Giám sát hiệu suất
Nhóm đã xây dựng một trang tổng quan theo dõi hiệu suất bằng cách sử dụng dữ liệu thu thập được tại hiện trường và công cụ thông tin kinh doanh. Điều này rất quan trọng để theo dõi tiến trình và ngăn chặn sự hồi quy.
Thử nghiệm A/B
Tin rằng thử nghiệm A/B là cách hiệu quả để đo lường tác động của việc tối ưu hoá hiệu suất đối với hoạt động kinh doanh, nên họ đã tối ưu hoá một trong các trang đích của họ cho Các chỉ số quan trọng về trang web, sau đó so sánh phiên bản được tối ưu hoá với trang gốc thông qua thử nghiệm A/B trong một tháng. Họ chọn một trang đích có lưu lượng truy cập và lượt chuyển đổi đáng kể để thử nghiệm có thể đạt được kết quả có ý nghĩa. Trong thời gian thử nghiệm, 50% lưu lượng truy cập được gửi đến trang đích được tối ưu hóa (phiên bản A) và 50% được gửi đến trang gốc (phiên bản B). Điểm khác biệt duy nhất giữa phiên bản A và phiên bản B là phiên bản A được tối ưu hoá cho Các chỉ số quan trọng về trang web và không có sự khác biệt nào khác về chức năng hoặc hình ảnh.
Phiên bản A được tối ưu hoá đã tải xong 0,4 giây trước đó trong thử nghiệm tải trên thiết bị di động và cho thấy không có sự thay đổi bố cục đáng kể. Trên thực tế, CLS của phiên bản A đã cải thiện 92,72% so với phiên bản B. Các điểm số Các chỉ số quan trọng khác về trang web cũng được cải thiện: FID tăng 7,95%, FCP tăng 8,45% và TTFB tăng 18,03%.
So sánh phiên bản A được tối ưu hoá với phiên bản B không được tối ưu hoá, Rakuten 24 nhận thấy rằng phiên bản A mang lại:
- Doanh thu trên mỗi khách truy cập tăng 53,37%.
- Tỷ lệ chuyển đổi tăng 33,13%.
- Giá trị trung bình của đơn đặt hàng tăng 15,20%.
- Thời gian sử dụng trung bình tăng 9,99%.
- giảm 35,12% tỷ lệ thoát.
Kết luận
Việc tối ưu hoá hiệu suất web tuy khó khăn nhưng mang lại nhiều lợi ích. Bằng cách áp dụng cách tiếp cận dựa trên dữ liệu, Rakuten 24 đã thành công trong việc mang lại trải nghiệm tốt hơn cho người dùng, đồng thời đo lường được mức tác động tích cực đến hoạt động kinh doanh của họ. Hiểu rằng đây chỉ là một phần của hành trình chứ không phải là điểm đến, họ sẽ tiếp tục cải thiện trang web của mình để cung cấp cho người mua sắm trực tuyến nhiều trải nghiệm thú vị hơn.
Việc tối ưu hoá đòi hỏi sự nỗ lực chung và các nhà phát triển không phải cô đơn trên hành trình này. Bằng việc chia sẻ những khó khăn và thành tích, Rakuten 24 hy vọng rằng nhiều nhà phát triển hơn có thể sử dụng dữ liệu Các chỉ số quan trọng về trang web để cùng nhau hiểu rõ hơn với các bên liên quan, từ đó cùng nhau hợp tác nhằm mang lại trải nghiệm chất lượng cao cho người dùng và thúc đẩy tăng trưởng kinh doanh.