ブラウザゲームが重く感じる理由(と直し方)

ネイティブゲームでは、マウスクリックはほんの数ミリ秒で届きます。ブラウザゲームでは、同じクリックがOS、JavaScriptエンジン、コンポジターの後ろに並んでからピクセルになります。ブラウザがどこで遅延を追加するのか、自分の分をどう測定するのか、そして実際に数字を動かす対策を解説します。

入力チェーン:スイッチからピクセルまで

すべてのクリックは組み立てラインを進みます。各段階がそれぞれの遅延を追加し、ブラウザはその真ん中に座っています:

合計すると、60Hz環境のブラウザゲームは、ゲームロジックが何かをする前に40-60msのクリック・トゥ・フォトン遅延を抱えることになります。raw inputを使うネイティブゲームは、これらの段階のいくつかを丸ごとスキップします。その差こそ、同じマウスがデスクトップではシャープに、ブラウザタブではモヤついて感じる理由です。

ディスプレイ税:何か見えるまでの16.7ms

LANパーティーで披露すべき事実がこちら:60Hzでは、ディスプレイだけで最大16.7ms、つまり1フレーム分の遅延が、クリックが目に見える前に加わります。この1段階だけで、ゲーミングマウスのパイプライン全体より高コストです。良い光学スイッチは約1msで発火し、1000Hzポーリングがさらに1msを足すだけです。

150ドル払ってマウスの2msを削る人が、モニター設定で16.7msを取りこぼしたままにしているのはよくある話です。144Hzにすればフレーム税は6.9msに、240Hzなら4.2msに下がります。モニターが対応しているのに設定ミス(悲しいほどありがちな状況)なら、実際のリフレッシュレートの確認ガイドは2分で済みます。

マウスが重要でないという意味ではありません。レイテンシーはチェーン全体で使う予算であり、最大の支出項目は往々にして、マーケティングが最も上手い項目ではないということです。

ブラウザ分の遅延を測定する

切り分けられないものは直せません。ブラウザ入力遅延テストはブラウザが抱える区間を測定します。各入力イベントのタイムスタンプと、イベントハンドラーが実際に実行された時点の高分解能クロックを比較し、クリック・タップ・キー入力のバッチから中央値と95パーセンタイルを報告します。

結果はこう読みます。中央値は典型的なディスパッチ遅延で、健康なデスクトップブラウザなら通常1桁ms台前半です。p95は裾の部分、つまりメインスレッドがつまずいた時にどれだけ悪化するかです。中央値2msでp95が30msなら、ブラウザは平均的には問題ないものの定期的に停止しており、ゲームではランダムに入力が飲まれる感覚になります。

何を測っているかは正直に言いましょう。ブラウザのイベント境界でのディスパッチ遅延です。マウスのスイッチ、USB伝送、ディスプレイ走査は含みません。ツール自体のガイドにもその旨が書かれています。エンドツーエンドの全体像には、ここを読み終えたら入力遅延チェックリストを進めてください。

同じマウスがブラウザでは悪く感じる理由

ネイティブゲームはメタルに近い場所で入力を読みます。最小限の手続きでマウスデータを取得するraw input APIです。ブラウザは観光ルートを通ります。OSがイベントをブラウザに渡し、ブラウザがカーソル下の要素を決定し(DOM全体をヒットテスト)、メインスレッドのJavaScriptにディスパッチし、ようやくゲームコードが反応できます。メインスレッドが広告スクリプトの実行で忙しければ、あなたのクリックは列に並んで待ちます。

ブラウザ特有の3つの増幅器:

• 忙しいメインスレッド:重いタブ、動画広告、暗号資産っぽいページスクリプトはすべて、あなたのゲームが動くスレッドを共有します。ミュート動画を再生するバックグラウンドタブ1つで、すべての入力に目に見えるジッターが乗ります。
• 拡張機能:ページイベントを監視する拡張機能はすべて、ディスパッチに仕事を追加します。文法チェッカーとクーポン挿入ツールは常習犯です。
• イベント合体(コアレッシング):ブラウザは高頻度のポインタームーブイベントを束ねてグループで配信します。紙の上では滑らかさに貢献しますが、エイムデータが塊で届くことを意味します。

これは、同じキーボードがネイティブアプリでは瞬時なのにブラウザではスポンジのように感じる理由でもあります。キーボードが遅れている?と、より深いキーボードレイテンシー分析で掘り下げているパターンです。

実際に効く対策

効果の大きい順に:

• ハードウェアアクセラレーションをオンにする。Chrome/Edge:設定 → システム → 「利用可能な場合はグラフィックアクセラレーションを使用する」。コンポジットをGPUにオフロードする価値は数ミリ秒あり、フレームペーシングの奇妙さのほとんどを消します。デフォルトでオンのはずです。企業ポリシーと古いドライバーのブロックが、オフの典型的な理由です。
• モニターを本来のリフレッシュレートで動かす。「ブラウザが重い」という報告の半分は、60Hzに張り付いた144Hzパネルです。Windowsの設定だけでなく、実際に提示されるフレームを検証しましょう。
• バックグラウンドタブを閉じ、拡張機能を無効にする。特にメディアを再生したりページスクリプトを注入するもの。クリーンなブラウザプロファイルでテストしてp95が崩れ落ちたら、拡張機能があなたの入力を食べていました。
• フルスクリーンにする。フルスクリーンウィンドウはほとんどのブラウザでより直接的なコンポジット経路を得て、数ミリ秒を削り、デスクトップウィンドウマネージャーのオーバーヘッドを除きます。
• Bluetoothより有線の周辺機器を。Bluetoothは他のすべてに約10-20msと、時折の再送ストールを上乗せします。2.4GHzドングルと普通のUSBは劇的にタイトです。
• ゲームが提供するならポインターロックを使う。ポインターロックはブラウザゲームにraw風のマウス差分を与え、移動のためのカーソルヒットテストをバイパスします。

1つずつ適用し、変更のたびにレイテンシーテストを再実行してください。自分のp95が25msから6msに落ちるのを見るのは、どんな設定ガイドより説得力があります。

Vsyncとフレームペーシング、1段落で

ブラウザのレンダリングはVsyncされています。フレームはディスプレイのリフレッシュと同期して提示されます。それは良いことで、ティアリングを防ぎますが、ゲームはフレーム境界でしか更新できず、締め切りを逃したフレームは丸ごと1フレーム余分に待つことを意味します。60Hzで1回の締め切りミスは16.7ms、240Hzでは同じミスが4.2msです。不均一なフレームペーシングこそ、ブラウザゲームが「60 FPS」を報告しながらカクついて感じる理由です。フレームはすべてあるのですが、不均一なタイミングで届くだけです。高リフレッシュレートは最も安い治療薬です。あり得るすべてのミスのサイズを縮めるからです。

ブラウザが犯人でない場合

上記をすべてやってもまだゲームの感触がおかしいなら、ボトルネックはチェーンの別の場所です。ブラウザ以外の常連容疑者:モニターの代わりのテレビ(ゲームモードオフで30-80ms追加)、Bluetoothキーボードやマウス、まだ60Hzのモニター、別アプリによる重いシステム負荷、あるいはオンラインゲームでは単純なネットワーク遅延。これは同じ衣装を着た別の問題です。20msのpingは入力遅延ではありませんが、あなたの手には区別がつきません。平均反応速度の記事が、なぜ20msが人間の知覚の境界線なのかを説明しています。

入力遅延チェックリストでシステム全体を系統立てて進めましょう。各段階を測定、1つ変更、再測定。レイテンシー探しがイライラするのは、勘でやる時だけです。

まとめ

ブラウザゲームが重く感じるのは、ブラウザのクリックがネイティブより遠くまで旅するからです。ヒットテスト、JavaScriptメインスレッド、Vsyncされたコンポジター、そして最後にディスプレイを経由します。最大の勝利は地味で無料です。ハードウェアアクセラレーションオン、リフレッシュレートを正しく、バックグラウンドタブと拡張機能を殺す、フルスクリーンオン、Bluetoothオフ。ブラウザのディスパッチ遅延を測定し、自分が制御できる段階を直し、それから初めてゲームのせいにしましょう。ほとんどの「重いブラウザゲーム」は、実は重いブラウザ環境です。