改善智慧型電視和機上盒裝置的與下一個繪製內容互動 (INP) 問題,比電腦版瀏覽器更加困難,這不僅是對 API 支援的限制,系統規格也有限。在本個案研究中,您將瞭解 Disney+ Hotstar 如何成功解決這些障礙,並從中獲得顯著的業務優勢。
隨著客廳裝置的採用率增加,Disney+ Hotstar 意識到,他們必須在應用程式中提供順暢的智慧型電視和機上盒瀏覽體驗,是非常重要的業務需求。不過,更難修正這類裝置的 INP 問題。然而,任何特定電視型號都可能會使用非常舊的瀏覽器版本,例如 2020 年的 LG TV 使用 2018 年推出的 Chrome 68 版。其中某些裝置也可歸類為低階裝置,也就是說,這些裝置無法像旗艦款的平板電腦和筆記型電腦一樣迅速回應互動。
下圖比較搭載 CPU 的筆電和智慧型電視,兩者載入時間如您所見,筆電的速度遠比最近製造的智慧型電視快得多。
雖然這些測試會產生實驗室資料,但 Disney+ Hotstar 開始利用 Web-Vitals 程式庫從應用程式實際使用者的「與 Next Paint 互動」(INP) 收集相關現場資料,並觀察到 75% 的使用者在實際領域中遇到了 675 毫秒的 INP (視 INP 門檻)。
此個案研究探討 Disney+ Hotstar 如何改善串流應用程式的回應速度,尤其是低階裝置。透過將 INP 值縮減至 272 毫秒,改善了 61% ,仍高於建議的 200 毫秒「良好」門檻 (200 毫秒),但也有明顯的進步。
研究結果
Disney+ Hotstar 使用Web-vitals 程式庫歸因版本中的 onINP
方法檢測應用程式。在初始階段遇到各種挑戰,尤其是辨別精確的目標要素時,更是如此。由於所有參照都是由第三方空間導覽程式庫使用於 Disney+ Hotstar 應用程式中的某些自訂功能,而指向主體,因此會造成問題。這個程式庫只會監聽文件內文的事件,並隨後根據遠端按鍵操作預測下一個焦點。
Disney+ Hotstar 會先解決歸因問題,以便正確找出負責高 INP 值的互動。為此,Disney+ Hotstar 會記錄 focusKey
屬性 (此屬性已存在於目前焦點元素的空間導覽程式庫),以及頁面上所有可聚焦元素的對應,這類似於 Web-Vitals 歸因版本中提供的互動目標。
現在有了適當的評估和歸因,來自現場資料的結果發現,下列互動是 INP 最有問題的互動:
- 水平輪轉介面匣導覽。
- 垂直輪轉介面匣導覽。
- 初次載入網頁期間的互動。
在分析這些與 Chrome 開發人員工具效能面板的互動時,我們發現空間導覽程式庫會讀取所有可聚焦元素的位置,並建立了新的樹狀結構。這項費用非常高昂,會在每次互動時觸發版面配置輾轉現象,例如在元素之間移動。
首頁的樹狀結構是由空間導覽程式庫產生,如下所示:
也就是說,如果應用程式顯示 10 個托盤,而每個托盤都有 7 張資訊卡,則匣容器會有 70 個可聚焦元素,包括導覽項目。這是大量的互動元素。此外,我們也使用第三方輪轉介面程式庫,在橫向導覽期間讀取每張資訊卡的尺寸,以翻譯容器,這樣不僅可增加互動延遲時間。
修正問題
有幾個不同的問題都必須分別解決,才能解決整體應用程式的回應問題。
改善水平匣導覽功能
Disney+ Hotstar 自行打造了自己的內部輪轉介面程式庫,不會使用複合動畫來觸發版面配置輾轉現象,而且只會讀取每個托盤一次的尺寸,而不是每張資訊卡一次。
空間導覽重點僅聚焦於輪轉介面的根層級,而在進階的橫向導覽介面中,自訂輪轉介面融入畫面。透過這個方法,Disney+ Hotstar 得以移除對空間導覽的依賴,以及用於讀取每個導覽維度的舊版輪轉介面程式庫。
這是經過最佳化調整的空間導覽樹狀結構。
下圖顯示的是 Chrome 開發人員工具的效能面板,在輪轉介面導入前後比較成效,
在這方面,Disney+ Hotstar 的實力已有顯著降低,他們也藉由移除第三方程式庫,成功節省約 35 KB (壓縮後) 的費用。不僅如此,這些改善措施也讓 Disney+ Hotstar 得以縮短其自訂指標的持續時間,在測量首頁的總轉譯時間,因為空間導覽節點減少,版面配置的觸發頻率變少。
改善垂直匣導覽功能
Disney+ Hotstar 也藉由延遲載入托盤,改善了垂直匣導航的效能,而不用在前方載入所有項目。因此,在載入網頁時,應用程式不會載入 10 個匣的例項 (每個內部都有一個輪轉介面元件和一張圖片),而是只載入可在可視區域顯示的兩個卡匣,以及上方和下方的額外匣。轉譯還使用 setTimeout()
收益策略將轉譯分成多項工作,讓主執行緒有更多機會處理使用者互動。
初次載入網頁期間的互動
對於在啟動應用程式期間會處理大量指令碼的應用程式而言,INP 的使用率會偏高。這是因為瀏覽器必須下載、剖析及評估這些指令碼。雖然發生這類情況,但主要執行緒會保留很長一段時間,且無法快速回應使用者互動。
Disney+ Hotstar 發現,處理的指令碼數量比應用程式啟動期間 (啟動畫面時間) 實際還多,加快之後的網頁載入速度。這會導致額外的指令碼評估工作,也可能對 INP 造成負面影響。
為解決這個問題,Disney+ Hotstar 考慮了動態載入大部分的資產,因此可在應用程式啟動時節省時間。不過,這樣做會使得瀏覽後續網頁的載入時間增加,因為在這項變更中,系統就不會預先載入 JavaScript。為解決這個問題,Disney+ Hotstar 開發了內部素材資源預載器程式庫,用於判斷接下來可能出現在使用者歷程中的哪個網頁,並預先載入該網頁的素材資源。例如:
- 使用者進入登入頁面時,素材資源預載器程式庫會預先載入設定檔選取頁面的素材資源。
- 在設定檔選擇頁面上,系統會載入首頁素材資源。
- 在首頁中,系統會載入詳細資料頁面的資產。
- 最後,系統會在詳細資料頁面載入觀賞頁面的資產。
對資產載入進行最佳化處理後,Disney+ Hotstar 有兩件事,那就是減少應用程式的 INP (因為主要執行緒現在在執行使用者互動方面相對可免費使用),以及降低低階裝置的記憶體用量。
這些變更讓欄位回報的 INP 號碼減少了 32%,如以下螢幕截圖所示。
其他改良功能
Disney+ Hotstar 也發現一些使用者事件有很長一段時間,可以經常前往主執行緒進行分割,隨後更進一步建立了工作產生器公用程式,允許使用者在執行過程中取消工作。
舉例來說,當使用者瀏覽卡匣上的多張卡片時,會發生以下情況:
- 將焦點移至下一張資訊卡。
- 如有需要,系統會翻譯卡片。
- 聚光燈已更新。
- 系統會擷取預告片 (如有),並開始播放。
- 就會觸發該動作的 Analytics (分析) 事件。
在這個過程中,如果使用者聚焦在下一張資訊卡,就不需要執行其餘步驟。舉例來說,如果使用者已經前往下一張資訊卡,就不再需要特定影視內容的預告片擷取和初始化。因此,您可以取消這些工作,釋出主執行緒。
Disney+ Hotstar 的工作產生器公用程式會接受一項任務
結果
整體而言,Disney+ Hotstar 的應用程式 INP 從 675 毫秒降至 272 毫秒,代表改善幅度將近 60%!此外,系統匣互動延遲時間從約 400 毫秒降至約 100 毫秒。
對業務的影響:資訊卡的每週觀看次數從每位使用者 111 次增加到 226 次!比後者提升了 100%,也展現出速度更快、反應更靈敏的介面,更有可能長期吸引使用者。
這只是個開端,Disney+ Hotstar 只是開始指引,憑藉著 INP 指標改善轉譯和互動效能,他們的團隊也非常高興能打造 Disney+ Hotstar,在近期將帶給客戶流暢的體驗。
感謝 Disney+ Hotstar 的 Ayush、Ajay、Kiran、Milan 和 Richa,為響應消費者的努力。
特別感謝,工程部門主管 Disney+ Hotstar 的工程主管 Disney+ Hotstar 主管 Rahul Krishnan P,以及 Google 客戶體驗部門主管 Rahul Krishnan P,以及 Google 的 Jeremy Wagner、Gilberto、Barry Pollard 和 Brendan Kenny 協助審閱這份個案研究,並提供相關協助。