Cách Truebil giúp web phát triển

Câu chuyện về một công ty khởi nghiệp xây dựng trải nghiệm web hàng đầu.

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 ở Ấ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 toàn diện bao gồm 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 nhờ 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 nhiều tính năng phong phú, bao gồm cả đề xuất dành riêng cho bạn dựa trên học máy, tính năng thêm vào mục 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ó giá trị cao và tần suất thấp, vì vậy, việc chọn đúng nền tảng để ưu tiên và đầu tư là điều rất quan trọng.

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 là Truebil Lite vì web dễ dàng được khám phá và có độ phức tạp thấp. 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 một ứng dụng Android/iOS. Bằng cách xây dựng một ứng dụng web tiến bộ (PWA), Truebil có thể tận hưởng tất cả các đặc quyền 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 sản xuất). Họ đặt ra các nguyên tắc 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 khi tải lần đầu và các lần điều hướng tiếp theo,
• Đáng tin cậy, không phụ thuộc vào các hạn chế 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 di động nhỏ, để người dùng muốn quay lại.

Tối ưu hoá để tải và điều hướng nhanh lần đầu

Nhờ sử dụng Lighthouse để hướng dẫn việc 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ố Nội dung hiển thị đầu tiên và Thời gian tương tác (TTI), đồng thời tối ưu hoá để có tốc độ tải nhanh lần đầu, số lượt truy cập lặp lại và khả năng điều hướng mượt mà. Nhóm đã đạ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 mục tiêu.

Đặ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 có 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 không ảnh hưởng đến tốc độ, đặc biệt là khi họ 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 các cột mốc cho TTI với mục tiêu giữ TTI dưới 5 giây. Để đạt được mục tiêu đó, họ đã tự đảm bảo 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à không ngừng theo dõi điểm hiệu suất Lighthouse của ứng dụng.

Tối ưu hoá các gói JavaScript

Nhóm bắt đầu từ những điều cơ bản bằng cách sử dụng mô hình PRPL để lưu trước vào bộ nhớ đệm 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 các tài nguyên không quan trọng một cách trì hoãn, họ đã sử dụng các thành phần tải trì hoãn ở cấp khung để tải các đoạn dưới dạng ẩn.

Để loại bỏ mọi điểm tắc nghẽn 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 khoảng 5 giây và Hiển thị có ý nghĩa đầu tiên (FMP) từ 4,1 giây xuống 3,6 giây.

CSS quan trọng trong dòng

Để cải thiện hơn nữa 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 hiển thị sẽ có tác động lớn nhất, vì vậy Truebil đã chèn tất cả CSS quan trọng vào cùng dòng và trì hoãn CSS không quan trọng. Kỹ thuật này giảm FMP xuống khoảng 2 giây.

Tránh nhiều chuyến đi khứ hồi tốn kém đến bất kỳ điểm xuất phát nào

Để giảm thiểu chi phí từ DNS và TLS, Truebil đã sử dụng <link rel="preconnect"> và <link rel="dns-prefetch">. Phương pháp này khiến trình duyệt hoàn tất quy trình bắt tay TLS nhanh nhất có thể khi tải trang và giải quyết trước tên miền trên nhiều nguồn gốc, mang đến cho người dùng trải nghiệm an toàn và nhanh chóng.

Tìm nạp trước trang tiếp theo một cách linh động

Bằng cách phân tích dữ liệu, nhóm này đã 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ải tài nguyên trang tiếp theo xuống một cách linh động bằng cách sử dụng <link rel=prefetch> để đảm bảo người dùng có thể chuyển đổi trang một cách mượt mà. Mặc dù nhóm xác định các đường liên kết cần tìm nạp trước theo cách thủ công, nhưng họ sử dụng webpack để gói JS cho những đườ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 sản phẩm và độ tin cậy của Truebil, mỗi trang thông tin sản phẩm có 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ả các tài nguyên có thể nén, bao gồm cả hình ảnh, JavaScript và CSS, để giảm thêm thời gian tải.

Để tránh tình trạng văn bản nhấp nháy không nhìn thấy được 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 được tải.

Các bước tối ưu hoá khác

Khi ứng dụng đã sẵn sàng, nhóm muốn giảm thêm kích thước gói 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 quá trình sản xuất. (Tìm hiểu thêm trong bộ sưu tập React.) Cách tiếp cận này giúp họ giảm kích thước gói nhà cung cấp từ 82,3 KB xuống 51,2 KB.

Tăng độ tin cậy

Với trọng tâm là thị trường Ấn Độ, phần lớn người dùng của 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 thấp đến mức 2G. Vì vậy, việc xây dựng một trải nghiệm linh hoạt là điều quan trọng không chỉ để 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 đá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 đa dạng. Để đảm bảo tất cả nội dung của mình luôn mới mẻ và đáng tin cậy, nhóm Truebil đã triển khai hoạt động lưu vào bộ nhớ đệm API 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 tốc độ.

Đối với các trang tĩnh, chẳng hạn như trang đăng ký, Truebil sử dụng chiến lược ưu tiên bộ nhớ đệm để chuyển đến bộ nhớ đệm API đăng ký trước, sau đó quay lại mạng.

Đối với những trang có nội dung động hiếm khi thay đổi, chẳng hạn như trang chi tiết hoặc trang thông tin sản phẩm, Truebil sử dụng chiến lược ưu tiên mạng để 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 mạng không hoạt động.

Đối với những 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 tốc độ để chọn giữa mạng hoặc bộ nhớ đệm dựa trên lựa chọn 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 của 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 hoàn toàn ngoại tuyến

Mặc dù phần lớn nội dung của Truebil có tính linh hoạt cao (người dùng có thể thêm hoặc mua xe bất cứ lúc nào), nhưng nhóm này vẫn 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 service worker, nhóm đã có thể lưu vào bộ nhớ đệm cả dữ liệu tĩnh và dữ liệu động mà người dùng đã tương tác để 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ọ kết nối lại với Internet, nhóm đã thay đổi giao diện người dùng thành thang độ xám để cho biết chế độ ngoại tuyến. Việc duyệt xem 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 PWA ít nhất một lần có thể duyệt xem trang thông tin và trang sản phẩm mà họ đã truy cập trước đây nhưng sẽ không thể xem bất kỳ nội dung cập nhật nào cho 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

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ó trả phí, nên Truebil cần bổ sung cho ứng dụng web tải nhanh của mình bằng một sản phẩm hiển thị các đề xuất có liên quan cao để tăng lượt chuyển đổi. Mặc dù nhóm này sử dụng một hệ thống đề xuất dựa trên tính năng 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 khiến người dùng lần đầu tiên gặp phải tình trạng khởi động nguội, nhóm này đã tích hợp một hệ thống đề xuất thông qua 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 (chẳng hạn 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 đó trong URL, hệ thống sẽ chuyển sang những chiếc xe phổ biến, là sự kết hợp giữa các mẫu xe phổ biến, ngân sách phổ biến và những chiếc xe phổ biến trong vài tuần hoặc vài ngày qua.

Một ứng dụng web có thể cài đặt

Sau khi tạo một ứng dụng web nhanh, đầy đủ tính năng và mang đến 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 ra rằng việc cho phép cài đặt ứng dụng sẽ giúp các lượt truy cập lặp lại diễn ra liền mạch hơn nhiều.

Nhóm này đã 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) hoàn chỉnh. 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 này ở 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 này.

Để đảm bảo người dùng không bị làm phiền và tăng khả năng người dùng sẽ cài đặt ứng dụng, gần đây, nhóm này đã cập nhật chiến lược quảng bá việc 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 một 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 ở trạng thái không hoạt động.
• 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 tất một tác 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 vào biểu mẫu). Cách tiếp cận 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 một thời gian, nhóm đã sử dụng các thông báo tuỳ chỉnh có tính ngữ cảnh cao để 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ư khi người dùng 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à mức độ tương tác của Truebil đã tăng đá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 nhiều hơn 61% . Đây là một con số đáng kể đối với hoạt động kinh doanh 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 đúng nền tảng có thể là yếu tố quan trọng đối với 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ị thêm 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, Đồng sáng lập và Giám đốc Sản phẩm và Khoa học dữ liệu tại Truebil