Chromeでネットワーク速度を遅くする方法【開発者向け・スロットリング完全ガイド】

「なぜわざわざネットワークを遅くする必要があるの？」と疑問に思う方もいるかもしれませんね。

実は、ウェブサイトやアプリを開発する際、高速なネット環境だけでテストしていると大きな問題が起こることがあるんです。ユーザーの中には、低速回線やモバイル通信を使っている人も多くいます。そういった環境でも快適に使えるかを確認するために、意図的にネットワーク速度を遅くしてテストする必要があるんです。

Chromeには「ネットワークスロットリング」という機能が標準で搭載されています。この機能を使えば、3G回線や4G回線、さらには超低速回線まで、様々な通信環境を簡単にシミュレートできます。

この記事では、Chromeでネットワーク速度を遅くする方法を、初心者の開発者にも分かりやすく解説していきます。ウェブサイトのパフォーマンステストに役立ててくださいね！

ネットワークを遅くする理由と用途
Chrome DevToolsでの基本設定
カスタムスロットリングプロファイルの作成
拡張機能を使った高度な制限
1. おすすめ拡張機能：Throttle
2. Network Speed Simulator
コマンドラインでのスロットリング設定
1. Chromeの起動オプション
スロットリング使用時のベストプラクティス
実際の活用例とワークフロー
トラブルシューティング
よくある質問と回答
まとめ：効果的なパフォーマンステストを

ネットワークを遅くする理由と用途

まず、なぜ意図的に回線を遅くする必要があるのか理解しましょう。

開発・テストでの必要性

高速回線だけでテストしていると、見落としがちな問題があります。

よくある問題

1. 読み込み時間が長すぎる

高速回線：一瞬で表示される
低速回線：30秒以上かかる

ユーザーは待ちきれずにページを閉じてしまいます。

2. 画像が重すぎる

高速回線：気づかない
低速回線：データ通信量を大量消費

スマホユーザーの通信制限を引き起こす原因になるんです。

3. エラー処理の不備

高速回線：通信が途切れない
低速回線：タイムアウトエラーが頻発

適切なエラーハンドリングができていないと、ユーザーが困ってしまいますね。

スロットリングとは

「スロットリング（Throttling）」とは、意図的に速度を制限することです。

ネットワークスロットリングの仕組み

Chromeが通信速度を制限して：

ダウンロード速度を遅くする
アップロード速度を遅くする
遅延（レイテンシ）を追加する

実際の低速回線環境を再現できるんです。

どんな場面で使うのか

1. ウェブサイト開発

ページの読み込み速度テスト
画像の最適化確認
プログレッシブ表示の検証

2. モバイルアプリ開発

低速回線での動作確認
オフライン対応のテスト
データ使用量の測定

3. パフォーマンス改善

ボトルネックの特定
最適化の効果測定
ユーザー体験の向上

4. 品質保証（QA）

様々な環境での動作確認
エッジケースのテスト
バグの発見

開発者にとって必須のテスト環境なんですね。

Chrome DevToolsでの基本設定

最も簡単で標準的な方法から見ていきましょう。

DevToolsの起動方法

Chrome Developer Tools（デベロッパーツール）を開きます。

ショートカットキー

Windows：F12 または Ctrl + Shift + I
Mac：Command + Option + I

メニューから開く

Chromeの右上「︙」をクリック
「その他のツール」にカーソルを合わせる
「デベロッパーツール」を選択

画面の右側または下部にDevToolsが表示されます。

Networkタブを開く

DevToolsが開いたら、上部のタブから「Network」を選択してください。

Networkタブでできること

通信内容の確認
読み込み時間の測定
リクエストの詳細表示
ネットワーク速度の制限

このタブがスロットリングの中心になります。

スロットリングの有効化

手順

Networkタブの上部にある「No throttling」と書かれたドロップダウンをクリック
プリセットから速度を選択

利用可能なプリセット

Fast 3G（高速3G）

ダウンロード：1.6 Mbps
アップロード：750 Kbps
レイテンシ：562.5 ms
比較的速いモバイル回線

Slow 3G（低速3G）

ダウンロード：400 Kbps
アップロード：400 Kbps
レイテンシ：2000 ms
かなり遅い環境

Offline（オフライン）

完全に通信を遮断
オフライン動作のテストに最適

選択すると、即座にその速度に制限されます。

実際の動作確認

設定が反映されているか確認しましょう。

確認手順

スロットリングを「Slow 3G」に設定
ページをリロード（F5またはCtrl + R）
Networkタブで読み込み時間を確認

見るべきポイント

Total time（合計時間）：全体の読み込み時間
DOMContentLoaded：HTMLの解析完了時間
Load：すべてのリソースの読み込み完了時間

普段より明らかに遅くなっていれば、設定が正しく機能しています。

カスタムスロットリングプロファイルの作成

プリセット以外にも、独自の速度設定を作れます。

カスタムプロファイルの設定方法

手順

Networkタブのスロットリングドロップダウンをクリック
「Add…」または「カスタムを追加」を選択
新しいプロファイル設定画面が開く

設定項目

Profile name（プロファイル名）

分かりやすい名前を付ける
例：「4G LTE」「弱いWi-Fi」「海外ローミング」

Download（ダウンロード速度）

単位：Kbps または Mbps
受信速度を制限

Upload（アップロード速度）

単位：Kbps または Mbps
送信速度を制限

Latency（レイテンシ/遅延）

単位：ミリ秒（ms）
通信の往復時間

実用的なカスタム設定例

4G LTE（良好）

ダウンロード：20 Mbps
アップロード：10 Mbps
レイテンシ：50 ms

4G（普通）

ダウンロード：10 Mbps
アップロード：5 Mbps
レイテンシ：100 ms

弱いWi-Fi

ダウンロード：2 Mbps
アップロード：1 Mbps
レイテンシ：150 ms

混雑した公衆Wi-Fi

ダウンロード：1 Mbps
アップロード：500 Kbps
レイテンシ：300 ms

海外ローミング（悪条件）

ダウンロード：500 Kbps
アップロード：256 Kbps
レイテンシ：500 ms

プロジェクトの想定ユーザー環境に合わせて設定しましょう。

プロファイルの管理

作成したプロファイルは保存され、いつでも使えます。

編集・削除

スロットリングドロップダウンを開く
「Edit…」または「編集」を選択
プロファイルの一覧が表示される
編集したいプロファイルを選んで変更
または右側のゴミ箱アイコンで削除

よく使う設定をいくつか作っておくと便利ですよ。

拡張機能を使った高度な制限

DevTools以外の方法もあります。

おすすめ拡張機能：Throttle

より細かい制御ができる拡張機能です。

特徴

ワンクリックでオン/オフ
複数のプリセット
パケットロス（通信の失敗）のシミュレート
特定のサイトだけに適用可能

インストール方法

Chromeウェブストアで「Throttle」を検索
「Chromeに追加」をクリック
ブラウザ右上にアイコンが表示される

使い方

拡張機能アイコンをクリック
速度プリセットを選択
「Enable」をクリック

DevToolsを開かなくても使えるのが便利ですね。

Network Speed Simulator

別の選択肢として、この拡張機能もあります。

特徴

シンプルなUI
よく使う回線速度のプリセット
軽量で動作が速い

設定できる速度

GPRS（超低速）
2G
3G
4G
DSL
Wi-Fi

用途に応じて選べますよ。

コマンドラインでのスロットリング設定

起動時から制限をかける方法もあります。

Chromeの起動オプション

コマンドラインから特定のオプション付きでChromeを起動できます。

Windowsの場合

コマンドプロンプトまたはPowerShellで：

chrome.exe --force-prefers-reduced-motion --enable-network-information-downlink-max=0.5

Macの場合

ターミナルで：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --force-prefers-reduced-motion --enable-network-information-downlink-max=0.5

主なオプション

--enable-network-information-downlink-max

最大ダウンロード速度を設定（Mbps単位）
例：0.5 = 500 Kbps

注意点

この方法は少し上級者向けです。通常はDevToolsを使う方が簡単で確実ですね。

スロットリング使用時のベストプラクティス

効果的にテストするためのコツを紹介します。

1. 複数の速度でテストする

一つの速度だけでなく、様々な環境を試しましょう。

推奨テストパターン

高速環境

光回線（制限なし）
4G LTE

中速環境

4G（通常）
弱いWi-Fi

低速環境

3G
Slow 3G

極端な環境

Offline
超低速（カスタム）

幅広くテストすることで、すべてのユーザーに対応できます。

2. キャッシュの影響を考慮

ブラウザキャッシュがあると、実際より速く表示されることがあります。

正確なテスト方法

Networkタブで「Disable cache」にチェック
ページをリロード
初回訪問時の体験を再現

シークレットモードの活用

Ctrl + Shift + N でシークレットウィンドウを開く
DevToolsを開いてスロットリング設定
テストしたいURLにアクセス

キャッシュのない状態でテストできます。

3. 実機でも確認

シミュレーションだけでなく、実際のデバイスでもテストしましょう。

なぜ実機が必要か

CPU性能の違い
メモリ容量の違い
画面サイズの違い

これらはスロットリングでは再現できません。

実機テストの方法

Android

USBデバッグを有効化
Chromeでリモートデバッグ
実際のモバイル回線でテスト

iPhone

Safariの開発メニューを有効化
Macから接続してデバッグ
モバイルデータ通信でテスト

シミュレーション+実機の組み合わせが理想的です。

4. パフォーマンス指標を記録

テスト結果を記録して改善に活かしましょう。

測定すべき指標

LCP（Largest Contentful Paint）

最も大きなコンテンツが表示されるまでの時間
目標：2.5秒以内

FID（First Input Delay）

ユーザーの最初の操作への応答時間
目標：100ミリ秒以内

CLS（Cumulative Layout Shift）

レイアウトのズレの累積
目標：0.1以下

測定方法

DevToolsのLighthouseタブを開く
スロットリング設定を適用
「Generate report」をクリック

詳細なパフォーマンスレポートが生成されます。

実際の活用例とワークフロー

具体的な使用例を見ていきましょう。

例1：画像最適化のテスト

重い画像を軽量化する効果を確認します。

手順

Slow 3Gに設定
最適化前のページを開く
読み込み時間を記録（例：15秒）
画像を圧縮・最適化
再度同じ条件でテスト
改善効果を確認（例：8秒に短縮）

画像最適化のヒント

WebP形式の使用
適切なサイズにリサイズ
遅延読み込み（Lazy Loading）の実装

数値で改善を確認できるのが良いですね。

例2：プログレッシブ表示の検証

段階的に表示される仕組みが機能しているか確認します。

チェックポイント

Fast 3Gに設定
ページをリロード
以下の順序で表示されるか確認

まず：テキストコンテンツ
次に：重要な画像
最後に：装飾的な要素

改善策

Critical CSS（重要なスタイル）の抽出
フォントの最適化
非同期読み込みの実装

ユーザーが待たされる感覚を減らせます。

例3：フォーム送信のテスト

通信中のユーザー体験を改善します。

テスト内容

Slow 3Gに設定
フォームに入力して送信
以下を確認

送信ボタンは無効化されるか
ローディング表示が出るか
エラー時の処理は適切か
タイムアウト処理はあるか

UXの改善

送信中は明確な表示を出す
二重送信を防ぐ
適切なタイムアウト時間を設定
エラー時は分かりやすいメッセージ

低速回線でもストレスなく使えるようになります。

例4：動画配信サイトのテスト

動画コンテンツの最適化を確認します。

テスト項目

様々な速度で動画再生
適切な画質に自動調整されるか
バッファリング（読み込み待ち）の頻度
再生開始までの時間

改善ポイント

アダプティブビットレート（速度に応じた画質調整）
プリロード戦略
CDNの活用

ユーザーのデータ通信量も節約できますよ。

トラブルシューティング

スロットリング使用時の問題と解決方法です。

問題1：設定したのに速度が変わらない

原因と対処法

1. キャッシュが効いている

「Disable cache」にチェック
または Ctrl + Shift + R で強制リロード

2. DevToolsが閉じられた

DevToolsを開いたままにする
閉じると設定がリセットされる

3. 別のタブに適用されていない

スロットリングはDevToolsを開いているタブだけに適用
各タブで個別に設定が必要

4. 拡張機能との競合

他のネットワーク関連拡張機能を一時的に無効化

問題2：速度が遅すぎてタイムアウトする

対処法

もう少し速いプリセットを選ぶ（Slow 3G → Fast 3G）
サーバー側のタイムアウト設定を延長
開発環境では一時的にタイムアウトを無効化

コードでの対応例

// タイムアウト時間を延長
fetch(url, {
  timeout: 30000 // 30秒
})

実際の製品版では適切な時間に戻しましょう。

問題3：特定のリソースだけ遅くしたい

DevToolsの標準機能では、すべての通信が一律に制限されます。

代替方法

1. ブロックリストを使う

Networkタブで右クリック
「Block request URL」
パターンを指定

特定のリソースを完全にブロックできます。

2. Service Workerで制御
プログラムで細かい制御が可能ですが、上級者向けです。

問題4：スロットリングを解除し忘れる

テスト後に設定を戻し忘れると、普段の作業が遅くなります。

防止策

1. 視覚的リマインダー

スロットリング有効時は、Networkタブに黄色い警告が出る
常にDevToolsの表示を確認

2. 専用プロファイル

テスト用に別のChromeプロファイルを作成
本番確認用と開発用を分ける

3. 拡張機能を使う

ワンクリックでオン/オフできる
アイコンの色で状態が分かる

習慣づけが大切ですね。

よくある質問と回答

Q1：スロットリングは正確ですか？

A：完全に正確ではありませんが、十分実用的です。

シミュレーションの限界

実際の回線の揺らぎは再現できない
パケットロスの完全な再現は難しい
ネットワークの混雑状況は考慮されない

ただし、基本的な低速回線の体験を理解するには十分な精度があります。

Q2：スロットリング中も他のタブは普通に使えますか？

A：はい、使えます。

DevToolsを開いているタブだけに適用されるので：

他のタブは通常速度
別のウィンドウも影響なし

テストと並行して調べ物もできますよ。

Q3：本番環境でもスロットリングは使えますか？

A：技術的には可能ですが、推奨しません。

使わない方が良い理由

開発者向けの機能
意図しない制限がかかる可能性
パフォーマンステストは開発環境で

本番サイトの速度改善には、Lighthouse等の分析ツールを使いましょう。

Q4：モバイル版Chromeでもスロットリングできますか？

A：スマホ版Chromeでは、直接的なスロットリング機能はありません。