瞭解如何針對特定硬體和網路限制調整網站，確保所有使用者都獲得最佳體驗。
裝置功能和網路連線有所不同。能夠在高階裝置上讓使用者滿意的網站在低階裝置上無法使用。使用快速的網路能流暢載入的網站，在速度較慢的網站時，可能會暫時無法使用。任何使用者都可能遇到網站速度緩慢的問題，因此開發「一體適用」解決方案不一定每次都能正常運作。
在 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 生態系統的套件，可讓您更輕鬆地針對低階裝置調整網站。本指南涵蓋的內容：
useNetworkStatus()掛鉤會根據網路狀態 (slow-2g、2g、3g或4g) 進行調整。useSaveData()掛鉤，會根據使用者的數據節省模式偏好設定進行調整。useHardwareConcurrency()掛鉤，會根據使用者裝置上的邏輯 CPU 處理器核心數量進行調整。useMemoryStatus()掛鉤，會根據使用者的裝置記憶體 (RAM) 進行調整。
每個掛鉤都會接受用於設定初始值的選用引數。這個選項在以下兩種情況下非常實用：使用者的瀏覽器不支援相關 API 時；用於伺服器端算繪，則您可以使用用戶端提示資料在伺服器上設定初始值。舉例來說，useNetworkStatus() 掛鉤可以使用用戶端提示傳遞的初始值進行伺服器端算繪，並在用戶端執行時，在網路有效類型變更時自行更新。
使用網路平台 API (網路資訊、裝置記憶體和硬體並行) 實作 React 自動調整式載入掛鉤和公用程式。您可以使用相同的 API，將自動調整式載入概念套用至其他架構和程式庫，例如 Angular、Vue 等。
自動調整式載入實際運作情形
本節提供一個示範，說明如何使用自動調整載入功能，以及 Facebook、eBay、Tinder 等網站的實際範例。
React 電影示範瞭如何根據網路狀態調整媒體放送。這是用來瀏覽電影的應用程式，會顯示海報、摘要和演員陣容。根據使用者的有效連線類型，其可透過快速連線和低品質海報提供高品質的海報。
Twitter 提供數據節省模式，可減少數據用量。在這個模式下，預覽圖片會以低解析度載入，但只有在你輕觸預覽畫面時，才會載入大型圖片。啟用這個選項後，iOS 和 Android 的使用者省下了 50% 的圖片數據用量，而網路上的使用者則省下了 80%。這是 React 示範，其中使用「Save Data ook」來複製 Twitter 時間軸。請嘗試開啟開發人員工具的「Network」面板，查看在停用「Save Data」和啟用「Save Data」時捲動時轉移的資料量差異。
eBay 會在使用者的硬體或網路條件未妥善支援時，依條件開啟或關閉縮放等功能。為此，您可以自動調整程式碼分割和程式碼載入功能，藉此有條件地載入更多互動性更高的元件，或在高階裝置上執行需要大量運算的作業，同時避免將這些指令碼傳送至速度較慢的裝置。請觀看 16 分鐘的影片，讓小艾在示範 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 開發人員高峰會的演講影片：