FPS カウンター
この FPS カウンターを使うと、現在のページをブラウザーがどれだけなめらかに描画しているかを測定できます。requestAnimationFrame でフレームをサンプリングし、現在・平均・最小・最大の FPS を表示。短いグラフも描けるので、重いタブやアニメーション、拡張機能、スロットリング、ディスプレイ設定によるカクつきの落ち込みを見つけられます。
ブラウザーの FPS を測定する手順
-
1
測定時間を選ぶ
5 秒が使いやすい初期値です。周期的なカクつきやバックグラウンド負荷の変化を捉えたい場合は、測定時間を長めにしてください。
-
2
平滑化と警告しきい値を設定する
平滑化ウィンドウは直近のフレームを平均します。しきい値は、テストする端末で許容できると考える FPS の水準を示します。
-
3
カウンターを実行してばらつきを読む
現在の FPS は直近の描画速度を示します。平均・最小・最大の値から、セッション全体が安定してなめらかだったか、目に見える落ち込みがあったかがわかります。
FPS カウンターが測定するもの
このツールが測るのはブラウザーの描画テンポであり、グラフィックスカードのベンチマーク性能ではありません。ブラウザーが次のフレームを描画できる状態になるたびに、requestAnimationFrame がサンプラーを呼び出します。2 回のコールバックの間隔から、瞬間フレームレートが求まります。
FPS = 1000 / frame_time_in_ms
表示される現在の FPS は、平滑化ウィンドウ上の移動平均です。60 フレームのウィンドウは一般的な 60 Hz ディスプレイに適しており、単発のスパイクを抑えつつ、継続的な低下は隠しません。ウィンドウが小さいほど反応が速く、大きいほど安定して見えます。
具体例
5 秒間の測定で、次のような簡略化したフレーム間隔が記録されたとします。
| フレーム間隔 | 瞬間 FPS | 示唆される状態 |
|---|---|---|
| 16.7 ms | 59.9 FPS | 60 Hz の一般的な描画 |
| 8.3 ms | 120.5 FPS | 120 Hz の一般的な描画 |
| 25.0 ms | 40.0 FPS | 多くのディスプレイで体感できる速度低下 |
| 33.3 ms | 30.0 FPS | 高負荷またはスロットリング |
警告しきい値が 50 FPS で、測定した移動平均が 47 FPS で終わった場合、一部のフレームが速くても結果は目標を下回ります。60 FPS 付近で終わりつつ、ときどき 45 FPS まで落ちる場合は、平均は良好ですが、最小値は調べる価値のあるカクつきがあったことを示しています。
結果の読み方
| 結果のパターン | 考えられる原因 | 次に確認すること |
|---|---|---|
| 平均がリフレッシュレートに近く、落ち込みがまれ | 描画は良好 | 必要なときだけ別のブラウザーと比較する |
| 平均は良いが、最小値が大きく低い | 周期的なカクつき | 重いタブを閉じるか、アニメーションを確認する |
| 平均がしきい値を下回る | 描画負荷が継続している | CPU 使用率、拡張機能、ページのスクリプトを確認する |
| FPS が 30 付近で頭打ち | 省電力またはスロットリング | バッテリーモードとディスプレイ設定を確認する |
ブラウザーの FPS は、ディスプレイのリフレッシュレート、OS のコンポジター、バッテリーモード、熱によるスロットリング、開いているタブ、そしてページ自体の影響を受けます。まず何も動いていないタブでテストし、その後、診断したいページやアプリを動かした状態でもう一度測定してください。
よくある質問
いいえ。このカウンターは、ブラウザーが requestAnimationFrame のコールバックを受け取る頻度を測ります。Web アニメーションやページのなめらかさの確認には役立ちますが、ネイティブゲーム向けの本格的な GPU ベンチマークではありません。
ほとんどのブラウザーは、アニメーションのフレームをディスプレイのリフレッシュレートに合わせます。60 Hz のモニターでは通常 60 FPS 前後になり、120 Hz や 144 Hz のディスプレイでは、ブラウザーと OS が許可すればより高い値が出ることがあります。
60 Hz でのなめらかさを確認するなら 50 FPS が目安です。高リフレッシュレートのモニターでは、期待する体験に近い値、たとえば 90 FPS や 120 FPS に設定してください。
いいえ。測定はローカルの計時 API を使ってブラウザー内で完結します。フレームのデータやスクリーンショット、端末情報を外部の API に送信することはありません。
関連ツール
カラーパレットジェネレーター
基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。
ランダム英字ジェネレーター
A-Zの英字をランダムに生成します。文字数を指定し、大文字・小文字・混在を選んで、ゲーム、課題、授業活動に使えます。
HEX カラーピッカー
色を見た目で選び、HEX、RGB、HSL、HSV、CMYK の値と、白・黒に対するコントラストを確認できます。
ASCII 2進数変換ツール
任意のASCII文字列を2進数表現に変換します。各文字は8ビットになり、スペース区切りで出力されるため、プロトコルトレースや宿題にそのまま貼り付けられます。
JSONフォーマッター
JSONを貼り付けて2スペースまたは4スペースで読みやすく整形し、コンパクトに圧縮し、コピー前に構文をすばやく確認できます。
ランダムカラーパレットジェネレーター
2〜15色のランダムなカラーパレットを生成し、ビビッド、パステル、ミュート、ダークからスタイルを選んで、HEXコードやCSS変数をコピーできます。