ユーザー体験をより良くするためにGoogle Chrome DevToolsで通信を制限して検証する

こんにちは、いわむらです
今回はGoogle ChromeのDevToolsで通信を制限することができるの知って最近よく使うようになったのでそちらをご紹介できればなと思います


最初に4G通信とwifiを利用した通信にどれぐらいの差があるかを知らなかったので本題のご紹介前に載せておきます

上り 下り レイテンシ
wifi 270Mbps 280Mbps 15ms
4G 20Mbps 41Mbps 1000ms

netflix提供の回線の速度テスト できるサイト使って、自宅のwifiと、スマホで帯域を測ってみました
実際にGoogle ChromeのDevToolsを使ってnetworkタブのthrottleを変更することで数値としてどれぐらい差が出て表示されるか計測してみようと思います

今回は弊社のコーポレートサイトを利用して確認します

特に何も絞ることなく表示すると約600msで表示されました(disable cacheはチェックしました)

では4Gを想定した状態でnetworkタブにthrottleを追加します

特にthrottleを追加していないとNo throttlingの選択状態になっている箇所があると思うのでこちらに確認したい状態の設定を追加して選択しましょう

選択肢を開くとaddの項目があるので自身の追加したい項目を追加します

追加した後に元のnetworkタブに戻ることで選択することができます

選択してどれぐらいかかるか試してみると約1200msでした

600msの差で表示されることがわかりました

通信を絞るだけではなくCPUの性能も絞ることでより近いパフォーマンス図れそうだったのでPerformanceタブの方で計測する方法も記事にしたいなと思います。

ちなみにthrottleという単語の意味が最初わからず辞書を引いたら絞り弁 とか 絞める っていうのを知ってより理解しやすかったので知らない英単語はふわっと使うより一度調べてみるのも大事だなと思いました