改善智慧型電視和機上盒裝置的與下一個繪製內容互動 (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 歸因版本中提供的互動目標。
focusKey，以及觸發元素的路徑。
現在有了適當的評估和歸因，來自現場資料的結果發現，下列互動是 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 協助審閱這份個案研究，並提供相關協助。