Softonic

FPS カウンター

ステップ 1 / 3 現在の FPS
秒
フレーム
FPS
次へ

この FPS カウンターを使うと、現在のページをブラウザーがどれだけなめらかに描画しているかを測定できます。requestAnimationFrame でフレームをサンプリングし、現在・平均・最小・最大の FPS を表示。短いグラフも描けるので、重いタブやアニメーション、拡張機能、スロットリング、ディスプレイ設定によるカクつきの落ち込みを見つけられます。

ブラウザーの FPS を測定する手順

  1. 1

    測定時間を選ぶ

    5 秒が使いやすい初期値です。周期的なカクつきやバックグラウンド負荷の変化を捉えたい場合は、測定時間を長めにしてください。

  2. 2

    平滑化と警告しきい値を設定する

    平滑化ウィンドウは直近のフレームを平均します。しきい値は、テストする端末で許容できると考える FPS の水準を示します。

  3. 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 に送信することはありません。

関連ツール

Webpack設定ジェネレーター

短いフォームからwebpack 5のwebpack.config.jsを生成します。entry・出力フォルダー・モードを設定し、TypeScript、Babel、CSSローダー、HtmlWebpackPlugin、開発サーバーを切り替えるだけです。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

.gitignore ジェネレーター

Laravel、Node.js、Python、Rails のプロジェクト用除外ルールを組み合わせます。結果をコピーするか、.gitignore 入りの ZIP をダウンロードできます。個人用ルールは別に表示します。

16進数から10進数への変換ツール

16進数を10進数（10進法）に変換します。メモリアドレス、エラーコード、RGBチャンネル、任意精度の整数に対応します。

Dockerfileジェネレーター

5つのアプリ構成に合うDockerfileと.dockerignoreを作成。実際の起動対象、作業ディレクトリ、内部ポートを入力し、両方のファイルを確認できます。

tsconfig.json ジェネレーター

target、module、moduleResolution、JSXと定番のstrict系フラグを選んで、きれいなtsconfig.jsonを生成。そのままプロジェクトにコピーできます。

このツールは他の言語でも利用できます