前置き
Webアプリを作成するエンジニアであれば、必須である「ブラウザ」。
通信速度を気にしながら実装するエンジニアは少ないと思いますが、レスポンシブがモダンな昨今では、必然的に対スマホのことを気にする必要があります。
しかしながら、エンジニアが気にするのは レイアウト javascript等にフォーカスしがちです。
皆さんはどのようなWebアプリが良いものだと考えますか？
色々あると思います。
確実に言えることはページ遷移時にすぐに描画されることです。
これは、未来永劫揺るがない前提条件であるといえます。
上述から、描画速度を気にしながら実装する事がwebエンジニアとして心得なければならないことです。
もうちょい前置きを書きたいのですが、そのうち追記します。
ということで本題です。
今回はPCのChromeで通信速度を制限する方法があったので、備忘録として残します。
どうやって使うの
とっても簡単です。
クロームの開発者モードより設定ができます。
▼開発者モード画面
▼通信速度設定セレクトボックス
上図の上部右端に「Online」と設定されているセレクトボックスで変更可能です。
プリセット、自作カスタムプリセット等から選択可能です。
携帯用の画面を確認する際は基本的に「Fast 3G」を選択して確認するのがいいと思われます。
そこまで神経質になる必要はありませんが、Webアプリ程じゃないけど、ランディングページは「fast3G」で1秒以内に表示されることが望ましいと思われます。
最後に
「WEBアプリの速度」というのは色々なレイヤーがボトルネックになることがあるため、当たり前ですがこの方法を知っているから速度が上がるわけではありません。
しかし、
実装する下流のコーダーがこういった方法を常用し、アンテナをはることで「レンダリング遅いクソWEB」という未来を回避できるはずです。
以上です。