Việc tập trung vào hiệu suất web đã giúp tỷ lệ nhấp của Tokopedia tăng 35% như thế nào

Tạo trang tổng quan về hiệu suất web và tối ưu hoá JavaScript, tài nguyên và trang chủ để kinh doanh thành công.

Tokopedia là một trong những công ty thương mại điện tử lớn nhất tại Indonesia. Với hơn 2, 7 triệu mạng lưới người bán trên toàn quốc, hơn 18 triệu trang thông tin sản phẩm và hơn 50 triệu khách truy cập hằng tháng, đội ngũ web biết rằng việc đầu tư vào hiệu suất web là điều cần thiết. Bằng cách xây dựng văn hoá ưu tiên hiệu suất, họ đã tăng tỷ lệ nhấp (CTR) thêm 35% và tăng số lượt chuyển đổi (CVR) thêm 8%.

35%

Mức tăng CTR

8%

Tỷ lệ chuyển đổi (CVR) tăng

4giây

Mức cải thiện về TTI

Nêu bật cơ hội

Nhóm web đã trao đổi với đội ngũ lãnh đạo của họ về tầm quan trọng của việc đầu tư vào hiệu suất web để cải thiện trải nghiệm và mức độ tương tác của người dùng, đồng thời cũng chỉ ra tác động của hiệu suất khi sử dụng các mô hình và API nâng cao.

Phương pháp mà họ sử dụng

Tối ưu hoá JavaScript và tài nguyên

Việc chặn hiển thị hoặc JavaScript chạy trong thời gian dài là một nguyên nhân phổ biến gây ra các vấn đề về hiệu suất. Nhóm đã thực hiện một số bước để giảm thiểu vấn đề này:

  • Xây dựng thư viện trình điều khiển tập lệnh để tải có chọn lọc các tập lệnh của bên thứ ba nhằm tối ưu hoá đường dẫn hiển thị quan trọng.
  • Thay thế các thư viện nặng hơn bằng những thư viện nhẹ hơn.
  • Triển khai tính năng phân tách mã và tối ưu hoá cho nội dung trong màn hình đầu tiên.
  • Đã triển khai tính năng tải thích ứng, ví dụ: chỉ tải hình ảnh chất lượng cao cho các thiết bị trên mạng nhanh và sử dụng hình ảnh chất lượng thấp cho các thiết bị trên mạng chậm.
  • Hình ảnh dưới màn hình đầu tiên tải từng phần.
  • Hoãn tải JavaScript không quan trọng.
Thư viện trình điều khiển tập lệnh đã cải thiện TTI thêm 4 giây

Tối ưu hoá trang chủ

Nhóm phát triển đã sử dụng Svelte để xây dựng một phiên bản thu gọn của trang chủ cho những khách truy cập lần đầu, nhằm đảm bảo mang lại trải nghiệm nhanh chóng trên trang web. Phiên bản này cũng sử dụng một trình chạy dịch vụ để lưu các thành phần không phải định dạng lite vào bộ nhớ đệm trong nền.

Giảm 88% kích thước JavaScript của ứng dụng (từ 320 KB xuống còn 37 KB). Điểm Lighthouse đã tăng thêm 90 điểm. Đã đạt được FCP chưa đến 1 giây. CTR tăng 35%. Tỷ lệ chuyển đổi tăng 8%.

Lập ngân sách và theo dõi hiệu suất

Nhóm đã xây dựng một trang tổng quan theo dõi hiệu suất bằng cách sử dụng Lighthouse và các công cụ khác để cải thiện chất lượng của trang web:

  • Đo lường chất lượng mạng, hoạt động giám sát cơ sở hạ tầng, hiệu suất giao diện người dùng và hiệu suất của máy chủ.
  • Sử dụng kết hợp các API nền tảng web (chẳng hạn như Resource Timing API và tiêu đề Server-Timing), API PageSpeed Insights (PSI) và Báo cáo trải nghiệm người dùng trên Chrome để theo dõi các chỉ số của trường và phòng thí nghiệm.
  • Phân tích hình ảnh từ Lighthouse để giúp xác định các cơ hội tối ưu hoá hình ảnh.
  • Thực thi ngân sách cho kích thước gói trong quá trình tích hợp liên tục (CI). Không chạy được CI nếu quy mô gói vượt quá ngân sách.
Điểm TTI sau 2,2 giây trên trang chủ (điểm số Lighthouse: 88). Điểm TTI sau 1,9 giây trên các trang sản phẩm (điểm Lighthouse: 86).

Là một doanh nghiệp thương mại điện tử, việc thu nạp người dùng là yếu tố cốt lõi trong sự thành công của chúng tôi. Chúng tôi hiểu tầm quan trọng của web nên rất muốn đầu tư vào mọi công cụ và tính năng giúp mang lại trải nghiệm tốt nhất cho người dùng.

Dendi Sunardi, Nhà quản lý kỹ thuật, Nền tảng web, Tokopedia

Hãy xem trang Nghiên cứu điển hình về quy mô trên web để biết những câu chuyện thành công khác ở Ấn Độ và Đông Nam Á.