6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ソフトウェアテストAdvent Calendar 2023

Day 20

モバイル表示が異様に遅いのは、通信速度がエミュレーションされているからかも?

Last updated at Posted at 2023-12-19

この記事は、ソフトウェアテスト Advent Calendar 2023 の20日目の記事です。

12月某日、僕は悩んでいました。
開発しているプロダクトの開発環境へのアクセスが遅いことに。。

きっかけ

現在開発しているプロダクトが本番環境と開発環境で分かれています。開発環境で動作確認をして、問題なければ本番リリースという流れです。僕も開発されたfeatureをチームと一緒に動作確認し、疑問点など画面共有をして話をするのですが、その度に「okauchiさん、ページの読み込み遅いですね。ネットワークがあまり強くないですか?」と言われていました。また直近開発環境を使ってE2Eテスト自動化の検討もしたく、こんな読み込みの遅さでは仕事にならないのでストレスが爆発しました。。

検証を始める

アクセスしているデバイス:2021 MacBook Pro(チップやメモリは性能高い)
同時に起動しているアプリ:ほとんどなし、VPN接続ソフトとChromeぐらい
インターネット速度:特段遅いわけでもなく、接続が不安定でもない
他に思い当たるフシは?:直接的にプロダクトコードを触らないので、他のエンジニアの方が起動している、メモリを食うアプリが多い。敷いていれば左手デバイス用のアプリをいくつか動かしているぐらい。
(余談ですが、ぼやかして書くと1つ1つの検証がずさんっぽく見えるなぁ・・w)
本番環境も遅い?:ここで気付き、遅いのはスマホ表示で動作確認をしている時だけだった!

chromeの検証内から選べるスマホ表示を確認するアレ

スクリーンショット 2023-12-17 14.34.48.png
この画像の左から2番目のアイコンを選択状態にしてページリロードするとスマホ表示が確認できます。皆さん、これを何て読んでいますか?モバイルモード?スマホ表示モード?社内ではSPモードと呼ばれているのですが、「chrome SPモード 遅い」なんてググってもちっとも答えに辿りつかずでした。。同様にモバイルモードとかシミュレータモードとか色々試してもダメ。
(余談ですが、英語で調べていれば答えに辿りつくのが速かったかもしれない)

chatGPTに聞く

スクリーンショット 2023-12-14 15.20.34.png
結論から言うとchatGPTがいくつか挙げてくれた要因からNetwork throttlingがslow 3Gになっていることに気づき、
スクリーンショット 2023-12-17 14.44.37.png
これをNo throttlingに設定することでPC表示同等の読み込みが出来るようになりました!

おわりに

まさかNetwork Conditionもエミュレートされているのは盲点でした。。また一度設定をするとなかなか触る機会がないので、チームのエンジニアも覚えていなかったようです。未来の自分がまた苦しまないように記事化しました。経験が浅いドメインに関する問題を解決するのに、chatGPTにブレストしてもらうといい感じかも!

6
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?