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

Câu chuyện của một công ty khởi nghiệp về việc xây dựng trải nghiệm web tốt nhất.

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 Độ bán 100% ô tô đã qua sử dụng được chứng nhận. 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 cả việc chuyển quyền sở hữu, bảo hiểm, cho vay và đảm bảo dịch vụ. Khách hàng tiềm năng có thể xem các trang sản phẩm riêng lẻ kèm theo hình ảnh và báo cáo kiểm tra chi tiết, cũng như xem thông tin đánh giá xe bằng 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ả các đề xuất được cá nhân hóa 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 dùng chung xe và nhiều tính năng khác.

Khó khăn

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 điều tối quan trọng là bạn phải chọn nền tảng phù hợp để ư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ễ khám phá và ít phiền hà. Công nghệ web giúp giảm chi phí phát triển, sử dụng ít dữ liệu và bộ nhớ hơn, đồ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. Và bằng cách xây dựng một ứng dụng web tiến bộ (PWA), Truebil có thể nhận được tất 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 cách sử dụng React, Django và Preact (để di chuyển sang kênh phát hành công khai). 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 này 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, không phụ thuộc vào những hạn chế về mạng hoặc thiết bị của người dùng, và
• Hấp dẫn, đặc biệt là đối với màn hình thiết bị di động nhỏ, vì vậy, người dùng sẽ muốn quay lại sử dụng ứng dụng.

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

Nhờ sử dụng Lighthouse, hướng dẫn tối ưu hoá hiệu suất, đội ngũ đã á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ố Thời gian hiển thị nội dung đầu tiên và Thời gian tương tác (TTI), đồng thời tối ưu hoá cho những lần tải nhanh lần đầu, các lượt truy cập lặp lại và khả năng điều hướng mượt mà. Công ty đạt được những kết quả đó nhờ đặ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 kiến trúc trải nghiệm của họ dưới dạng ứng dụng trang đơn với tính năng hiển thị phía máy chủ khi tải lần đầu và hiển thị phía máy khách cho các lần tải tiếp theo. Việc duy trì các ứng dụng web với hiệu suất hiển thị phía máy khách có thể 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.

Đội ngũ này đặt ra ngân sách nghiêm ngặt dựa trên mốc quan trọng cho TTI với mục tiêu duy trì mức ngân sách dưới 5 giây. Để đạt được mục tiêu đó, họ đảm bảo theo cách thủ công sẽ 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 từ những nội dung cơ bản bằng cách sử dụng mẫu PRPL để lưu trước vào bộ nhớ đệm và tối ưu hoá các 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 từng phần các tài nguyên không quan trọng, họ đã sử dụng các thành phần tải từng phần ở cấp khung để tải các mảnh dưới màn hình đầu tiên.

Để gỡ bỏ nút thắt cổ chai của gói JavaScript, nhóm đã giảm tải trọng thông qua việc chia 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 hiển thị nội dung đầ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 FMP hơn nữa, đội ngũ này đã 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 rằng việc giảm CSS chặn hiển thị sẽ có tác động lớn nhất, vì vậy, Truebil đặt nội tuyến tất cả CSS quan trọng và CSS không quan trọng bị trì hoãn. Kỹ thuật này làm giảm thời gian hiển thị quảng cáo 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 khởi hành nào

Để giảm thiểu mức hao tổn do 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 quá trình bắt tay TLS sớm nhất có thể khi tải trang và phân giải trước tên miền nhiều nguồn gốc, cho phép mang lại trải nghiệm người dùng an toàn, nhanh chóng.

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

Bằng cách phân tích dữ liệu, đội ngũ 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 như vậ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ể thao tác suôn sẻ. Mặc dù nhóm này xác định các đường liên kết để tìm nạp trước theo cách thủ công, nhưng họ sử dụng gói web để 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 yếu tố tối quan trọng tạo nên uy tín và trải nghiệm sản phẩm của Truebil, mỗi trang thông tin sản phẩm có tối đa 40 hình ảnh. Để đảm bảo rằng hình ảnh không chặn tải trang, đội ngũ này đã chọn phân phát tất cả tài nguyên 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 hình ảnh, JavaScript và CSS để giảm thêm thời gian tải.

Để tránh nhấp nháy văn bản ẩn trong khi vẫn duy trì thời gian tải 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 các phông chữ bên ngoài tải xong.

Tối ưu hoá hơn nữa

Khi ứng dụng đã sẵn sàng, đội ngũ này muốn giảm thêm kích thước gói nhà cung cấp và thời gian thực thi JavaScript, nên họ đã chuyển ứng dụng React của họ sang Preact trong phiên bản chính thức. (Tìm hiểu thêm trong bộ sưu tập Phản hồi.) 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 còn 51,2 KB.

Xây dựng độ tin cậy

Tập trung vào thị trường Ấn Độ, phần lớn người dùng của Truebil truy cập sản phẩm của họ qua các mạng không ổn định, đôi khi rơi vào băng thông thấp như 2G. Vì vậy, việc xây dựng trải nghiệm bền bỉ không chỉ quan trọng để cải thiện hiệu suất trong điều kiện mạng hạn chế mà còn cung cấp sản phẩm mà người dùng có thể tin tưởng. Đây là sản phẩm luôn hiệu quả.

Chiến lược lưu vào bộ nhớ đệm kết hợp để tải đáng tin cậy

Tính tương tác và tốc độ thay đổi đối với nội dung của Truebil khác nhau rất nhiều. Để đảm bảo rằng tất cả nội dung đều mới mẻ và đáng tin cậy, nhóm Truebil đã triển khai chức 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 để chuyển về 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ình duyệt trước tiên sẽ kiểm tra mạng để tìm nội dung 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 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 điều kiện nào đế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.

Service worker cho trải nghiệm ngoại tuyến đầy đủ

Mặc dù một phần lớn nội dung của Truebil có tính linh động cao (ô tô có thể được thêm hoặc mua bất kỳ lúc nào), nhưng nhóm này muốn đảm bảo rằng người dùng của họ có một số nội dung để tương tác, ngay cả khi họ đang truy cập mạng không ổn định hoặc hoàn toàn không có kết nối mạng.

Bằng cách sử dụng service worker, 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 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 mạng trở lại, đội ngũ phát triển đã thay đổi giao diện người dùng sang thang màu xám để biểu thị 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 qua các trang thông tin và trang sản phẩm mà họ từng truy cập nhưng sẽ không thấy được nội dung cập nhật nào đối với trang thông tin hoặc sản phẩm này.

Cải thiện mức độ tương tác để thu hút người dùng quay lại

Trải nghiệm hấp dẫn 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 phải bổ sung một sản phẩm hiển thị các đề xuất phù hợp để tăng số lượt chuyển đổi cho ứng dụng web tải nhanh của họ. Mặc dù nhóm này sử dụng hệ thống đề xuất dựa trên cơ chế lọc tinh vi cho những 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 những người dùng mới bắt đầu sử dụng lần đầu, đội ngũ này đã tích hợp hệ thống đề xuất bằng cách sử dụng các hoạt động tiếp thị kỹ thuật số của họ. Họ thêm các chi tiết sản phẩm như mẫu xe, giá và loại thân xe vào URL đích của quảng cáo thông qua thông số UTM. Thông 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 những chi tiết như vậy trong URL, hệ thống sẽ quay lại dùng những chiếc xe phổ biến (là sự kết hợp giữa các mẫu xe phổ biến, mức giá phổ biến và những chiếc xe phổ biến trong vài tuần hoặc ngày gần đây).

Ứng dụng web có thể cài đặt

Bằng việc xây dựng một ứng dụng web nhanh, đầy đủ tính năng với trải nghiệm người dùng hấp dẫn, Truebil muốn đảm bảo rằng người dùng của họ sẽ tiếp tục quay lại. Họ nhận ra rằng việc làm cho ứng dụng dễ cài đặt sẽ giúp các lượt truy cập lặp lại liền mạch hơn nhiều.

Đội ngũ 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 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 họ có thể thêm tính năng mới này một cách dễ dàng.

Để đảm bảo người dùng không bị nội dung rác và tăng khả năng người dùng cài đặt ứng dụng, gần đây, nhóm đã 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 vào thời điểm thực sự hữu ích cho nhiều kiểu người dùng. Truebil đề ra chiến lược gồm 3 phần:

• Hiện lời nhắc khi người dùng đã hoàn thành một hành động hoặc không hoạt động.
• Hiện lời nhắc theo bối cảnh cho người dùng là người trưởng thành.
• Hiển thị một 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 quá trình hoàn tất và trên những trang có lưu lượng truy cập cao

Đội ngũ này quyết định hiển thị một biểu ngữ cài đặt khi người dùng hoàn thành một nhiệm vụ hoặc đang truy cập vào các trang có lưu lượng truy cập cao nhưng không hoạt động (tức là khi họ không làm gì, chẳng hạn như cuộn hoặc điền 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.

Lời nhắc theo bối cảnh dành cho người dùng là người 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, đội ngũ này sử dụng các thông điệp tuỳ chỉnh nâng cao để thể hiện giá trị của việc cài đặt ứng dụng lên màn hình chính:

Biểu ngữ tuỳ chỉnh cho các câu lệnh dựa trên thời gian

Cuối cùng, đội ngũ này đã tạo một biểu ngữ không xâm phạm có thiết kế giống thông báo để kích hoạt tại một số sự kiện cụ thể, chẳng hạn như mở trang danh sách hoặc sau khi người dùng sử dụng ứng dụng trong một khoảng thời gian nhất định:

Nhờ những cải tiến này, tỷ lệ chuyển đổi và tương tác của Truebil đã tăng đáng kể với số phiên người dùng dài hơn 26% và số lượt chuyển đổi tăng thêm 61% . Điều này rất quan trọng đối với doanh nghiệp của họ khi mỗi lượt chuyển đổi mang lại giá trị giao dịch cao.

Đối với 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ố cực kỳ quan trọng đối với sự thành công của doanh nghiệp. Việc chuyển sang sử dụng một ứng dụng web tiến bộ (PWA) tập trung vào tốc độ, khả năng thích ứng và mức độ tương tác đã giúp chúng tôi tăng 80% mức chi tiêu cho hoạt động tiếp thị từ doanh thu đến hoạt động tiếp thị nhờ tăng số lượt chuyển đổi và phạm vi tiếp cận mượt mà trên web.

Rakesh Raman, Nhà đồng sáng lập kiêm Giám đốc khoa học sản phẩm và dữ liệu tại Truebil