Progressive Web App tại Voot

Biểu trưng của Voot Lite

Tóm tắt

Voot.com ra mắt Ứng dụng web tiến bộ đa phương tiện tại Ấn Độ. Trong vòng vài ngày triển khai, thời gian phiên trên mỗi người dùng đã tăng thêm 39% và số lượt xem hằng ngày trên mỗi người dùng tăng 15%.

Kết quả

  • Thời gian tải trang giảm 80%
  • Thời gian phiên hoạt động trên mỗi người dùng tăng 39%
  • Tỷ lệ thoát giảm 19%
  • Chuyển đổi từ khách truy cập sang người xem video tăng 77%
  • Số lượt xem video trung bình hằng ngày trên mỗi người dùng tăng 15%

Giới thiệu về voot.com

Ảnh chụp màn hình Voot

Voot là một trong những sản phẩm video theo yêu cầu hàng đầu của Ấn Độ, có sẵn dưới dạng cả ứng dụng gốc và ứng dụng web dành cho thiết bị di động. Dịch vụ này cung cấp gần 35.000 giờ nội dung trả phí trực tuyến, bao gồm các chương trình độc quyền của các mạng như Colors và MTV, cũng như Voot Originals và hơn 8.000 video cho trẻ em. Voot do Viacom18, một công ty liên doanh giữa Viacom và Network18 Group, điều hành.

Khó khăn

Thiết bị di động là hình thức tiêu thụ nội dung đa phương tiện chính ở Ấn Độ. Những thiết bị như vậy thường có bộ nhớ hạn chế cho các ứng dụng gốc, khiến web dành cho thiết bị di động trở thành một phần quan trọng trong chiến lược sản phẩm Voot.

Hầu hết người dùng Voot di động truy cập Internet thông qua mạng 2G và 3G có đo lượng dữ liệu. Việc chuyển dữ liệu rất tốn kém. Mặc dù người dùng trở nên hết sức gắn bó với video sau khi video bắt đầu phát, nhưng thời gian tải chậm lại khiến người dùng bỏ cuộc trước khi có thể bắt đầu trải nghiệm. Để giải quyết thách thức đó và tăng mức sử dụng web dành cho thiết bị di động, Voot đã tìm cách cải thiện trang web của họ bằng các tính năng Ứng dụng web tiến bộ.

Giải pháp

Để cải thiện trải nghiệm tổng thể của người dùng, Voot.com đã chuyển trang web của họ thành một Ứng dụng web tiến bộ, sử dụng các tính năng như Thêm vào Màn hình chính và một trình chạy dịch vụ.

Mặc dù dịch vụ 4G mới ra mắt gần đây, nhưng hầu hết người dùng ở Ấn Độ đều truy cập Internet thông qua mạng 2G và 3G, với tốc độ truyền dữ liệu chậm và đôi khi tốn kém. Để giảm lượng dữ liệu được chuyển, Voot.com đã tối ưu hoá hình ảnh dành riêng cho thiết bị di động. Giờ đây, trang web sẽ tự động phân phát hình ảnh JPEG hoặc WebP tuỳ thuộc vào khả năng của trình duyệt.

Voot.com cũng giảm thời gian tải bằng cách thêm một trình chạy dịch vụ để tải trước hình ảnh khi người dùng di chuyển và lưu hình ảnh vào bộ nhớ đệm cho các lượt truy cập lặp lại. Trang web này cũng được phân tích bằng Lighthouse để thu thập thông tin chi tiết về hiệu suất, từ đó cho phép giảm mức hao tổn JavaScript và CSS, cũng như triển khai các lệnh gọi máy chủ đồng bộ.

Các hoạt động tối ưu hoá này giúp giảm 63% lượng dữ liệu tải trang trong lượt xem đầu tiên và giảm 86% lượng dữ liệu chuyển cho khách truy cập cũ. Tải trang nhanh hơn gấp 5 lần đối với khách truy cập lần đầu và nhanh hơn gần 7 lần đối với người dùng cũ.

Để mang lại trải nghiệm thực sự giống như ứng dụng, Voot.com cũng đã triển khai thêm vào màn hình chính, cho phép người dùng khởi chạy trang từ màn hình chính như ứng dụng gốc. Việc này kết hợp với quy trình đăng nhập đơn giản cho phép người dùng tương tác lại với trang web và xem chương trình yêu thích một cách nhanh chóng và dễ dàng.

Voot đã ra mắt giao diện người dùng mới trước tiên trên web dành cho thiết bị di động, trước web dành cho máy tính và ứng dụng gốc. Trong vòng vài ngày kể từ khi ra mắt, những cải tiến giúp giảm 19% tỷ lệ người dùng bỏ ngang và tăng 77% lượt chuyển đổi từ khách truy cập sang người xem video. Người dùng cũng cho thấy mức độ tương tác cao hơn, với thời gian phiên trung bình của người dùng tăng 39% và số lượt xem video trung bình hằng ngày trên mỗi người dùng tăng 15%. Các chỉ số tương tác này của người dùng cho thấy Voot.com hoạt động tương tự như ứng dụng gốc mà không yêu cầu người dùng cài đặt bất cứ thứ gì.

Rajneel Kumar, Phó chủ tịch cấp cao, Trưởng bộ phận Sản phẩm và Công nghệ cho OTT và Digital Ventures tại Viacom18: "Chúng tôi đã thay đổi đáng kể trải nghiệm người dùng trên Web dành cho thiết bị di động bằng cách sử dụng PWA." “Tất cả thời gian và công sức chúng tôi dành cho các thay đổi về công nghệ, giao diện người dùng và tối ưu hóa dường như đang cho thấy kết quả rất tích cực. Chúng tôi sẽ tiếp tục tinh chỉnh hơn nữa và tự tin rằng chúng tôi sẽ tiếp tục thấy mức tăng người tiêu dùng đáng kể."