Google Chromeのデベロッパーツール（開発者ツール）で回線速度をスマホ並みの速度（3G、4G）に変更してサイトの読み込みをシミュレートする方法です。
パソコン用のインターネット回線（Wi-Fi）でサイト編集していると、通信速度が速すぎてサイトが読み込まれる様子が分からない事があると思います。
そんな時はデベロッパーツールの設定を変更すれば、3G相当の通信速度に変更することができます。特にスマホでの読み込みを検証したい時に便利です。
スマホの実機に相当する任意の通信速度に設定、変更する方法も紹介します！
この記事の目次
Chromeの開発者ツールで回線速度を変更する
この記事ではChromeのデベロッパーツール（開発者ツール）で回線速度を変更する方法として、以下２つの方法をご紹介します。
- Chromeにある既存の設定値から3G相当の回線速度に変更する方法。
- 任意の通信速度を設定し、実機の4G相当の回線速度に変更する方法。
Webサイトはパソコンを使って開発するのが一般的だと思いますが、時にパソコン用のインターネット回線では“通信速度が速すぎる”という事があります。
例えば、サイトを開いた瞬間のレイアウトシフト（CLS）の様子を確認したい時や、画像が遅延読み込みされている様子を確認したい時などですかね。
この時ページの読み込み速度が速すぎると視覚的に良く分からなかったりします。
また、Chromeにはスマホのレスポンシブを確認できる機能もありますが、この機能を使っているだけではブラウザの回線速度は使用中のパソコンの速度になります。
スマホでのシュミレートを本格的に行いたいなら、Chromeの回線速度も3Gか4G相当の速度に変更した状態で検証したいところです。
当記事ではそんな時に使うべき、Chromeの回線速度の変更方法をご紹介します。
ではさっそく見ていきましょう・ｗ・
Chromeのデベロッパーツールで3Gを使う方法
Chromeのデベロッパーツールには初めから「Fast 3G」と「Slow 3G」という２種類のプリセットが用意されています。これを使って回線速度を3Gに変更してみます。
ではChromeのデベロッパーツールを起動しましょう。
右クリック→検証
サイトを開き、右クリックのメニューから「検証」を押してデベロッパーツールを立ち上げます。
「Network」タブからWi-Fiマーク？を押す
デベロッパーツールが起動したら、続いて「Network」というタブに移動します。
そしてWi-Fiアイコン()と設定アイコン()を合体したようなボタンを押しましょう。
「Network throttling」で3Gを選ぶ
すると「Network conditions」という画面がデベロッパーツール上に開きます。
「Network throttling」という項目で3Gが選べるかと思います。
参考
執筆時の筆者の環境では「Fast 3G」と「Slow 3G」の２種類でしたが、Chromeのバージョンによっては異なることがあるかもしれません。
「Slow 3G」はあまりにも遅いので、ここでは「Fast 3G」を選びました。
回線速度変更中は「Network」タブに注意マークが出る
これでデベロッパーツールを開いている間だけ、Chromeの通信速度が3G相当になります。ツール画面を閉じてしまうと元の回線速度に戻るので注意しましょう。
また、回線速度を変更している最中はデベロッパーツールの「Network」タブの横に注意マークが付きます。この状態なら回線速度は変更されています。
後述しますが、検証後は「No throttling」に戻す必要があります。
あとはページをリロードすれば3G回線の遅さでサイトが読み込めます。
4Gなど任意の回線速度に変更する方法
デベロッパーツールで3G相当の回線速度が使えれば、インターネット速度が速すぎてデバッグしにくい…という問題は解決するはずです。
しかし、手元にあるスマートフォン等の実機に相当する4G回線をデベロッパーツールで使いたい時もあるはずです。このようにプリセット以外の回線を使いたい場合は、自分で任意の回線を追加して同じように使用することができます。
ここでは手元にあるiPhoneの4G相当になる回線を追加してみます。
スマホ実機に相当する回線、4Gを追加する
先ほどの手順同様、デベロッパーツールを起動したらNetworkタブを開き、通信速度の設定画面を開きます。
「Network throttling」でAdd...を選ぶ
続いて「Network throttling」の項目で「Add...」に進みましょう。
使いたいプロファイル（回線）を追加する
Network Throttling Profilesという画面が開きます。
ここで「Add custom profile...」を押せば任意の回線を追加できるメニューが出ます。
あとはそれぞれの項目に回線の下り値、上り値、応答速度を入力すれば良いのですが、手元にあるiPhoneの4G回線がどの程度の通信速度なのか分かりません。
という事でオンラインサービスを使って調べます。
実機（スマホ）の回線速度を調べる
Chromeで回線を追加するのに必要な回線の情報は以下の３つです。
| Download | ダウンロード速度、通称：下り値 |
| Upload | アップロード速度、通称：上り値 |
| Latency | 通信の遅延時間：Pingとも呼ばれる |
上の３つの情報が分かれば良いです。
手元のiPhoneの4G回線の通信速度を調べるのにあたり、今回はUSEN GATE 02という以下のサイトを使わせていただきました。
早速、スマホでアクセスして測定してみたところ以下のような結果になりました。
| Download：ダウンロード速度 | 4.96Mbps |
| Upload：アップロード速度 | 5.06Mbps |
| Latency：通信の遅延時間 | 46ms |
Download、Uploadはともに5Mbps程度でした。田舎なのでｒｙ
PINGがChromeでいう「Latency：レイテンシ」の項目になります。
この測定結果を元にデベロッパーツールに4Gを追加します。
Chromeの設定値はkbit/sなので注意する
あとは先ほど開いたデベロッパーツールのNetwork Throttling Profilesで実機に相当する4Gのプロファイルを作成するだけです。
「Mbps→kbit/s」に変換するには1024倍する
デベロッパーツールの入力画面は単位が「Mbps」ではなく「kbit/s」になっているので注意して入力しましょう。
「Mbps→kbit/s」に変換するには1024倍すればOKです。
ポイント
厳密には1024倍ですが、計算が面倒なら1000倍でもOK！
1000倍なら計算は楽ですが、メガバイトとキロバイトの計算が良く分からない人は適宜オンラインの変換サービスを使いましょう。
Profile Nameは自分が分かりやすいものでOKです。
入力し終えたら「Add」ボタンを押せば4Gの追加作業は完了です！
プロファイルは簡単に編集・削除できる
今回作成した実機のスマホを元にした4G回線の設定はこんな感じになりました。
なお、プロファイルは後から簡単に編集・削除することが可能です。
追加した4G回線を使う
プロファイルの追加が完了したら早速使ってみます。
作成したプロファイルは「Network throttling」に追加されます。
「Network throttling」で作成したプロファイルを選ぶ
デベロッパーツールの回線速度変更画面を開いたあと、Network throttlingで自分が作成したプロファイルを選ぶだけです。
作成した4G並みの回線速度になる
実際に試してみたのですが、手元のスマホとほぼ同じ速度でサイトが読み込まれることが確認できました！（当たり前ｗ）
変更した通信速度をデフォルトに戻す方法
通信速度を変更した状態だと、デベロッパーツールを起動している限り全てのサイトが適用した回線速度で読み込まれます。
なので、3Gや4Gでの通信が不要になったら元に戻しましょう。
「No throttling」がデフォルト値
Networkの設定で「No throttling」を選べば、デベロッパーツールの回線速度が元に戻ります。3G、4Gのままだと通信速度が遅すぎるのですぐに分かりますけどね！
余談ですが「throttle：スロットル」は絞り弁という意味で、何かを少なく調整する時によく使われます。プログラミングでも処理を間引きしたりするのに使われます。
車やバイクのインマニについてるスロットルも同じ感ｚ…
No throttling、Fast 3G、4Gの速度比較
最後に「No throttling（速度変更なし）」と「Fast 3G」、そして今回作成したスマホの実機に相当する「4G」それぞれでサイトの読み込み速度を比較してみました。
結果は以下のGIFのようになりました。
No throttling（ブラウザデフォルト値、Wi-Fi）
No throttlingでの読み込み（GIF）
Fast 3G（既存のプロファイル）
Fast 3Gでの読み込み（GIF）
iPhone 4G（実機を元にしたオリジナルプロファイル）
作成したiPhone 4Gでの読み込み（GIF）
こんな感じです。
デベロッパーツールの回線速度を3Gや4Gに落とすことで、Wi-Fi環境では一瞬で読み込まれる画像でも、遅延読み込みされている様子が良く分かるようになります。
見ての通り「Fast 3G」でもしょせん3G回線相当の速度なので、パソコンでは使い物になりません。「Slow 3G」はもっと遅い設定ですが、適宜使い分けましょう！
まとめ
以上、Google Chromeのデベロッパーツールで回線速度を3Gや、実機のスマホに相当する4Gに変更する方法でした。
スマホでのレスポンシブを本格的に確認したい時や、サイトにアクセスした瞬間にどの部分からどのように読み込まれているのかを視覚的に確認したい時に便利な方法かと思います。
モバイル向けにアクセス速度を改善する時なども是非ご活用下さい！
ではではこのへんで・ｗ・
