なぜ帯域制限が必要か？
全ての人が必ずしも、光回線の速度をフルに出せているわけではありません。外出先のスマホの場合、ネットワーク環境では、1Mbpsのケースもあります。また、下記のように夜間の時間帯に利用者数が増加して急激に低速になることもあります。ちなみに私の自宅は「フレッツ光ライト」のマンションタイプなのですが、昼間20Mbpsで夜間21時前後は0.5Mbpsになることもあります。
つまり、WEBサービスを開発する際には、帯域制限するとどんな見え方するのか確認しておくことがUX上重要な要素になります。例えば、レイジーロードを実装せず、ファーストビューで無駄に読み込みが多いと表示の体感速度は著しく遅くなります。
自分の帯域速度を確認してみよう
googleで「internet speed test」と検索するとスピード測定できる
帯域制限の設定画面を開く
Chromeの画面右上の［…］をクリックして、［その他ツール］>［デベロッパーツール］と進んでデベロッパーツールを開きます。もしくは「F12」キーを押すと同じ挙動になります。
次に、［デベロッパーツール］画面の右上の［…］をクリックして、［Settings］を選択します。
開いた［Settings］パネルで［Throttling］タブを選択して、［Add custom profile…］をクリックします。
帯域制限の設定
設定名（Profile Name）を記入した後、所望の設定値を記入して［Add］をクリックします。
DownloadとUploadの帯域制限の単位は「kbps」である点に注意してください。１Mbps ＝ 1024Kbpsとなります。
帯域制限のシミュレーション
- ［デベロッパーツール］画面で［Network］タブを開き、[Disable cashe]にチェックを入れブラウザのキャッシュを無効にしてください。
- つぎに［Online］となっている箇所をクリックすると帯域制限の設定を選択できます。
- ここで［Custom］の中から先程に作成した設定名を選択すると、帯域制限の設定が反映されます。
- 設定したら［デベロッパーツール］は開いたまま、「F5」キーを押してページを更新しましょう。シミュレーションが開始されます。
- 逆にこの設定を元の［Online］に戻すと、帯域制限の設定が解除されます。
最後に
実施にシミュレーションすると分かると思いますが、下記の点に気を付けて確認してみると良いでしょう。低速回線の人でも待っている間にイラつかない表示方法ができると良いと思います。
- 待機画面にloaderは表示されるか？
- 真っ白からいきなり全画面でなく、段階的に表示されるか？
- 表示途中でレイアウトが、ズレたり崩れたりしていないか？
