Help us understand the problem. What is going on with this article?

Chromeデベロッパーツールで実機の回線速度を再現してコーディング

More than 3 years have passed since last update.

ウェブサイトのコーディングはデザイン・アニメーションなど気をつけるべきポイントはたくさんありますが、特にスマートフォンサイトのコーディングには実機の回線速度を意識することが大切です。

読み込みが遅いウェブサイトなんて待ってられないですよね:expressionless:

普段はオフィスの光回線&Wi-Fiを使用したり、ローカルにサーバーを立ててコーディングしている方も多いと思います。読み込みも一瞬で終わって、なかなか読み込み時間を再現しづらいと思います。今回はChromeのデベロッパーツールを使って擬似的に実機の回線速度を再現する方法を紹介したいと思います。

1. 実機の回線速度を計測する

まず、実機の回線速度を計測アプリで計測します。SPEEDTESTはAndroid、iOSともにリリースされているのでおすすめです。

Screenshot_20161025-102349.png

実際に手元の端末(Xperia Z5 Premium)とSIM(IIJmio)で計測しました。ダウンロードが14.78Mbps、アップロードが3.63Mbps、レイテンシ(PING)が51msでした。この数値はデベロッパーツールで後ほど使用するのでメモしておきましょう

2. Chromeデベロッパーツールに回線情報を登録

回線速度の再現にはChromeデベロッパーツールの「Network conditions」を使用します。「Console」タブの左側にある「・・・」をクリックし、「Network conditions」を選択します。

cap1.png

開きました。

cap2.png

「Network throttling」から「Custom」 > 「Add」を選択します。

cap3.png

「Network Throttling Profiles」が開くので、「Add custom Profile」ボタンをクリックして、先程アプリで計測した数値を入力します。[Download]と[Upload]の単位がkb/sとなっているため注意してください(Mb/sからkb/sへの変換には1024倍します)。入力出来たら「Add」ボタンをクリックして登録します。

cap4.png

登録すると「Network throttling」の一覧に表示されるので選択します。これで実機の回線速度を再現する準備が整いました。

cap5.png

Let's 検証!:laughing:

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした