スクロール滑らかさテスト – スクロールのカクつきを測定

このスクロール滑らかさテストは、あなたが他のどんな動きよりも頻繁に目にする種類のモーションを測定します。指やホイールの下でページやリストが動く動きです。スクロールは絶えず発生し、あなたの目もそれを読み取ることに慣れているため、カクつきが最初に現れる場所です。動きながら引っかかるページ、フリックすると飛ぶフィード、行ごとにガタつく文書 — これらはすべて、コンテンツが動いている間にブラウザがリフレッシュのたびに新しいフレームを届けられるかどうかに帰着します。このテストは、番号付きの行が並んだ縦長の帯を1フレームごとに固定量ずつスクロールさせ、遅れて届いたフレームをカウントします。

行にははっきりとした数字と鋭いエッジが付いているため、目で滑らかさを直接判断でき、メーターがそれを数値化します。これにより、漠然とした印象ではなくデータに基づいて、ブラウザ、拡張機能、マシンを比較できます。

スクロールテストの使い方

ページが読み込まれるとすぐに帯が自動でスクロールし始めます。うまく読み取るには次のようにします。

• 行が動く様子を見ます。 滑らかなスクロールは1本の連続した滑走のように見えます。カクつきは、行が通り過ぎる際に飛んだり躊躇したりするように見えます。
• 行が上に移動していく間、行番号を目で追います。均等に滑っていればタイミングは良好です。がくんと動けば、フレームが遅れた証拠です。
• メーターを読みます。 予想フレーム時間はフレーム間の通常の間隔、最悪フレーム間隔は記録された最長の遅延、カクつきは遅れたフレームの数をカウントします。
• 全画面で試し、普段のスクロールの仕方 — ゆっくり読むのか、素早くフリックするのか — に合わせて速度を調整します。

メーターをリセットを使うと、新たにカウントを開始できます。バックグラウンドの引っかかりは現れたり消えたりするため、テストを30秒間動かし続けると、ちらっと見るよりも正直な状況がわかります。

スクロールがカクつく理由

滑らかなスクロールでは、ブラウザはページを実行しながら、リフレッシュのたびに — 60 Hzでは16.7 ミリ秒ごと、120 Hzでは8.3ごと — 新しいフレームを生成する必要があります。その作業が何かによって遅れると、フレームが1枚欠落し、スクロールが飛びます。よくある原因は具体的で、修正可能です。

重いページとスクリプト

大きな画像、複雑なレイアウト、負荷の高いスクリプトは、スクロールされる各フレームの描画コストを高くします。スクロールイベントのたびにコードを実行するページは、特にカクつきやすくなります。これはあなたのマシンだけでなくページの性質でもあり、そのために同じコンピューターでも滑らかにスクロールするサイトとそうでないサイトがあるのです。

ブラウザ拡張機能

コンテンツブロック系、ショッピング系、アクセシビリティ系の拡張機能は、ページが動く間もそれを検査しています。最適化が不十分な拡張機能が1つあるだけで、1フレームあたりの作業が目に見えるカクつきを引き起こすのに十分なほど増えることがあります。ほとんどの拡張機能が無効になるプライベートウィンドウでテストするのが、手早く確認する方法です。

コンポジットとハードウェアアクセラレーション

ブラウザは、ページが忙しいときでもスクロールが滑らかなままになるよう、スクロールをGPUに任せようとします。ハードウェアアクセラレーションがオフの場合や、ページが作業をメインスレッドに押し戻す場合、スクロールは遅い経路にフォールバックしてカクつきます。ブラウザの設定でハードウェアアクセラレーションをオンにすると、たいてい改善します。

省電力とバックグラウンド負荷

あらゆるモーションと同様に、バッテリーセーバーで動作するノートパソコン、発熱して自らを抑制するデバイス、CPU時間を奪うバックグラウンドタスクは、いずれもフレームの到着を遅らせます。スクロールテストは、他のあらゆる種類のモーションを支配するのと同じシステムの健全性を反映します。

良い結果とはどのようなものか

健全なスクロールとは、カクつき数がほぼゼロで、最悪フレーム間隔が予想フレーム時間に近い、高く安定したフレームレートです。下の表は、一般的なリフレッシュレートにおける目標フレーム時間 — スクロール中にテストがその付近を保つべき値 — を示しています。

リフレッシュレートが高いほどスクロールは目に見えて滑らかになりますが、それはブラウザがその厳しい予算を満たし続けられる場合に限ります。実際に動作しているリフレッシュレートはリフレッシュレートガイドで確認し、生のフレームレートはメインのFPSテストで測定してください。

スクロールをより滑らかにする方法

• スクロールがGPUで動作するよう、ブラウザの設定でハードウェアアクセラレーションをオンにします。
• 原因を特定するため、重い拡張機能を1つずつ無効にするか、プライベートウィンドウでテストします。
• バックグラウンドの負荷を閉じ、デバイスを涼しく保ち、電源につないでおきます。
• ディスプレイが対応していればリフレッシュレートを上げ、再度テストしてブラウザが追いつけるか確認します。
• ブラウザとグラフィックドライバーを更新します。これらはコンポジターやスクロールの改善をもたらすことがよくあります。

ここではスクロールがカクつくのにゲームは滑らかに動く場合、原因はたいていハードウェアではなくブラウザやページにあります。どこでもモーションが粗い場合は、スタッターテストで単独で測定してください。これはスクロールするコンテンツなしに同じフレーム時間メーターを使います。

よくある質問

ここでは滑らかなのに、一部のウェブサイトではカクつきます。なぜですか?

滑らかさは、あなたのマシンだけでなくページにも依存するからです。重いスクリプト、大きな画像、スクロールイベントハンドラーは、一部のサイトのスクロールコストを高くします。ここで良好な結果が出るなら、あなたのブラウザとハードウェアには性能があり、負荷の高いサイトがボトルネックです。

リフレッシュレートが高いとスクロールは滑らかになりますか?

はい、ブラウザがリフレッシュのたびにフレームを届けられる限りは。120 Hzの画面は60 Hzのものより滑らかに滑走しますが、それはページがより短いフレーム予算を満たし続ける間だけです。満たせなければ、単にカクつきがより早く現れるだけです。

なぜ同じページが2つのブラウザで異なるスクロールになるのですか?

ブラウザは、コンポジットの仕方やスクロールをGPUに任せる方法、そして拡張機能がページにフックする方法が異なります。同一のハードウェアでも、あるブラウザではページが滑らかにスクロールし、別のブラウザではカクつくのはよくあることです。

これはスタッターテストと同じですか?

フレーム時間メーターは共有していますが、このテストは実際のスクロールコンテンツをブラウザのコンポジターを通して動かします。これは多くの人が気にする日常的なケースです。スタッターテストは、スクロール層なしに生のフレームタイミングを分離します。

これはモニターとブラウザのどちらをテストしていますか?

主にブラウザと、それが動作するマシンです。行はブラウザのレンダリングとコンポジットの経路を通って動くため、結果が悪い場合はたいていパネルではなく、ブラウザ、拡張機能、システム負荷を指しています。ディスプレイは依然として上限を定めます — 60 Hzの画面が120 Hzのものほど滑らかにスクロールすることは決してありません — が、リフレッシュレートが十分だと仮定すれば、このテストはソフトウェアがどれだけうまく追いつけるかを判断しています。

滑らかなスクロール設定と高リフレッシュスクロール

ほとんどのブラウザとオペレーティングシステムは、各スクロールステップを飛ばすのではなくアニメーションで動かす、滑らかなスクロールのオプションを提供しています。これはモーションをより穏やかに見せますが、ブラウザが描画できないフレームを生み出すわけではありません — ページが重ければ、滑らかなスクロールは単にカクつきをアニメーションするだけです。本当の効果は、高いリフレッシュレートと、それに追いつけるほど軽いページを組み合わせたときに得られます。120 Hzの画面では、同じモーションを2倍のフレームで描くため、単純なページのスクロールは60 Hzより目に見えて滑らかになります。このテストは、ブラウザが半分のフレームを落とすのではなく、それらのフレームを本当に届けているかを確認させてくれます。

モバイル、トラックパッド、ホイールのスクロール

どうスクロールするかによって、感じるものは変わります。マウスホイールは離散的なステップで動くため、滑らかさはブラウザがその間をどれだけうまくアニメーションするかに依存します。トラックパッドやタッチスクリーンは連続的にスクロールしてコンポジターに委ねられます。これはたいてい最も滑らかな経路ですが、フレームが落ちたときに最も明白になる経路でもあります。あなたの指が画面に合わせるべき期待を設定するからです。スマートフォンやタブレットは、スクロールがすべてを移動する主な手段であるため、特にこの点に敏感です。指の下ではカクつくのにホイールでは違う場合、コンポジターがメインスレッドを待つことを強いられています。

カクつきのないスクロールが依存するもの

滑らかなスクロールは鎖であり、最も弱い環が結果を決めます。ページは間に合うように描画できるほど軽くなければならず、ブラウザはスクロールをGPUに任せなければならず、システムは忙しかったり抑制されたりしていてはならず、ディスプレイはフレームを表示するリフレッシュの余裕を持っていなければなりません。このテストは鎖全体を一度に働かせます。数値が良ければ、すべての環が持ちこたえています。悪ければ、上のセクションが最初にどの環を見るべきかを絞り込みます。スクロールはとても一般的なので、小さな改善がどこでも効いてきます — ブラウザの更新、拡張機能の無効化、ハードウェアアクセラレーションへの切り替えは、カクついた結果をきれいなものへ引き上げることができ、その後訪れるすべてのサイトでその違いを感じるでしょう。

関連するディスプレイ・モーションテスト

スクロールはモーション性能の日常的な一断面です。これらの関連ツールも続けてお試しください。

• フレームレートテスト(FPSテスト) — ライブのフレームレートとリフレッシュレートを測定します。
• モーションブラーテスト — 画面が動く細部をどれだけにじませるかを確認します。
• フレームスキップテスト — パネルがすべてのフレームを描画するか確認します。
• スクリーンティアリングテスト — フレームがリフレッシュに揃っているか確認します。
• スタッターテスト — ソフトウェアでのフレーム時間の一貫性を測定します。