Bằng cách sử dụng các công cụ giám sát người dùng thực và tập trung cải thiện Các chỉ số quan trọng về trang web trong quá trình tái cấu trúc ứng dụng, họ cũng đã cải thiện 72% CLS (Điểm số tổng hợp về mức thay đổi bố cục) cũng như khả năng 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 kinh doanh nông sản ở Mỹ Latinh. Chúng kết hợp người mua và người bán máy móc, đất đai, thiết bị và dịch vụ tài chính trong nông trại. 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 vì họ giả thuyết rằng hiệu suất được cải thiện sẽ giúp giảm tỷ lệ thoát. Họ đặc biệt tập trung vào việc cải thiện LCP, một trong những 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 LCP cải thiện 70%, tương ứng với việc giảm 76% tỷ lệ bỏ ngang trong khi tải (từ 3,8% xuống 0,9%).
70%
LCP thấp hơn
76%
Giảm số lượt bỏ qua khi tải
Vấn đề
Khi nghiên cứu các chỉ số kinh doanh, một nhóm phát triển của Agrofy nhận thấy rằng tỷ lệ thoát có vẻ cao hơn điểm chuẩn ngành. Nợ kỹ thuật cũng tăng lên trong cơ sở mã của trang web.
Giải pháp
Nhóm Agrofy đã thuyết trình giám đốc điều hành của họ và mời gọi:
- Di chuyển từ một khung cũ và không còn dùng nữa sang một khung mới hơn và đượ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 kéo dài 2 tháng. Ngoài nhóm phát triển 4 người đã đề cập trước đó, quá trình di chuyển này còn có sự tham gia của các chuyên gia về 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 cho nhóm phát triển 4 người. Họ tập trung vào LCP, CLS (một chỉ số Chỉ số quan trọng chính khác về trang web) và FCP. Các chế độ 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ủ của 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 tế (rum) để xác định những trang chi tiết sản phẩm có nhiều thay đổi về bố cục, sau đó điều chỉnh cấu trúc của cơ sở mã.
Hãy xem bài đăng trên blog về kỹ thuật của Agrofy để biết thêm thông tin kỹ thuật.
Sau khi kích hoạt cơ sở mã mới trên 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 đã dẫn đến những điểm cải thiện có thể đo lường được về nhiều chỉ số:
- LCP tăng 70%.
- CLS tăng 72%.
- Việc chặn yêu cầu JS đã giảm 100% và chặn yêu cầu CSS đến 80%.
- Số tác vụ dài giảm 72%.
- Trạng thái Thời gian chờ CPU đầu tiên tăng 25%.
Trong cùng một 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 tế) 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 còn 0,9%:
