低帯域幅と高レイテンシの理解

Sam Dutton

接続が不安定な場合、または信頼性が低い場合に、アプリやサイトを使用するとどうなるかを理解し、それに応じて構築することが重要です。さまざまなツールが役に立ちます。

低帯域幅と高レイテンシでテストする

モバイル デバイスでウェブにアクセスする 割合は増加しています。自宅でも 多くの人が固定ブロードバンドをやめてモバイルに移行しています。

そのため、接続が不安定な場合や信頼性が低い場合に、アプリやサイトを使用するとどうなるかを理解することが重要です。低帯域幅と高レイテンシのエミュレートとシミュレーションには、さまざまなソフトウェア ツールが役立ちます。

ネットワーク スロットリングをエミュレートする

サイトを構築または更新する際は、さまざまな接続条件で十分なパフォーマンスを確保する必要があります。便利なツールはいくつかあります。

ブラウザツール

Chrome DevTools では、[Network] パネルのプリセットまたはカスタム設定を使用して、さまざまなアップロード速度/ダウンロード速度とラウンドトリップ時間でサイトをテストできます。基本については、ネットワーク パフォーマンスの分析を始めるをご覧ください。

システム ツール

Network Link Conditioner は、Xcode 用の Hardware IO Tools をインストールした場合に Mac で使用できる設定パネルです。

デバイス エミュレーション

Android Emulator を使用すると、Android でアプリ（ウェブブラウザやハイブリッド ウェブアプリなど）を実行しているときに、さまざまなネットワーク状態をシミュレートできます。

iPhone の場合、Network Link Conditioner を使用して、障害のあるネットワーク状態をシミュレートできます（上記参照）。

さまざまな場所とネットワークからテストする

接続パフォーマンスは、サーバーのロケーションとネットワークの種類によって異なります。

WebPagetest は、さまざまなネットワークとホストの場所を使用して、サイトのパフォーマンス テストを実行できるオンライン サービスです。たとえば、インドにあるサーバーから 2G ネットワークを介してサイトをテストする場合や、米国の都市をケーブルを介して接続する場合などです。

ロケーションを選択し、詳細設定から接続タイプを選択します。スクリプト（サイトへのログインなど）や RESTful API を使用して、テストを自動化することもできます。これにより、ビルドプロセスやパフォーマンス ロギングに接続テストを含めることができます。

Fiddler は、GeoEdge を介したグローバル プロキシをサポートしており、そのカスタムルールを使用してモデム速度をシミュレートできます。

障害のあるネットワークでテストする

ソフトウェア プロキシとハードウェア プロキシを使用すると、帯域幅スロットリング、パケット遅延、ランダム パケットロスなど、問題のあるモバイル ネットワーク状態をエミュレートできます。共有プロキシやネットワーク障害が存在すると、デベロッパー チームはワークフローに実際のネットワーク テストを組み込むことができます。

Facebook の Augmented Traffic Control（ATC）は、BSD ライセンスが付与されたアプリのセットで、トラフィックのシェーピングや、障害が発生したネットワーク状態のエミュレートに使用できます。

Facebook では、2G を利用する人々が自社のサービスをどのように利用しているかを把握するために、2G Tuesdays を開催しています。毎週火曜日には、2G 接続をシミュレートするオプションを示すポップアップが従業員に表示されます。

Charles HTTP/HTTPS プロキシを使用して、帯域幅とレイテンシを調整できます。チャールズは商用ソフトウェアですが、無料トライアルを利用できます。

Charles について詳しくは、codewithchris.com をご覧ください。

不安定な接続と Lie-Fi への対応

Lie-Fi とは

Lie-fi という用語は、少なくとも 2008 年（スマートフォンがこのように見えるもの）にまでさかのぼり、見た目とは異なる接続を指します。ブラウザは、なんらかの理由で接続されていない場合でも、接続しているかのように動作します。

接続を間違って解釈すると、ブラウザ（または JavaScript）はあきらめて適切なフォールバックを選択するのではなく、リソースを取得しようとし続けるため、エクスペリエンスが低下する可能性があります。Lie-Fi は、実際にはオフラインよりも危険です。少なくとも、デバイスが明らかにオフラインであれば、JavaScript は適切な回避措置を講じることができます。

モバイルに移行して固定ブロードバンドから離れる人が増えれば、Lie-Fi はより大きな問題になる可能性があります。最近の米国国勢調査データは、固定ブロードバンドからの脱却を示しています。次のグラフは、家庭でのモバイル インターネット利用状況を 2015 年と 2013 年で比較したものです。

タイムアウトを使用して断続的な接続を処理する

これまで、断続的な接続のテストには XHR を使用するハッキーな方法が使用されていましたが、Service Worker を使用すると、より信頼性の高い方法でネットワーク タイムアウトを設定できます。これは、わずか数行のコードで Workbox を使用して実現できます。

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

Workbox の詳細については、Jeff Posnick による Chrome Dev Summit の講演「Workbox: Flexible PWA Libraries」をご覧ください。

また、Fetch API 用のタイムアウト機能も開発中です。Streams API は、コンテンツ配信を最適化し、モノリシック リクエストを回避するために役立ちます。Lie-Fi への取り組みについては、Jake Archibald 氏がページの読み込み機能の強化で詳しく説明しています。

フィードバック