スマホCPUが足を引っ張る｜JavaScriptはなぜモバイルで重くなるのか

今回はスマホ端末そのものが抱える制約に目を向けます。

結論から言うと、「JavaScriptがCPUを塞ぐと、操作は一気に重く感じる」ということがモバイル表示速度の本質的な問題です。

スマホは「低速CPU × 単一スレッド」が前提

スマートフォンは、PCと比べて次の点が大きく異なります。

• CPU性能が低い
• クロックが抑制されやすい（発熱・省電力制御）
• メインスレッドは基本的に1本

つまりスマホでは、「JavaScriptが長く実行される→ その間、画面描画も操作受付も止まる」という状態が起こりやすくなります。

JavaScriptは「見えない待ち時間」を作る

PageSpeed InsightsでLCPやSpeed Indexが改善されていても、以下のような体感の悪さが残ることがあります。

• スクロールが引っかかる
• ボタン反応が遅い
• 画面が一瞬フリーズする

これは多くの場合、JavaScriptの実行がCPUを占有している時間が原因です。

• 通信は終わっている
• 画像も読み込まれている
• それでも「動かない」

このとき詰まっているのは、CPU処理そのものです。

なぜスマホでは影響が顕著に出るのか

PCでは問題にならないJavaScriptでも、スマホでは急に重く感じる理由があります。

• 同じJavaScriptでも処理時間が数倍になる
• 並列処理が効きにくい
• GC（ガベージコレクション）が頻発しやすい

結果として、「50msを超える処理が積み重なる→ 操作のたびに引っかかりを感じる」という状態になります。

「JavaScriptが多い＝悪」ではない

ここで誤解してほしくないのは、JavaScriptを使うこと自体が問題なのではないという点です。

問題なのは、次のような実行タイミングと役割の整理不足です。

• 初期表示時にまとめて実行される
• ユーザー操作と同時に重い処理が走る
• 表示に関係ない処理が先に実行される

モバイルでは「いつ実行するか」が最重要

スマホ表示では、「何を実行するか」よりも「いつ実行するか」の方がはるかに重要です。

• 初期表示に不要な処理は後回しにする
• 操作と直接関係ない処理は分離する
• 表示が落ち着いてから動かす

この意識があるかどうかで、体感速度は大きく変わります。

JavaScriptがCPUを塞ぐと、操作は止まる

スマホで「遅い」と感じる瞬間の多くは、通信待ちではなくJavaScript実行によるCPU待ちです。

だからこそ、表示速度が出ているのに使いづらい、PageSpeed Insightsは悪くないのに評価が低い、というズレが生まれます。

［参考文献］
・Google / web.dev「JavaScript 実行とモバイル性能に関する解説」
・Chrome Developers「メインスレッドとパフォーマンスに関するドキュメント」