自動調整載入：改善速度緩慢裝置上的網頁效能

瞭解如何針對特定硬體和網路限制，為網站進行最佳化，確保每位使用者都能獲得最佳體驗。

裝置功能和網路連線差異很大。在高階裝置上讓使用者滿意的網站，在低階裝置上可能會無法使用。在高速網路上順利載入的網站，在慢速網路上可能會停止運作。任何使用者都會遇到網站速度緩慢的情況，因此開發「一體適用」解決方案有時不一定能正常運作。

在 Chrome 開發人員大會演講中，Google 的 Addy Osmani 和 Facebook 的 Nate Schloss 探討了解決這個問題的方法，也就是提供網頁的模式，以便更妥善地滿足各種使用者限制。他們稱之為「自動載入」。

什麼是自動載入？

自動調整載入是指根據不同使用者的網路和硬體限制，提供不同的體驗，特別是：

• 為所有使用者 (包括低階裝置) 提供快速的核心體驗。

• 如果使用者的網路和硬體可以處理，則逐步新增高階功能。

針對特定硬體和網路限制進行最佳化，可讓每位使用者都能在自己的裝置上獲得最佳體驗。根據使用者限制調整體驗，包括：

• 在網路速度緩慢的情況下，提供畫質不佳的圖片和影片。

• 在低階裝置上限制動畫的畫面更新率。

• 避免在低階裝置上執行運算成本高昂的作業。

• 在速度較慢的裝置上封鎖第三方指令碼。

• 僅在快速 CPU 上載入非關鍵的 JavaScript，以便進行互動。

瀏覽器支援功能和如何實作自適應載入

以下列出可用於自動載入的信號。每個信號也都支援瀏覽器：

Navigator.deviceMemory

navigator.deviceMemory 屬性可用於減少低階裝置的記憶體耗用量。

Navigator.hardwareConcurrency

navigator.hardwareConcurrency 屬性是 CPU 核心數量。這項功能可在裝置無法妥善處理時，限制耗費大量資源的 JavaScript 執行作業，並減少 CPU 密集的邏輯。

NetworkInformation.effectiveType

navigator.connection.effectiveType 屬性可用來微調資料移轉，以減少頻寬用量。

NetworkInformation.saveData

navigator.connection.saveData 屬性用於利用使用者的數據節省模式偏好設定。

您可以在兩個地方決定要向使用者提供的內容：用戶端和伺服器。在用戶端上，您有上述的 JavaScript API。您可以在伺服器上使用用戶端提示，深入瞭解使用者的裝置功能和連線的網路。

React 中的自動載入

React Adaptive Load Hooks &Utilities (反應式自動調整載入掛鉤與公用程式) 是 React 生態系統適用的套件，可讓您根據低階裝置輕鬆調整網站。It includes:

• useNetworkStatus() 鉤子，可根據網路狀態 (slow-2g、2g、3g 或 4g) 進行調整。

• useSaveData() 掛鉤，用於根據使用者數據節省模式的偏好設定進行調整。

• useHardwareConcurrency() 鉤子，可根據使用者裝置上的邏輯 CPU 處理器核心數量進行調整。

• useMemoryStatus() 鉤子，可根據使用者的裝置記憶體 (RAM) 進行調整。

每個鉤子都會接受可選的引數，用於設定初始值。這個選項適用於兩種情況：使用者的瀏覽器不支援相關 API，以及伺服器端算繪，因為您可以使用用戶端提示資料在伺服器上設定初始值。舉例來說，useNetworkStatus() 掛鉤可以使用從用戶端提示傳遞的初始值進行伺服器端算繪作業，並在用戶端執行時，在網路有效類型變更時自行更新。

React 自適應載入掛鉤和公用程式是使用網路平台 API (網路資訊、裝置記憶體和硬體並行處理) 實作。您可以使用相同的 API，將自適應載入概念套用至其他架構和程式庫，例如 Angular、Vue 等。

自動調整載入功能的應用實例

本節將介紹如何使用自適應載入功能的示範，以及 Facebook、eBay、Tinder 等網站的實際範例。

React 電影示範說明如何根據網路狀態調整媒體放送方式。此應用程式用於瀏覽電影，可顯示海報、摘要和演員名單。系統會根據使用者的有效連線類型，在連線速度快時放送高品質海報，在連線速度慢時放送低品質海報。

Twitter 提供數據節省模式，可減少數據用量。在此模式下，預覽圖片會載入低解析度的圖片，而大型圖片只有在您輕觸預覽畫面時才會載入。啟用這個選項後，iOS 和 Android 使用者從圖片用量節省了 50% 的資料用量，而網路使用者更節省 80% 的費用。以下是使用 Save Data 鉤子複製 Twitter 時間軸的 React 示範。請嘗試開啟開發人員工具「Network」面板，然後在捲動時查看資料，在「儲存資料」和啟用時，查看兩者間轉移的資料量。

如果使用者的硬體或網路狀況不支援某些功能 (例如縮放)，eBay 會視情況開啟或關閉這些功能。您可以透過自動調整code-splitting和程式碼載入來達到這個目的，也就是有條件地在高階裝置上載入更具互動性的元件，或執行更大量的運算，同時避免將這些指令碼傳送給位於速度較慢的裝置的使用者。請觀看影片的16 分鐘處，Addy 會在示範 eBay 產品頁面中，展示如何使用 React.lazy() 和 Suspense 實作此模式。

Tinder 在網站和Lite 應用程式中使用多種自適應載入模式，為所有使用者提供快速的體驗。如果使用者使用速度較慢的網路，或已啟用數據節省模式，則會停用影片自動播放功能、限制路徑預先載入功能，並限制輪轉介面中的下一個圖片載入功能，以便在使用者滑動時一次載入一張圖片。實施這些最佳化調整後，他們發現在印尼等國家/地區，平均滑動次數大幅提升。

在 Facebook 自動調整載入

自動調整載入作業中會遇到的問題之一，就是根據可用的信號將裝置分組為高階和低階類別。在行動裝置上，user-agent (UA) 字串會提供裝置名稱，讓 Facebook 使用公開可用的裝置特性資料，將行動裝置分組為類別。不過，在電腦裝置上，通用 Analytics 只會提供裝置的作業系統相關資訊。

如要將電腦裝置分組，Facebook 會在效能監控中記錄作業系統、CPU 核心 (來自 navigator.hardwareConcurrency) 和 RAM 記憶體 (navigator.deviceMemory) 的資料。他們研究不同類型硬體與效能之間的關係，並將裝置分為五類。透過將硬體類別整合至效能監控功能，他們就能更全面地掌握使用者如何根據裝置使用 Facebook 產品，並更輕鬆地找出回歸現象。

在 24 分鐘觀看影片，Nate 會詳細介紹 Facebook 如何進行裝置分組，以及如何針對動畫和載入 JavaScript 使用自動調整載入功能。

進一步瞭解自動調節載入功能

自適應載入功能的設計理念，就是要讓網站設計兼顧包容性。請打造適合所有使用者的核心體驗，然後切換或重疊功能，讓使用者在擁有足夠記憶體、CPU 或快速網路時，能享有更優質的體驗。如要進一步瞭解自適應載入功能，請查看可用的示範，並觀看 Chrome 開發人員大會的演講：