Nhóm web tại Zalando nhận thấy rằng việc tích hợp Lighthouse CI đã giúp họ có được một phương pháp chủ động để cải thiện hiệu suất, với các bước kiểm tra trạng thái tự động có thể so sánh thay đổi hiện tại với nhánh chính để ngăn chặn sự hồi quy về hiệu suất.
Với hơn 35 triệu khách hàng đang hoạt động, Zalando là nền tảng thời trang trực tuyến hàng đầu ở Châu Âu. Trong bài đăng này, chúng tôi giải thích lý do chúng tôi bắt đầu sử dụng Lighthouse CI, tính dễ triển khai và những lợi ích đối với nhóm của chúng tôi.
Tại Zalando, chúng tôi hiểu rõ mối quan hệ giữa hiệu suất trang web và doanh thu. Trước đây, chúng tôi đã thử nghiệm mức độ ảnh hưởng của việc tăng thời gian tải trên các trang Danh mục một cách giả tạo đến tỷ lệ thoát, tỷ lệ chuyển đổi và doanh thu trên mỗi người dùng. Kết quả rất rõ ràng. Việc cải thiện thời gian tải trang thêm 100 mili giây đã giúp tăng mức độ tương tác với tỷ lệ thoát thấp hơn và doanh thu tăng thêm 0,7% mỗi phiên.
100ms
Cải thiện thời gian tải trang
0,7%
Tăng doanh thu trên mỗi phiên
Không phải lúc nào sự ủng hộ của công ty cũng dẫn đến hiệu suất
Mặc dù mọi người trong công ty đều đồng ý về hiệu suất, nhưng nếu không đặt hiệu suất làm tiêu chí phân phối sản phẩm, thì hiệu suất có thể dễ dàng bị bỏ qua. Khi thiết kế lại trang web Zalando vào năm 2020, chúng tôi tập trung vào việc cung cấp các tính năng mới, đồng thời duy trì trải nghiệm người dùng tuyệt vời và làm mới trang web bằng phông chữ tuỳ chỉnh và màu sắc sống động hơn. Tuy nhiên, khi trang web và ứng dụng được thiết kế lại đã sẵn sàng để phát hành, các chỉ số của người dùng sớm cho thấy rằng phiên bản mới chậm hơn. Chỉ số Hiển thị nội dung đầu tiên chậm hơn tới 53% và Thời gian tương tác được đo lường chậm hơn tới 59%.
Mạng tại Zalando
Trang web Zalando do một nhóm cốt lõi phát triển khung, với hơn 15 nhóm tính năng đóng góp các dịch vụ vi mô giao diện người dùng. Trong khi hỗ trợ bản phát hành mới, chúng tôi cũng đã chuyển đổi một phần trang web sang cấu trúc tập trung hơn.
Cấu trúc trước đây có tên là Mosaic bao gồm một cách để đo lường hiệu suất trang bằng các chỉ số nội bộ. Tuy nhiên, rất khó để so sánh các chỉ số hiệu suất trước khi triển khai cho người dùng thực tế vì chúng tôi thiếu các công cụ giám sát hiệu suất nội bộ trong phòng thí nghiệm. Mặc dù triển khai hằng ngày, nhưng nhà phát triển vẫn phải chờ khoảng một ngày để nhận được phản hồi về việc cải thiện hiệu suất.
Web Vitals và Lighthouse sẽ giúp bạn giải quyết vấn đề này
Chúng tôi không hoàn toàn hài lòng với các chỉ số nội bộ vì chúng không thích ứng tốt với chế độ thiết lập mới. Quan trọng hơn, các chiến dịch này không tập trung vào trải nghiệm khách hàng. Chúng tôi đã chuyển sang Các chỉ số quan trọng về trang web vì các chỉ số này cung cấp một nhóm chỉ số ngắn gọn nhưng toàn diện và tập trung vào người dùng.
Để cải thiện hiệu suất trước khi phát hành, chúng tôi cần tạo một môi trường thử nghiệm thích hợp. Điều này đã cung cấp các phép đo có thể tái tạo, ngoài các điều kiện kiểm thử đại diện cho phân vị thứ 90 của dữ liệu thực địa. Giờ đây, các kỹ sư làm việc về việc cải thiện hiệu suất đã biết nên tập trung vào đâu để tạo ra tác động lớn nhất. Chúng tôi đã sử dụng báo cáo kiểm tra Lighthouse cục bộ. Vì vậy, bước lặp lại đầu tiên của chúng tôi là phát triển một dịch vụ dựa trên mô-đun nút Lighthouse, nơi có thể kiểm thử các thay đổi từ môi trường thử nghiệm. Điều này đã mang lại cho chúng tôi một vòng phản hồi hiệu suất đáng tin cậy trong khoảng một giờ, giúp chúng tôi nâng hiệu suất lên ngang bằng và cứu bản phát hành!
Đưa ra ý kiến phản hồi về hiệu suất cho nhà phát triển về yêu cầu kéo
Chúng tôi không muốn dừng lại ở đó, vì chúng tôi muốn tận dụng cơ hội này để không chỉ phản ứng với hiệu suất mà còn chủ động. Việc chuyển từ mô-đun nút Lighthouse sang máy chủ Lighthouse CI (LHCI) không quá khó. Chúng tôi đã chọn giải pháp tự lưu trữ để tích hợp tốt hơn với các dịch vụ hiện có của công ty. Ứng dụng máy chủ LHCI của chúng tôi được tạo dưới dạng hình ảnh Docker, sau đó được triển khai cho cụm Kubernetes cùng với cơ sở dữ liệu PostgreSQL và báo cáo cho GitHub của chúng tôi.
Khung của chúng tôi đã cung cấp một số ý kiến phản hồi về hiệu suất cho nhà phát triển – kích thước gói thành phần được so sánh với các giá trị ngưỡng trên mỗi thay đổi. Giờ đây, chúng ta có thể báo cáo các chỉ số Lighthouse dưới dạng quy trình kiểm tra trạng thái GitHub. Những lỗi này khiến quy trình CI không thành công nếu không đáp ứng các ngưỡng hiệu suất, kèm theo đường liên kết đến báo cáo chi tiết của Lighthouse như trong các hình ảnh sau.
Mở rộng phạm vi áp dụng hiệu suất
Chúng tôi bắt đầu bằng một phương pháp rất thực tế. Hiện tại, Lighthouse chỉ chạy trên hai trang quan trọng nhất của chúng tôi: trang chủ và trang chi tiết sản phẩm. May mắn thay, Lighthouse CI giúp bạn dễ dàng mở rộng cấu hình chạy. Các nhóm tính năng làm việc trên các trang cụ thể của trang web của chúng tôi có thể thiết lập mẫu URL và câu nhận định khớp. Với việc này, chúng tôi khá tự tin rằng mức độ phù hợp về hiệu suất sẽ tăng lên.
Giờ đây, chúng tôi tự tin hơn nhiều khi xây dựng các bản phát hành lớn hơn, đồng thời nhà phát triển có thể tận hưởng vòng phản hồi ngắn hơn nhiều về hiệu suất của mã.