Việc cải thiện Khả năng tương tác với Next Paint (INP) trên TV thông minh và các thiết bị hộp giải mã tín hiệu số có nhiều thách thức hơn nhiều so với trình duyệt dành cho máy tính, do các hạn chế về hỗ trợ API còn hạn chế và thông số kỹ thuật hệ thống khiêm tốn. Trong nghiên cứu điển hình này, bạn sẽ tìm hiểu cách Disney+ Hotstar giải quyết thành công những trở ngại này và nhờ đó thu được những lợi ích kinh doanh đáng kể.
Khi ngày càng có nhiều thiết bị dành cho phòng khách được sử dụng, Disney+ Hotstar nhận thấy rằng việc cung cấp trải nghiệm duyệt web liền mạch trong ứng dụng dành cho TV thông minh và hộp giải mã tín hiệu số là một yêu cầu quan trọng của doanh nghiệp. Tuy nhiên, điều khiến việc khắc phục INP khó hơn cho các thiết bị như vậy là bất kỳ mẫu TV nào cũng có thể sử dụng các phiên bản trình duyệt rất cũ. Ví dụ: TV LG năm 2020 sử dụng Chrome 68 ra mắt năm 2018. Một số thiết bị trong số này cũng có thể được phân loại là thiết bị cấp thấp, nghĩa là chúng không thể phản hồi các tương tác nhanh như máy tính bảng và máy tính xách tay hàng đầu.
Hình sau đây so sánh thời gian tải một trang, giữa máy tính xách tay và CPU bị chậm lại 6 lần áp dụng trong Công cụ của Chrome cho nhà phát triển và TV thông minh. Có thể thấy, máy tính xách tay vẫn nhanh hơn nhiều so với TV thông minh được sản xuất gần đây.
Mặc dù các thử nghiệm này mang lại dữ liệu phòng thí nghiệm, nhưng Disney+ Hotstar đã bắt đầu thu thập dữ liệu thực tế về Lượt tương tác với Sơn tiếp theo (INP) qua người dùng thực tế của ứng dụng thông qua thư viện web-vitals và quan sát thấy 75% người dùng ứng dụng gặp phải INP là 675 mili giây trong thực tế. Đây được coi là trải nghiệm người dùng "kém" theo ngưỡng INP.
Nghiên cứu điển hình này đề cập đến cách Disney+ Hotstar cải thiện khả năng phản hồi trong các ứng dụng phát trực tuyến của họ, đặc biệt là trên các thiết bị cấp thấp. Cải thiện 61% nhờ giảm giá trị INP xuống còn 272 mili giây – vẫn cao hơn ngưỡng "tốt" được đề xuất là 200 mili giây, nhưng là có sự cải thiện đáng kể.
Phát hiện
Disney+ Hotstar đã đo lường ứng dụng bằng phương thức onINP trong bản dựng phân bổ của thư viện web-vitals. Trong giai đoạn đầu, họ gặp phải nhiều thách thức, đặc biệt là trong việc xác định chính xác yếu tố mục tiêu. Vấn đề này phát sinh vì mọi tệp tham chiếu đều trỏ đến phần nội dung do sử dụng thư viện điều hướng không gian của bên thứ ba. Thư viện này được sử dụng cùng với một số tuỳ chỉnh trong ứng dụng Disney+ Hotstar. Thư viện này chỉ theo dõi các sự kiện trên nội dung tài liệu, sau đó xác định phần tử được lấy tiêu điểm thực sự và dự đoán tiêu điểm tiếp theo dựa trên các thao tác nhấn phím từ xa.
Trước tiên, Disney+ Hotstar sẽ giải quyết vấn đề phân bổ để xác định chính xác các hoạt động tương tác gây ra giá trị INP cao. Do đó, Disney+ Hotstar đã ghi lại thuộc tính focusKey đã có trong thư viện điều hướng không gian cho phần tử đang được lấy làm tâm điểm, cũng như bản đồ của tất cả các thành phần có thể làm tâm điểm trên trang, tương tự như mục tiêu tương tác có trong bản dựng phân bổ web- vitals.
focusKey, cùng với đường dẫn đến thành phần kích hoạt thành phần đó.
Hiện tại, khi đã áp dụng phương pháp đo lường và phân bổ thích hợp, các phát hiện từ dữ liệu thực địa đã báo cáo các hoạt động tương tác sau đây là vấn đề nhiều nhất đối với INP:
- Điều hướng khay băng chuyền theo chiều ngang.
- Điều hướng khay băng chuyền dọc.
- Hoạt động tương tác trong lần tải trang đầu tiên.
Sau khi lập hồ sơ các tương tác này với bảng điều khiển hiệu suất trong Công cụ dành cho nhà phát triển Chrome, tôi nhận thấy rằng thư viện điều hướng không gian đọc vị trí của tất cả các thành phần có thể làm tâm điểm và xây dựng một cây mới. Đây là một thao tác tốn kém kích hoạt tính năng đậm bố cục trên mỗi lần tương tác, chẳng hạn như di chuyển từ phần tử này sang phần tử khác.
Đối với trang chủ, thư viện điều hướng không gian đã tạo một cây như sau:
Điều này có nghĩa là, nếu ứng dụng hiển thị 10 khay và mỗi khay có 7 thẻ, thì sẽ có 70 phần tử có thể làm tâm điểm cho vùng chứa khay, bao gồm cả các mục điều hướng. Đây là số lượng lớn các phần tử tương tác. Thư viện băng chuyền của bên thứ ba cũng được sử dụng để đọc kích thước của từng thẻ trong khi điều hướng ngang để dịch vùng chứa, làm tăng độ trễ tương tác.
Khắc phục sự cố
Có một số vấn đề khác nhau mà tất cả đều phải được giải quyết riêng biệt để giải quyết các vấn đề về khả năng phản hồi của ứng dụng nói chung.
Cải tiến điều hướng khay ngang
Disney+ Hotstar đã tạo thư viện băng chuyền nội bộ của riêng mình mà không kích hoạt tình trạng đơ bố cục bằng cách sử dụng ảnh động kết hợp và đọc kích thước một lần trên mỗi khay, thay vì một lần cho mỗi thẻ.
Điều hướng không gian chỉ tập trung vào gốc của băng chuyền và để điều hướng theo chiều ngang hơn nữa, băng chuyền tùy chỉnh của chúng tôi sẽ xuất hiện trong hình ảnh. Với cách tiếp cận này, Disney+ Hotstar đã loại bỏ phần phụ thuộc của điều hướng không gian và thư viện băng chuyền cũ dùng để đọc kích thước trên mọi thành phần điều hướng.
Đây là giao diện cây điều hướng không gian sau khi thực hiện những tối ưu hoá này.
Các hình ảnh sau đây là dữ liệu so sánh hiệu suất được đo lường trong bảng hiệu suất của Công cụ của Chrome cho nhà phát triển trước và sau khi chúng tôi triển khai băng chuyền.
Kết quả của công việc này là Disney+ Hotstar nhận thấy sự sụt giảm đáng kể về INP của ứng dụng trong lĩnh vực này. Họ cũng tiết kiệm được khoảng 35 KB (nén) bằng cách xoá thư viện của bên thứ ba. Ngoài ra, những điểm cải tiến này cũng cho phép Disney+ Hotstar giảm thời lượng của chỉ số tuỳ chỉnh mà họ sử dụng để đo tổng thời gian hiển thị cho trang chủ, vì các bố cục được kích hoạt ít thường xuyên hơn do các nút điều hướng không gian bị giảm.
Cải tiến điều hướng khay dọc
Disney+ Hotstar cũng cải thiện hiệu suất điều hướng khay dọc bằng cách tải từng phần các khay thay vì tải tất cả các khay lên trước. Vì vậy, khi tải trang, thay vì tải 10 phiên bản của khay (bên trong, mỗi khay có một thành phần băng chuyền và một loạt hình ảnh), ứng dụng chỉ tải hai khay hiển thị trong khung nhìn, cùng với một khay bổ sung ở phía trên và phía dưới. Quá trình kết xuất cũng được chia thành nhiều tác vụ bằng cách sử dụng chiến lược lợi nhuận setTimeout() để luồng chính có nhiều cơ hội xử lý tương tác của người dùng hơn.
Tương tác trong khi tải trang ban đầu
INP sẽ cao đối với những ứng dụng xử lý một số lượng lớn tập lệnh trong khi khởi chạy ứng dụng. Điều này là do trình duyệt phải tải xuống, phân tích cú pháp và đánh giá các tập lệnh đó. Mặc dù tất cả điều này xảy ra, nhưng luồng chính sẽ có thể bị chiếm một thời gian dài và không thể phản hồi nhanh các tương tác của người dùng.
Disney+ Hotstar nhận thấy rằng họ đang xử lý nhiều tập lệnh hơn mức thực sự cần thiết trong quá trình khởi động ứng dụng (thời gian màn hình chờ) để giúp các trang sau này tải nhanh hơn. Việc này phát sinh thêm các tác vụ đánh giá tập lệnh và có khả năng ảnh hưởng tiêu cực đến INP.
Để khắc phục vấn đề này, Disney+ Hotstar cân nhắc việc tải động hầu hết các thành phần để tiết kiệm thời gian trong quá trình khởi động ứng dụng. Tuy nhiên, làm như vậy sẽ làm tăng thời gian tải cho các thao tác điều hướng tới các trang trong tương lai, vì JavaScript đó sẽ không còn được tải trước cùng với thay đổi này nữa. Để giải quyết vấn đề này, Disney+ Hotstar đã phát triển một thư viện trình tải trước thành phần nội bộ để xác định trang nào có thể xuất hiện tiếp theo trong hành trình của người dùng và sẽ tải trước các thành phần cho trang đó. Ví dụ:
- Khi người dùng ở trên trang đăng nhập, thư viện trình tải trước thành phần sẽ tải trước các thành phần cho trang chọn hồ sơ.
- Trên trang chọn hồ sơ, các nội dung trang chủ sẽ được tải.
- Trên trang chủ, nội dung của trang chi tiết sẽ được tải.
- Cuối cùng, nội dung của trang xem được tải trên trang chi tiết.
Việc tối ưu hoá việc tải thành phần đã giúp Disney+ Hotstar thực hiện hai điều: giảm INP của ứng dụng (vì luồng chính hiện tương đối tự do để thực thi tương tác của người dùng) và cũng giảm mức sử dụng bộ nhớ trên các thiết bị cấp thấp.
Những thay đổi này đã giúp giảm 32% số INP được báo cáo từ trường như trong ảnh chụp màn hình dưới đây.
Các cải tiến khác:
Disney+ Hotstar cũng nhận thấy có nhiều tác vụ dài đối với một số sự kiện người dùng, có thể được chia tách bằng cách thường xuyên chuyển sang chuỗi chính. Do vậy, họ tiến thêm một bước bằng cách tạo ra một tiện ích trình tạo tác vụ cho phép người dùng huỷ tác vụ đó giữa quá trình thực thi.
Ví dụ: khi người dùng điều hướng qua nhiều thẻ trên khay, những điều sau đây sẽ xảy ra:
- Thẻ tiếp theo được lấy tiêu điểm.
- Thẻ được dịch nếu cần.
- Tiêu điểm đã được cập nhật.
- Hệ thống sẽ tìm nạp đoạn giới thiệu (nếu có) và bắt đầu phát.
- Sự kiện Analytics được kích hoạt cho hành động đó.
Nếu trong quá trình này, người dùng tập trung vào thẻ tiếp theo, thì các bước còn lại sẽ không cần được thực thi. Ví dụ: việc tìm nạp đoạn giới thiệu và khởi chạy trình phát cho một bộ phim/chương trình cụ thể sẽ không cần thiết nữa nếu người dùng đã chuyển sang thẻ tiếp theo. Do đó, bạn có thể huỷ những tác vụ đó để giải phóng luồng chính.
Tiện ích trình tạo tác vụ của Disney+ Hotstar chấp nhận một hàm là một tác vụ. Khi một tác vụ khác xuất hiện ở giữa, tác vụ trước đó sẽ bị huỷ để giúp chúng ta thực thi tác vụ không cần thiết và nhanh chóng thực hiện tác vụ cần thiết.
Kết quả
Nhìn chung, INP của ứng dụng Disney+ Hotstar giảm từ 675 mili giây xuống còn 272 mili giây, cải thiện gần 60%! Ngoài ra, độ trễ tương tác khay cụ thể giảm từ khoảng 400 mili giây xuống còn khoảng 100 mili giây.
Tác động đối với hoạt động kinh doanh: số lượt xem thẻ hàng tuần đã tăng từ 111 lên 226 trên mỗi người dùng! Tăng 100%, cho thấy giao diện nhanh hơn và thích ứng hơn có nhiều khả năng thu hút người dùng hơn trong khoảng thời gian dài hơn.
Đây mới chỉ là khởi đầu và Disney+ Hotstar chỉ mới xây dựng được bề mặt trong việc cải thiện hiệu suất kết xuất và tương tác dựa trên chỉ số INP. Ngoài ra, nhóm của họ rất háo hức muốn biến Disney+ Hotstar trở thành trải nghiệm mượt mà cho khách hàng trong tương lai gần.
Nhờ những nỗ lực của Ayush, Ajay, Kiran, Milan và Richa từ Disney+ Hotstar vì những nỗ lực của họ đã lật ngược tình thế.
Xin đặc biệt cảm ơn Ankeet Maini, Trưởng bộ phận kỹ thuật Disney+ Hotstar và Rahul Krishnan P, Trưởng bộ phận Trải nghiệm khách hàng Disney+ Hotstar, nhằm hỗ trợ cho công việc đổi mới này, cũng như cảm ơn Jeremy Wagner, Gilberto, Barry Pollard và Brendan Kenny của Google vì đã xem xét và giúp xuất bản nghiên cứu điển hình này.