モバイル版のページを高速化させたい。

Question

私自身が作成しているサイトでモバイル版のサイトが遅すぎる原因を考えているのですが、
改善できないため、ヒントを教えていただきたいく投稿させていただきました。

サイトの設計として
フロントをReact jsをベースといしたSPA
CSSはstyled component
Server side renderingも実装しました。
サーバーサイドは rails APIモードで作成しています。

これをGoogleが提供しているPageSpeedInsightsを使って計測したところ

PC版のデータ

コンテンツの初回ペイント
1.3 秒
速度インデックス
3.6 秒
インタラクティブになるまでの時間
1.6 秒
意味のあるコンテンツの初回ペイント
1.3 秒
CPU の初回アイドル
1.5 秒
入力の推定待ち時間
10 ミリ秒

一方　モバイルは

コンテンツの初回ペイント

5.7 秒
速度インデックス
6.8 秒
インタラクティブになるまでの時間
7.5 秒
意味のあるコンテンツの初回ペイント
5.8 秒
CPU の初回アイドル
7.5 秒
入力の推定待ち時間
600 ミリ秒

基本的に同じJsxファイルを使いメディアクエリを使ってデザインを変更させているくらいしかPCとモバイルの実装に違いはないのですが、ここまで時間に差が出る原因はなんでしょうか。

さらにモバイル版だと、メインスレッド処理の最小化とJavaScript の実行にかかる時間の低減に警告がでる原因がわかりません。

Answer 1

developer tools の performanceで計測してみて、
どこにボトルネックがあるか確認をしてみた方が良さそうです。

1. htmlの通信中〜終了までが遅い場合 バックエンドサーバー
2. reactがレンダリングを開始するまでが遅い場合 JSのサイズ改善
3. JSの実行自体が重い場合 初期レンダリングする箇所を減らす

など場所によって対応方法が違いますので、
計測結果を貼ると解決策が見つかるかもしれません。

Answer 2

モバイル版は3Gの通信速度で計測していると思います。