Câu chuyện về một công ty khởi nghiệp xây dựng trải nghiệm web tốt nhất trong lớp.
Giới thiệu
Được thành lập vào năm 2015, Truebil là một trang web thương mại trực tuyến của Ấn Độ chuyên bán xe đã qua sử dụng được chứng nhận 100%. Với hơn 1, 4 triệu người dùng hoạt động hằng tháng, đây là một giải pháp một cửa bao gồm dịch vụ chuyển quyền sở hữu, bảo hiểm, cho vay và bảo hành dịch vụ. Khách hàng tiềm năng có thể xem từng trang sản phẩm có hình ảnh và báo cáo kiểm tra chi tiết, đồng thời nhận được thông tin đánh giá xe thông qua các tính năng "So sánh" và "Truescore" của trang web. Truebil tạo sự khác biệt cho sản phẩm của mình bằng các tính năng phong phú, bao gồm cả đề xuất dành riêng cho bạn dựa trên công nghệ học máy, tính năng thêm vào danh sách yêu thích, tính năng chia sẻ xe và nhiều tính năng khác.
Thách thức
Truebil là một công ty khởi nghiệp tinh gọn với các giao dịch có tần suất thấp nhưng giá trị cao. Vì vậy, điều quan trọng là phải chọn đúng nền tảng để ưu tiên và đầu tư.
Truebil xác định thiết bị di động là nền tảng mục tiêu và họ chọn web cho ứng dụng đầu tiên của mình, Truebil Lite, vì web dễ được phát hiện và ít gây phiền toái. Công nghệ web giúp giảm chi phí phát triển, giảm mức sử dụng dữ liệu và bộ nhớ, đồng thời giảm đáng kể chi phí thu nạp khách hàng so với việc xây dựng ứng dụng Android/iOS. Và bằng cách xây dựng một ứng dụng web tiến bộ (PWA), Truebil có thể tận dụng tất cả các lợi ích của web và lợi ích của iOS/Android.
Giải pháp
Một nhóm nội bộ đã mất 4 tháng để phát triển Truebil Lite bằng React, Django và Preact (để di chuyển sang phiên bản chính thức). Họ đã đặt ra các nguyên tắc hướng dẫn rõ ràng cho ứng dụng web dựa trên mục tiêu của người dùng. Trải nghiệm phải:
- Nhanh trong lần tải đầu tiên và các lần điều hướng tiếp theo,
- Đáng tin cậy, độc lập với các quy tắc ràng buộc về mạng hoặc thiết bị của người dùng và
- Thu hút, đặc biệt là đối với màn hình nhỏ trên thiết bị di động, để người dùng muốn quay lại.
Tối ưu hoá để tải nhanh và điều hướng nhanh trong lần đầu tiên
Bằng cách sử dụng Lighthouse để hướng dẫn tối ưu hoá hiệu suất, nhóm đã áp dụng văn hoá ưu tiên hiệu suất trong khi triển khai các tính năng mới. Truebil đã có thể cải thiện đáng kể trải nghiệm người dùng bằng cách ưu tiên các chỉ số Hiển thị nội dung đầu tiên và Thời gian phản hồi (TTI), đồng thời tối ưu hoá để tải nhanh lần đầu, lượt truy cập lại và điều hướng mượt mà. Nhóm này đã đạt được những kết quả đó bằng cách đặt ngân sách hiệu suất và sử dụng nhiều kỹ thuật để đạt được những kết quả đó.
Đặt ngân sách hiệu suất
Với tư duy ưu tiên hiệu suất, nhóm Truebil đã chọn thiết kế trải nghiệm của họ dưới dạng một ứng dụng một trang với tính năng kết xuất phía máy chủ cho lần tải đầu tiên và kết xuất phía ứng dụng cho các lần tải tiếp theo. Việc duy trì hiệu suất của các ứng dụng web có tính năng kết xuất phía máy khách có thể gặp khó khăn, vì vậy, Truebil đã đặt ngân sách hiệu suất rất nghiêm ngặt để đảm bảo các ứng dụng này không bị ảnh hưởng đến tốc độ, đặc biệt là khi thêm nhiều tính năng hơn.
Nhóm đã đặt ngân sách nghiêm ngặt dựa trên mốc thời gian cho TTI với mục tiêu giữ cho TTI dưới 5 giây. Để đạt được mục tiêu đó, họ đã đảm bảo theo cách thủ công rằng không có bản dựng nào vượt quá kích thước gói JavaScript 250 KB, liên tục kiểm tra kích thước hình ảnh và liên tục theo dõi điểm hiệu suất Lighthouse của ứng dụng.
Tối ưu hoá gói JavaScript
Nhóm đã bắt đầu bằng những kiến thức cơ bản bằng cách sử dụng mẫu PRPL để lưu vào bộ nhớ đệm trước và tối ưu hoá tải trọng JavaScript, đồng thời chuyển sang HTTP/2 để phân phát các gói JavaScript quan trọng.
Để tải lười các tài nguyên không quan trọng, họ đã sử dụng các thành phần tải lười cấp khung để tải các mảnh bên dưới màn hình.
Để loại bỏ mọi nút thắt cổ chai của gói JavaScript, nhóm đã giảm tải trọng thông qua tính năng phân tách mã. Họ đã sử dụng tính năng phân đoạn dựa trên thành phần và tuyến đường để giảm kích thước gói chính và cải thiện thời gian tải thêm 44%, với TTI giảm từ 6 giây xuống còn khoảng 5 giây và Thời gian vẽ nội dung có ý nghĩa đầu tiên (FMP) từ 4,1 giây xuống còn 3,6 giây.
CSS quan trọng cùng dòng
Để cải thiện thêm FMP, nhóm đã sử dụng Lighthouse để tìm cơ hội và xác thực tác động của việc tối ưu hoá hiệu suất. Lighthouse cho biết việc giảm CSS chặn kết xuất sẽ có tác động lớn nhất, vì vậy, Truebil đã nội tuyến tất cả CSS quan trọng và trì hoãn CSS không quan trọng. Kỹ thuật này giảm FMP khoảng 2 giây.
Tránh nhiều chuyến đi và về tốn kém đến bất kỳ nguồn gốc nào
Để giảm thiểu hao tổn từ DNS và TLS, Truebil đã sử dụng <link rel="preconnect"> và <link rel="dns-prefetch">. Phương pháp này giúp trình duyệt hoàn tất quy trình bắt tay TLS càng sớm càng tốt khi tải trang và phân giải trước tên miền trên nhiều nguồn gốc, mang đến trải nghiệm an toàn và nhanh chóng cho người dùng.
<link rel=preconnect>.Tự động tải trước trang tiếp theo
Bằng cách phân tích dữ liệu của mình, nhóm đã xác định được những hành trình phổ biến nhất của người dùng mà họ có thể tối ưu hoá. Trong những trường hợp này, ứng dụng sẽ tự động tải tài nguyên trang tiếp theo xuống bằng cách sử dụng <link rel=prefetch> để đảm bảo người dùng có thể di chuyển một cách mượt mà. Mặc dù xác định các đường liên kết để tải trước theo cách thủ công, nhưng nhóm này sử dụng webpack để gói JS cho các đường liên kết đó.
Tối ưu hoá hình ảnh và phông chữ
Hình ảnh là một phần quan trọng trong trải nghiệm và độ tin cậy của sản phẩm trên Truebil, mỗi trang thông tin sản phẩm có thể chứa tối đa 40 bức ảnh. Để đảm bảo hình ảnh không chặn quá trình tải trang, nhóm đã chọn phân phát tất cả tài nguyên của họ từ một CDN và sử dụng imagemagick để tối ưu hoá hình ảnh. Họ cũng nén tất cả tài nguyên có thể nén, bao gồm cả hình ảnh, JavaScript và CSS để giảm thời gian tải hơn nữa.
Để tránh hiện tượng văn bản ẩn xuất hiện chớp nhoáng trong khi vẫn giữ thời gian tải ở mức thấp nhất có thể, Truebil đã thiết lập CSS để sử dụng phông chữ hệ thống làm phương án dự phòng cho đến khi phông chữ bên ngoài tải xong.
Tối ưu hoá thêm
Khi ứng dụng đã sẵn sàng, nhóm muốn giảm thêm kích thước gói của nhà cung cấp và thời gian thực thi JavaScript, vì vậy, họ đã chuyển ứng dụng React sang Preact trong phiên bản chính thức. (Tìm hiểu thêm trong bộ sưu tập React.) Phương pháp này giúp họ giảm kích thước gói của nhà cung cấp từ 82,3 KB xuống còn 51,2 KB.
Tích hợp độ tin cậy
Tập trung vào thị trường Ấn Độ, phần lớn người dùng Truebil truy cập vào sản phẩm của họ trên các mạng không ổn định, đôi khi băng thông chỉ ở mức 2G. Vì vậy, việc xây dựng trải nghiệm linh hoạt không chỉ quan trọng để cải thiện hiệu suất trong điều kiện mạng bị hạn chế mà còn để cung cấp một sản phẩm mà người dùng có thể tin tưởng – một sản phẩm luôn hoạt động.
Chiến lược lưu vào bộ nhớ đệm kết hợp để tải một cách đáng tin cậy
Mức độ tương tác và tốc độ thay đổi của nội dung trên Truebil rất khác nhau. Để đảm bảo tất cả nội dung đều mới và đáng tin cậy, nhóm Truebil đã triển khai tính năng lưu API vào bộ nhớ đệm bằng cách kết hợp các chiến lược ưu tiên mạng, ưu tiên bộ nhớ đệm và ưu tiên nhanh nhất.
Đối với các trang tĩnh, chẳng hạn như trang gói thuê bao, Truebil sử dụng chiến lược ưu tiên bộ nhớ đệm để truy cập vào bộ nhớ đệm API gói thuê bao trước, sau đó quay lại mạng.
Đối với các trang có nội dung động hiếm khi thay đổi, chẳng hạn như trang thông tin sản phẩm hoặc trang chi tiết, Truebil sử dụng chiến lược ưu tiên mạng để trước tiên, trình duyệt kiểm tra nội dung trên mạng trước khi quay lại bộ nhớ đệm API nếu không có mạng.
Đối với các trang động thường xuyên thay đổi, chẳng hạn như trang chủ, trang bộ lọc, trang tìm kiếm và trang thành phố, Truebil sử dụng chiến lược ưu tiên nhanh nhất để chọn giữa mạng hoặc bộ nhớ đệm dựa trên trang nào xuất hiện trước. Để đảm bảo nội dung luôn mới, bộ nhớ đệm sẽ được cập nhật bất cứ khi nào phản hồi mạng khác với nội dung trong bộ nhớ đệm.
Trình chạy dịch vụ để có trải nghiệm đầy đủ khi không có mạng
Mặc dù phần lớn nội dung của Truebil rất linh động (có thể thêm hoặc mua xe bất cứ lúc nào), nhưng nhóm nghiên cứu muốn đảm bảo rằng người dùng có một số nội dung để tương tác, ngay cả khi họ đang sử dụng mạng không ổn định hoặc hoàn toàn không có mạng.
Bằng cách sử dụng trình chạy dịch vụ, nhóm đã có thể lưu cả dữ liệu tĩnh và dữ liệu động mà người dùng đã tương tác vào bộ nhớ đệm để người dùng có thể xem dữ liệu đó khi không có mạng. Để đảm bảo người dùng biết rằng nội dung có thể thay đổi khi họ quay lại mạng, nhóm đã thay đổi giao diện người dùng thành thang màu xám để cho biết chế độ ngoại tuyến. Duyệt qua các trang sản phẩm là một phần quan trọng trong hành trình của người dùng Truebil. Những người dùng đã truy cập vào PWA ít nhất một lần có thể duyệt xem các trang thông tin và trang sản phẩm mà họ đã truy cập trước đó, nhưng sẽ không thể xem nội dung cập nhật nào đối với trang thông tin hoặc sản phẩm.
Cải thiện mức độ tương tác để giữ chân người dùng quay lại
Trải nghiệm hấp dẫn ngay từ lần đầu
Vì hầu hết người dùng của họ đến từ các kênh có tính phí, nên Truebil cần bổ sung một sản phẩm hiển thị các đề xuất có liên quan cao cho ứng dụng web tải nhanh để tăng số lượt chuyển đổi. Mặc dù nhóm này sử dụng hệ thống đề xuất dựa trên bộ lọc tinh vi cho người dùng hiện tại, nhưng hệ thống của họ không hoạt động đối với những người dùng đăng nhập lần đầu.
Để tránh việc người dùng mới phải khởi động nguội, nhóm đã tích hợp một hệ thống đề xuất bằng các hoạt động tiếp thị kỹ thuật số. Họ thêm thông tin chi tiết về sản phẩm như mẫu xe, giá và kiểu dáng vào URL đích của quảng cáo thông qua một tham số UTM. Tham số này được hệ thống đề xuất của họ đọc và phản ánh trong các sản phẩm xuất hiện. Trong trường hợp hệ thống không đọc được thông tin chi tiết như vậy trong URL, hệ thống sẽ quay lại các mẫu xe phổ biến, tức là sự kết hợp của các mẫu xe phổ biến, ngân sách phổ biến và các mẫu xe phổ biến trong vài tuần hoặc vài ngày qua.
Ứng dụng web có thể cài đặt
Sau khi xây dựng một ứng dụng web nhanh, đầy đủ tính năng và mang lại trải nghiệm hấp dẫn cho người dùng, Truebil muốn đảm bảo rằng người dùng sẽ tiếp tục quay lại. Họ nhận thấy rằng việc cho phép cài đặt ứng dụng sẽ giúp các lượt truy cập lại trở nên liền mạch hơn nhiều.
Nhóm đã triển khai tính năng Thêm vào màn hình chính để biến sản phẩm của họ thành một ứng dụng web tiến bộ (PWA) đầy đủ. Phương pháp này cho phép người dùng thêm Truebil Lite vào màn hình chính và chạy ứng dụng ở chế độ toàn màn hình. Vì đã triển khai chế độ ngoại tuyến nên nhóm phát triển có thể dễ dàng thêm tính năng mới.
Để đảm bảo người dùng không bị gửi thư rác và tăng khả năng người dùng cài đặt ứng dụng, gần đây nhóm này đã cập nhật chiến lược khuyến khích cài đặt PWA để lời nhắc cài đặt xuất hiện khi thực sự hữu ích cho nhiều loại người dùng. Truebil đã quyết định sử dụng chiến lược gồm 3 phần:
- Hiển thị lời nhắc khi người dùng đã hoàn tất một hành động hoặc đang ở trạng thái rảnh.
- Hiển thị lời nhắc theo bối cảnh cho người dùng trưởng thành.
- Hiển thị biểu ngữ khi người dùng đã dành một khoảng thời gian nhất định trên trang web.
Biểu ngữ mặc định khi hoàn tất quy trình và trên các trang có lưu lượng truy cập cao
Nhóm đã quyết định hiển thị biểu ngữ cài đặt khi người dùng hoàn thành một nhiệm vụ hoặc đang ở trên các trang có lưu lượng truy cập cao nhưng không hoạt động (tức là không thực hiện hành động nào, chẳng hạn như cuộn hoặc điền thông tin vào biểu mẫu). Phương pháp này giúp họ tránh làm gián đoạn hoạt động của người dùng.
Câu lệnh theo bối cảnh cho người dùng trưởng thành
Đối với những người dùng đã tương tác với ứng dụng trong một thời gian, nhóm đã sử dụng thông báo tuỳ chỉnh theo ngữ cảnh để cho thấy giá trị của việc cài đặt ứng dụng vào màn hình chính:
Biểu ngữ tuỳ chỉnh cho lời nhắc dựa trên thời gian
Cuối cùng, nhóm đã tạo một biểu ngữ không gây phiền toái với thiết kế giống như thông báo được kích hoạt tại các sự kiện cụ thể, chẳng hạn như mở trang thông tin hoặc sau khi người dùng dành một khoảng thời gian nhất định trong ứng dụng:
Nhờ những điểm cải tiến này, tỷ lệ chuyển đổi và tỷ lệ tương tác của Truebil đã tăng lên đáng kể, với số phiên hoạt động của người dùng dài hơn 26% và số lượt chuyển đổi tăng thêm 61% . Đây là những con số đáng kể đối với doanh nghiệp của họ do giá trị giao dịch cao của mỗi lượt chuyển đổi.
Đối với một công ty khởi nghiệp có nguồn lực hạn chế, việc chọn nền tảng phù hợp có thể là yếu tố quyết định sự thành công của doanh nghiệp. Việc chuyển sang PWA tập trung vào tốc độ, khả năng phục hồi và mức độ tương tác đã giúp chúng tôi tăng tỷ lệ doanh thu trên chi tiêu tiếp thị lên 80% nhờ số lượt chuyển đổi tăng lên và phạm vi tiếp cận liền mạch của web.
Rakesh Raman, Nhà đồng sáng lập kiêm Giám đốc sản phẩm và khoa học dữ liệu tại Truebil
44%
Cải thiện thời gian tải
26%
Phiên người dùng lâu hơn
61%
Tăng số lượt chuyển đổi
80%
Tăng tỷ lệ doanh thu trên chi tiêu tiếp thị