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

接続状態が悪く不安定なときのアプリまたはサイトの操作性を把握して、それに応じてアプリやサイトを構築することが重要です。これに役立つさまざまなツールがあります。

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

モバイル端末でウェブを利用する人の割合はますます増えています。自宅でも、多くの人が固定ブロードバンドからモバイルに移行しています

これに関連して、接続が不安定な場合のアプリまたはサイトの操作性を理解しておくことが重要です。低帯域幅と高レイテンシエミュレートおよびシミュレートするためのさまざまなソフトウェア ツールが用意されています。

ネットワーク スロットリングのエミュレート

サイトを構築またはアップデートするときには、さまざまな接続条件で十分なパフォーマンスが得られることを確認する必要があります。これに役立つツールがいくつかあります。

ブラウザツール

Chrome DevTools では、Chrome DevTools の [Network] パネルのプリセットまたはカスタム設定を使用して、さまざまなアップロード/ダウンロード速度とラウンドトリップ時間でサイトをテストできます。

Chrome DevTools スロットリング

システムツール

Network Link Conditioner は、Xcode 用の Hardware IO Tools をインストールしている場合に、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 ネットワークでサイトを実行してみたり、米国内の都市からケーブル経由で実行してみたりすることができます。

WebPagetest の設定

場所を選択し、拡張設定から接続タイプを選択します。スクリプト(たとえば、サイトへのログイン用の)を使用したり、RESTful API を使用したりして、テストを自動化することもできます。これにより、ビルドプロセスやパフォーマンスのログ記録に接続テストを組み込むことができます。

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

Fiddler プロキシ

問題のあるネットワークでのテスト

ソフトウェアおよびハードウェア プロキシを使用すると、帯域幅スロットル、パケット遅延、ランダム パケットロスといった、問題のあるモバイル ネットワークの状態をエミュレートできます。共有プロキシまたは問題のあるネットワークにより、デベロッパー チームは、ワークフローに現実のネットワーク状態のテストを組み込むことができます。

Facebook の Augmented Traffic Control (ATC)は、トラフィックを形成し、問題のあるネットワークの状態をエミュレートするために使用できる、BSD ライセンスが付与された一連のアプリケーションです。

Facebook の Augmented Traffic Control

Facebook は 2G Tuesdays を設けて、2G を利用するユーザーが自社製品を使用する方法を理解できるようにもしています。毎週火曜日に、従業員にポップアップが表示され、2G 接続をシミュレートするためのオプションが示されます。

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

Charles プロキシの帯域幅とレイテンシの設定

Charles の詳細については、codewithchris.com を参照してください。

不安定な接続や "lie-fi" への対応

lie-fi とは

lie-fi という用語は、少なくとも 2008 年(電話がこのような形だった頃です)から使用されており、見た目の振る舞いと実状が異なる接続を指します。ブラウザは、なんらかの理由で実際には接続されていないのに、接続されているかのように振る舞います。

接続されていると間違って解釈すると、ブラウザ(または JavaScript)はリソースを取得しようとし続け、諦めて現実的な代替手段を選ぶことがないため、エクスペリエンスが低下します。実際、lie-fi はオフラインより問題である場合があります。少なくとも端末が完全にオフラインであれば、JavaScript は適切な回避策をとることができます。

モバイルに移行し、固定ブロードバンドから離れる人が増えるのに伴い、lie-fi はより大きな問題となる可能性があります。最近の米国での調査データは、固定ブロードバンドからの移行を示しています。次のグラフは、2015 年と 2013 年における自宅でのモバイル インターネットの使用を示しています。

固定ブロードバンドからモバイルへの移行(特に低所得層で顕著)を示す米国での調査データのグラフ

タイムアウトを使用した断続的な接続の処理

過去には、断続的な接続のテストに XHR を使用したお粗末な方法 が使用されていましたが、Service Worker を使用すれば、より信頼性の高い方法でネットワーク タイムアウトを設定できます。Jeff Posnick が、sw-toolbox のタイムアウトを使用してこれを実現する方法について、プレゼンテーション Instant Loading with Service Workers で説明しています。

toolbox.router.get(
  '/path/to/image',
  toolbox.networkFirst,
  {networkTimeoutSeconds: 3}
);

Fetch API でも、タイムアウト オプション が計画されています。また、Streams API は、コンテンツ配信を最適化して、モノリシック リクエストを回避するのに役立ちます。Supercharging page load で、Jake Archibald が lie-fi の追跡方法について詳しく説明しています。