「パフォーマンス計測」でJS vs CSS を判断する｜現場で使える実践テクニック

こんにちは！

今日は「パフォーマンス計測でJS vs CSS を判断する」についてお話しします。

「とりあえずJavaScriptで作ろう」の危険性

僕も新人時代、めっちゃ失敗したことがあるんです。
ボタンをクリックしてメニューを表示するときに、「JavaScriptで制御したら楽やな」って思ってフルJSで実装してしまった。
コード自体は動作したんですけど、モバイルデバイスで操作するとカクカクして見える、っていう指摘をクライアントから受けたんですよ。

その時に気づいたんですが、JavaScriptでアニメーションを作ると、ブラウザのメインスレッドを占有してしまうんです。
つまり、JavaScriptの処理が重いと、他の重要な処理（ユーザー入力の反応とか、テキストの描画とか）が遅延しちゃうわけですね。

一方、CSSアニメーションは GPU（グラフィックスプロセッシングユニット）で処理される場合が多いので、メインスレッドに負荷をかけにくいんです。
でもね、これって「計測しなきゃ実感できない」っていうのが現場あるあるやん。

だからこそ、「パフォーマンス計測」を判断基準にすることが大切なんですよ。

DevToolsで実際に計測してみる

具体的な計測方法をお教えします。
これは僕が現場で毎回やってる手順です。

ステップ1: Chrome DevToolsを開く
ブラウザで F12 キーを押して開発者ツールを起動。
ここから「Performance」タブを選びます。

ステップ2: 記録を開始
Performance タブの左上にある赤い「Record」ボタンをクリック。
その後、対象のアニメーションやインタラクションを実行します。
完了したら再度「Record」ボタンをクリックして記録を終了。

ステップ3: フレームレートを確認
グラフの一番上に「FPS」というセクションが表示されます。
ここで「緑色が保持されているか」「赤い警告が出ていないか」を確認します。

ほんまに大事なポイントがあります。
理想は「60 FPS」をキープすることです。
60 FPS = 1 フレームあたり 約 16.67 ミリ秒以内に処理が完了する、ということ。
これが下回ると、ユーザーは「動きがカクカクしてる」って感じるんですよ。

僕が実際にやった比較例を挙げます。
「メニューのスライドイン」という同じ動きを、JavaScriptでやってみた版と CSSでやってみた版の両方を計測しました。

• JavaScript版（setInterval() で left 値を更新）
  フレームドロップが頻発、平均 40-45 FPS に低下
• CSS版（transition プロパティを使用）
  60 FPS をほぼ維持、とても滑らか

この違いを目で見て理解できるのが、DevToolsの計測なんです。

パフォーマンス指標ごとの判断基準

でもね、フレームレートだけじゃ判断できない場合もあります。
複数の指標を組み合わせることで、「JS か CSS か」の最適な答えが見えてくるんですよ。

指標1: Layout（レイアウト計算）
DevTools の Timeline に「Layout」として表示されます。
これが長い（例えば数十ミリ秒）場合は、JavaScriptで DOM の幅や高さを頻繁に読み書きしてる可能性があります。
こういう場合は「CSSで済ませられないか」を検討するといいですよ。

指標2: Paint（描画処理）
background-color や transform など、何をアニメーション化するかで大きく変わります。
特に重要なのは、transform や opacity はめっちゃ軽くて、width や height は重い、っていうこと。
JavaScriptで width を頻繁に変更するアニメーションなら、transform: scaleX() に置き換えると格段に軽くなります。

指標3: Composite（合成処理）
複数のレイヤーが組み合わさる処理です。
これも長いと「何か重い処理が走ってるな」というサイン。

僕が現場で使ってる判断フロー図を言語化すると、こんな感じです：

1. アニメーションやインタラクションを DevTools で計測する
2. フレームドロップが起きてないか、Layout や Paint が長くないか確認
3. 問題がなければ「その実装方法でOK」
4. 問題があれば「CSSで書き直せるか」「アルゴリズムを変えられるか」を検討
5. 再度計測して改善を確認

重要なのは「計測なしに判断しない」ってことです。
感覚や経験則だけだと、ほんまに罠にハマることがありますからね。

まとめ

JS vs CSS の判断は、実装の「楽さ」や「一般的な推奨」ではなく、「実際のパフォーマンス計測結果」に基づくべきです。
DevTools の Performance タブを使えば、フレームレートや Layout、Paint などの指標を客観的に確認できます。

僕の失敗から学んだことは、「動くから OK」じゃなくて「スムーズに動くか」を最優先に考えることの大切さです。
特にモバイルユーザーは敏感に感じ取るので、計測癖をつけるといいですよ。