Bằng cách sử dụng các công cụ theo dõi người dùng thực tế và tập trung vào việc cải thiện Chỉ số quan trọng chính của trang web trong quá trình tái cấu trúc ứng dụng, họ cũng cải thiện CLS thêm 72% cũng như độ phản hồi của ứng dụng.
Agrofy là một trang web thương mại trực tuyến dành cho thị trường nông nghiệp kinh doanh của Mỹ La-tinh. Các trang web này giúp kết nối người mua và người bán máy nông nghiệp, đất đai, thiết bị và dịch vụ tài chính. Trong quý 3 năm 2020, một nhóm phát triển gồm 4 người tại Agrofy đã dành một tháng để tối ưu hoá trang web của họ vì họ giả định rằng việc cải thiện hiệu suất sẽ giúp giảm tỷ lệ thoát. Họ tập trung vào việc cải thiện LCP, một trong Các chỉ số quan trọng chính của trang web. Những hoạt động tối ưu hoá hiệu suất này đã giúp cải thiện LCP 70%, tương quan với việc giảm 76% số lượt thoát trong khi tải (từ 3,8% xuống còn 0,9%).
70%
LCP thấp hơn
76%
Giảm tỷ lệ bỏ ngang khi tải
Vấn đề
Trong khi nghiên cứu các chỉ số kinh doanh, nhóm phát triển của Agrofy nhận thấy rằng tỷ lệ thoát của họ có vẻ cao hơn điểm chuẩn của ngành. Nợ kỹ thuật cũng đang tăng lên trong cơ sở mã của trang web.
Giải pháp
Nhóm Agrofy đã thuyết phục các nhà điều hành và nhận được sự đồng thuận về:
- Di chuyển từ một khung cũ, không dùng nữa sang một khung mới, được hỗ trợ tích cực.
- Tối ưu hoá hiệu suất tải của cơ sở mã mới.
Quá trình di chuyển mất 2 tháng. Ngoài nhóm phát triển gồm 4 người được đề cập ở trên, quá trình di chuyển này cũng có sự tham gia của các chuyên gia sản phẩm và trải nghiệm người dùng cũng như một kiến trúc sư phần mềm. Dự án tối ưu hoá này đã mất 1 tháng để đội ngũ phát triển gồm 4 người hoàn thành. Họ tập trung vào LCP, CLS (một chỉ số khác của Core Web Vitals) và FCP. Các hoạt động tối ưu hoá cụ thể bao gồm:
- Tải từng phần tất cả các phần tử không hiển thị bằng Intersection Observer API.
- Phân phối tài nguyên tĩnh nhanh hơn bằng mạng phân phối nội dung.
- Tải từng phần hình ảnh bằng
loading="lazy". - Kết xuất phía máy chủ nội dung đường dẫn kết xuất quan trọng.
- Tải trước và kết nối trước các tài nguyên quan trọng để giảm thiểu thời gian bắt tay.
- Sử dụng các công cụ theo dõi người dùng thực (RUM) để xác định những trang chi tiết sản phẩm đang trải qua nhiều thay đổi về bố cục, sau đó điều chỉnh cấu trúc cơ sở mã.
Hãy xem bài đăng trên blog của nhóm kỹ thuật Agrofy để biết thêm thông tin kỹ thuật.
Sau khi bật cơ sở mã mới cho 20% lưu lượng truy cập, họ đã ra mắt trang web mới cho tất cả khách truy cập vào đầu tháng 9 năm 2020.
Kết quả
Các hoạt động tối ưu hoá của nhóm phát triển đã giúp cải thiện đáng kể nhiều chỉ số:
- LCP cải thiện 70%.
- CLS cải thiện 72%.
- Việc chặn các yêu cầu JS đã giảm 100% và chặn các yêu cầu CSS đã giảm 80%.
- Nhiệm vụ dài giảm 72%.
- Thời điểm người dùng có thể bắt đầu tương tác (5) cải thiện 25%.
Trong cùng khung thời gian, dữ liệu theo dõi người dùng thực (còn gọi là dữ liệu thực địa) cho thấy tỷ lệ bỏ ngang tải trên trang chi tiết sản phẩm đã giảm 76%, từ 3,8% xuống 0,9%:
