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

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 は、コンテンツ配信を最適化し、モノリシック リクエストを回避するのに役立ちます。ページ読み込みの高速化で、Jake Archibald が lie-fi の追跡方法について詳しく説明しています。

フィードバック