瞭解低頻寬和高延遲時間

請務必瞭解在連線不穩定或不穩定的情況下,使用應用程式或網站時的感受,並視情況進行建構。您可以使用各種工具來解決問題。

使用行動裝置上網的使用者比例越來越高。即使在家中,許多人也都捨棄固定寬頻,改用行動寬頻

在這種情況下,請務必瞭解在連線品質不佳或不穩定時,使用者使用應用程式或網站的感受。您可以使用各種軟體工具模擬和模擬低頻寬和高延遲

建構或更新網站時,您必須確保在各種連線條件下,網站的效能都能達到一定水準。有幾項工具能助你一臂之力。

Chrome 開發人員工具可讓您使用預設值或網路面板中的自訂設定,以各種上傳/下載速度和往返時間測試網站。請參閱「開始使用網路效能分析」一文,瞭解基本概念。

Chrome 開發人員工具節流

系統工具

如果您為 Xcode 安裝硬體 IO 工具,Mac 上就會提供網路連結調節器偏好設定面板:

Mac 網路連結調節器控制台

Mac 網路連結調節器設定

Mac 網路連結調節器自訂設定

裝置模擬

Android Emulator 可讓您在 Android 上執行應用程式 (包括網頁瀏覽器和混合型網頁應用程式) 時,模擬各種網路連線狀況:

Android Emulator

Android Emulator 設定

針對 iPhone,您可以使用 Network Link Conditioner 模擬網路受損的情況 (請參閱上方說明)。

從不同地點和網路進行測試

連線效能取決於伺服器位置和網路類型。

WebPagetest 是一項線上服務,可透過各種網路和主機位置,為您的網站執行一系列效能測試。舉例來說,您可以透過位於印度的 2G 網路伺服器,或位於美國某個城市的有線網路,測試網站。

WebPagetest 設定

選取位置,然後在進階設定中選取連線類型。您甚至可以使用指令碼 (例如登入網站) 或RESTful API 自動化測試。這有助於將連線測試納入建構程序或效能記錄。

Fiddler 支援透過 GeoEdge 進行全球 Proxy 服務,其自訂規則可用於模擬數據機速度:

Fiddler Proxy

以受損的網路進行測試

軟體和硬體 Proxy 可讓您模擬有問題的行動網路狀況,例如頻寬限制、封包延遲和隨機封包遺失。共用 Proxy 或受損網路可讓開發團隊在工作流程中納入實際網路測試。

Facebook 的 Augmented Traffic Control (ATC) 是 BSD 授權的應用程式集合,可用於塑造流量並模擬受損的網路狀況:

Facebook 的擴增流量控管

Facebook 甚至還推出了 2G 星期二,瞭解使用 2G 的使用者如何使用產品。在星期二,員工會收到彈出式視窗,可選擇模擬 2G 連線。

Charles HTTP/HTTPS Proxy 可用於調整頻寬和延遲。Charles 是商業軟體,但提供免費試用版。

Charles Proxy 頻寬和延遲設定

如要進一步瞭解 Charles,請前往 codewithchris.com

處理不穩定的連線和「lie-fi」

什麼是「Lie-Fi」?

lie-fi」一詞最早出現於 2008 年 (當時的手機外觀如這款),指的是看似不相連的連線。瀏覽器會在沒有連線的情況下,假裝有連線。

由於瀏覽器 (或 JavaScript) 會持續嘗試擷取資源,而非放棄並選擇合理的備用方案,因此錯誤解讀的連線可能會導致使用者體驗不佳。Lie-fi 實際上可能比離線更糟;如果裝置確實處於離線狀態,JavaScript 就能採取適當的規避措施。

隨著越來越多人改用行動裝置且不使用固定寬頻,Lie-fi 也可能成為較重大的問題。近期的美國人口普查資料顯示,我們捨棄固定寬頻的比例。下圖比較 2015 年與 2013 年在家中使用行動網際網路的情況:

美國人口普查資料圖表顯示
行動裝置逐漸不再使用固定寬頻,特別是低收入家庭的用戶

使用逾時機制處理間歇性連線

過去,我們會使用使用 XHR 的駭客攻擊方法來測試間歇性連線,但服務工作架構可啟用更可靠的方法來設定網路逾時。只要使用 Workbox 和幾行程式碼,就能達成這項目標:

workboxSW.router.registerRoute(
  '/path/to/image',
  workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);

如要進一步瞭解 Workbox,請參閱 Jeff Posnick 在 Chrome 開發人員大會的演講「Workbox:靈活的 PWA 程式庫」。

我們也正在為 Fetch API 開發逾時功能,而 Streams API 應有助於最佳化內容傳送並避免單一要求。Jake Archibald 在「超級充電的網頁載入」一文中,進一步說明如何解決 lie-fi 問題。

意見回饋