瞭解低頻寬和高延遲時間

請務必瞭解在連線不穩定或不穩定的情況下,使用應用程式或網站的感受,然後據此進行建構。有一系列工具可以派上用場

以低頻寬和高延遲時間進行測試

越來越多的使用者在行動裝置上瀏覽網頁。即使在家, 也有許多人捨棄行動裝置的固定寬頻

在這種情況下,請務必瞭解連線不穩定或不穩定時,使用應用程式或網站的感受。我們有一系列的軟體工具可協助您模擬低頻寬和高度延遲時間

模擬網路節流

建立或更新網站時,您必須在各種連線條件下確保效能良好。有幾項工具能助您一臂之力。

瀏覽器工具

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

Chrome 開發人員工具節流

系統工具

如果安裝 Xcode 的硬體 IO 工具,Network Link Conditioner 是 Mac 上的偏好設定面板:

Mac Network Link Conditioner 控制台

Mac Network Link Conditioner 設定

Mac Network Link Conditioner 自訂設定

裝置模擬

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

Android Emulator

Android Emulator 設定

如為 iPhone,Network Link Conditioner 可用來模擬網路狀況不佳的情況 (請見上方說明)。

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

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

線上服務 WebPagetest 可讓您使用各種網路和主機位置為您的網站執行一組效能測試。舉例來說,您可以透過印度境內伺服器 (2G) 連上 2G 網路,或是透過美國城市的纜線測試網站。

WebPagetest 設定

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

Fiddler 透過 GeoEdge 支援全域 Proxy,而且其自訂規則可用來模擬模組速度:

Fiddler Proxy

以不佳的網路進行測試

軟體和硬體 Proxy 可讓您模擬有問題的行動網路狀況,例如頻寬節流、封包延遲和隨機封包遺失情形。共用 Proxy 或不佳的網路可讓開發人員團隊將真實世界的網路測試納入工作流程中。

Facebook 的 Augmented Traffic Control (ATC) 是一組 BSD 授權的應用程式,可用來控制流量和模擬不佳的網路狀況:

Facebook 的擴增流量控管功能

Facebook 甚至設立了 2G Tuesdays 來瞭解在 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。

意見回饋: