#「自分のPCでは速いのに、ユーザーから遅いと言われる」問題

開発中のWebサイト、手元ではサクサク動いていませんか？

それは当然です。開発環境は通常、高速なネットワークに接続されています。しかし、実際のユーザーは様々な環境からアクセスしています：

  • 通勤中の電車内（不安定な4G/3G）
  • カフェの混雑したWi-Fi
  • 格安SIMの速度制限中
  • 海外からの高レイテンシ接続

「自分の環境では問題ないのに」と言っても、ユーザーには響きません。ユーザー環境での体験を開発中に確認できるのが、DevToolsのNetwork Throttling機能です。

#基本的な使い方

#手順1: DevToolsを開く

  • Mac: Cmd + Option + I
  • Windows/Linux: F12 または Ctrl + Shift + I

#手順2: Networkタブを選択

DevToolsの上部タブから「Network」を選択します。

#手順3: Throttlingプリセットを選択

Networkタブの上部にあるドロップダウン（初期状態では「No throttling」と表示）をクリックし、シミュレートしたい速度を選択します。

#プリセット一覧

用意されているプリセットと、それぞれが想定するシーンは以下のとおりです：

プリセット速度レイテンシ想定シーン
Fast 4G4 Mbps60ms一般的なモバイル環境
Fast 3G1.5 Mbps560ms電波が弱い場所
Slow 3G750 Kbps2000ms速度制限中・混雑時
Offline0-オフライン動作テスト

まずは「Slow 3G」で試してみてください。普段とは全く違う体験になるはずです。

#試してほしい3つのシナリオ

#シナリオ1: キャッシュなしの初回訪問

新規ユーザーが初めてサイトを訪れたときの体験を確認します。

  1. DevToolsのNetworkタブを開く
  2. 「Disable cache」にチェックを入れる
  3. 「Slow 3G」を選択
  4. ページをリロード

画像やJavaScriptファイルの読み込みにどれくらい時間がかかるか観察してください。ファーストビューが表示されるまでに何秒かかりましたか？

#シナリオ2: API呼び出しの遅延

SPAでAPIからデータを取得している場合、レスポンスが遅いときのUIを確認します。

確認ポイント：

  • ローディングインジケーターは表示されているか？
  • 真っ白な画面のまま待たされていないか？
  • ユーザーが「動いていない」と思ってボタンを連打しないか？

#シナリオ3: フォーム送信

フォームの送信ボタンを押したあと、送信中であることがユーザーに伝わるか確認します。

  • 送信ボタンは無効化されているか？
  • プログレス表示や「送信中…」の表示はあるか？
  • タイムアウトしたときのエラーハンドリングは適切か？

#カスタムプロファイルの作成

プリセット以外の速度をテストしたい場合は、カスタムプロファイルを作成できます。

  1. ドロップダウンから「Add…」を選択
  2. プロファイル名を入力（例: “Target Region”）
  3. ダウンロード速度・アップロード速度・レイテンシを設定
  4. 「Add」をクリック

特定の国や地域のネットワーク環境を再現したいときに便利です。

#注意点

#完全な再現ではない

Throttlingはブラウザ内でのシミュレーションです。実際の低速回線では、パケットロスや接続の不安定さなど、速度以外の問題も発生します。あくまで「目安」として捉えてください。

#Service Workerに注意

Service Workerがキャッシュからレスポンスを返している場合、Throttlingの効果が見えないことがあります。Applicationタブから一時的に登録を解除してテストしてください。

#まとめ

Network Throttlingは、ユーザー環境を擬似的に体験できる手軽なツールです。

  • Slow 3Gでテストすると、パフォーマンスの問題が可視化される
  • ローディング表示やエラーハンドリングの不備に気づける
  • 開発フローに組み込むことで、リリース前に問題を発見できる

特にモバイルユーザーが多いサービスでは、「Fast 4G」や「Slow 3G」でのテストを定期的に行うことをおすすめします。「自分の環境では動いている」は、ユーザーにとっては無意味です。