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

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 Tuesdays を設けて、2G を利用するユーザーが自社製品を使用する方法を理解できるようにもしています。火曜日には、2G 接続をシミュレートするオプションを提供するポップアップが表示されます。

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

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: 柔軟な PWA ライブラリ」をご覧ください。

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

フィードバック