Scroll-Test für flüssiges Scrollen – Scroll-Ruckler messen

Dieser Scroll-Test für flüssiges Scrollen misst genau die Art von Bewegung, der Sie häufiger begegnen als jeder anderen: eine Seite oder Liste, die sich unter Ihrem Finger oder Mausrad bewegt. Beim Scrollen fallen Ruckler zuerst auf, weil es ständig passiert und Ihre Augen darin geübt sind, es zu erkennen. Eine Seite, die beim Bewegen hakt, ein Feed, der beim Wischen springt, ein Dokument, das Zeile für Zeile zittert – all das läuft darauf hinaus, ob der Browser bei jedem Bildschirmaufbau ein frisches Bild liefern kann, während der Inhalt in Bewegung ist. Dieser Test scrollt ein hohes Band aus nummerierten Zeilen mit einem festen Schritt pro Frame und zählt die Bilder, die zu spät eintreffen.

Screen FPS (measured)
—
Expected frame time
—
Worst frame gap
—
Janks (late frames)
0

Speed

Pixels per frame:

8 px/frame

Weil die Zeilen klare Zahlen und harte Kanten tragen, können Ihre Augen die Flüssigkeit direkt beurteilen, während der Zähler eine konkrete Zahl dazu liefert. So können Sie Browser, Erweiterungen und Geräte anhand von Daten vergleichen statt nur nach einem vagen Eindruck.

So verwenden Sie den Scroll-Test

Das Band scrollt von selbst, sobald die Seite geladen ist. Um es richtig zu lesen:

Beobachten Sie die Bewegung der Zeilen. Flüssiges Scrollen wirkt wie ein einziges, kontinuierliches Gleiten; Ruckeln sieht so aus, als würden die Zeilen beim Vorbeiziehen springen oder zögern.
Verfolgen Sie eine Zeilennummer mit den Augen, während sie nach oben wandert. Gleitet sie gleichmäßig, stimmt das Timing; ruckt sie, war ein Bild zu spät.
Lesen Sie den Zähler. Die erwartete Bildzeit ist Ihr normaler Abstand zwischen den Bildern, der größte Bildabstand ist die längste aufgezeichnete Verzögerung, und Ruckler zählt jedes verspätete Bild.
Probieren Sie es im Vollbild und passen Sie die Geschwindigkeit an die Art an, wie Sie normalerweise scrollen – ein gemächliches Lesen oder ein schnelles Wischen.

Verwenden Sie Zähler zurücksetzen, um eine neue Messung zu starten. Wenn Sie den Test dreißig Sekunden lang laufen lassen, erhalten Sie ein ehrlicheres Bild als bei einem kurzen Blick, denn Ruckler im Hintergrund kommen und gehen.

Warum das Scrollen stottert

Flüssiges Scrollen verlangt vom Browser, bei jedem Bildschirmaufbau ein neues Bild zu erzeugen – alle 16.7 Millisekunden bei 60 Hz, alle 8.3 bei 120 Hz – und gleichzeitig die Seite auszuführen. Sobald irgendetwas diese Arbeit verzögert, wird ein Bild verpasst und das Scrollen springt. Die üblichen Ursachen sind konkret und behebbar.

Schwere Seiten und Skripte

Große Bilder, komplexe Layouts und aufwendige Skripte machen es teuer, jedes gescrollte Bild zu zeichnen. Seiten, die bei jedem Scroll-Ereignis Code ausführen, neigen besonders zu Rucklern. Das ist ebenso eine Eigenschaft der Seite wie Ihres Geräts – deshalb scrollen manche Websites flüssig und andere nicht, obwohl es derselbe Computer ist.

Browser-Erweiterungen

Erweiterungen zum Blockieren von Inhalten, zum Einkaufen und zur Barrierefreiheit prüfen die Seite, während sie sich bewegt. Eine einzige schlecht optimierte Erweiterung kann pro Bild gerade genug zusätzliche Arbeit verursachen, um sichtbares Stottern auszulösen. Ein Test in einem privaten Fenster, in dem die meisten Erweiterungen deaktiviert sind, ist eine schnelle Möglichkeit zur Prüfung.

Compositing und Hardwarebeschleunigung

Browser versuchen, das Scrollen an die GPU zu übergeben, damit es flüssig bleibt, selbst wenn die Seite ausgelastet ist. Wenn die Hardwarebeschleunigung deaktiviert ist oder eine Seite die Arbeit zurück auf den Haupt-Thread zwingt, fällt das Scrollen auf den langsameren Weg zurück und ruckelt. Die Hardwarebeschleunigung in den Browser-Einstellungen einzuschalten hilft in der Regel.

Energiesparen und Hintergrundlast

Wie bei jeder Bewegung sorgen ein Laptop im Energiesparmodus, ein heißes Gerät, das sich selbst drosselt, oder eine Hintergrundaufgabe, die CPU-Zeit abzweigt, allesamt dafür, dass Bilder zu spät eintreffen. Der Scroll-Test spiegelt denselben Systemzustand wider, der jede andere Art von Bewegung bestimmt.

Wie ein gutes Ergebnis aussieht

Gesundes Scrollen ist eine hohe, gleichmäßige Bildrate mit einer Ruckleranzahl nahe null und einem größten Bildabstand nahe der erwarteten Bildzeit. Die folgende Tabelle zeigt die angestrebte Bildzeit für gängige Bildwiederholraten – den Wert, um den der Test beim Scrollen pendeln sollte.

Bildwiederholrate	Angestrebte Bildzeit	Budget pro Bild für flüssiges Scrollen
60 Hz	16.7 ms	Alles muss innerhalb von 16.7 ms fertig sein
120 Hz	8.3 ms	Halbe Zeit, doppelte Flüssigkeit
144 Hz	6.9 ms	Engeres Budget, erfordert eine leistungsfähige Seite

Eine höhere Bildwiederholrate lässt das Scrollen spürbar flüssiger wirken, aber nur, wenn der Browser dieses engere Budget weiterhin füllen kann. Prüfen Sie mit unserem Leitfaden zur Bildwiederholrate, welche Bildwiederholrate tatsächlich läuft, und messen Sie Ihre rohe Bildrate im Haupt-FPS-Test.

So machen Sie das Scrollen flüssiger

Schalten Sie die Hardwarebeschleunigung ein in Ihren Browser-Einstellungen, damit das Scrollen über die GPU läuft.
Deaktivieren Sie schwere Erweiterungen eine nach der anderen oder testen Sie in einem privaten Fenster, um den Übeltäter zu finden.
Beenden Sie Hintergrundlast und halten Sie das Gerät kühl und am Stromnetz.
Erhöhen Sie Ihre Bildwiederholrate, falls Ihr Display sie unterstützt, und testen Sie dann erneut, um zu bestätigen, dass der Browser mithält.
Aktualisieren Sie Ihren Browser und Ihre Grafiktreiber, die oft Verbesserungen für Compositor und Scrollen mitbringen.

Wenn das Scrollen hier ruckelt, ein Spiel aber flüssig läuft, liegt die Ursache meist am Browser oder an der Seite und nicht an Ihrer Hardware. Ist die Bewegung überall ruckelig, messen Sie sie isoliert mit dem Stotter-Test, der denselben Bildzeit-Zähler ohne die Scroll-Inhalte verwendet.

Häufig gestellte Fragen

Hier scrollt es flüssig, aber auf manchen Websites ruckelt es. Warum?

Weil die Flüssigkeit ebenso von der Seite wie von Ihrem Gerät abhängt. Schwere Skripte, große Bilder und Scroll-Ereignis-Handler machen manche Websites teuer im Scrollen. Ein sauberes Ergebnis hier bedeutet, dass Ihr Browser und Ihre Hardware leistungsfähig sind; die ausgelastete Website ist der Flaschenhals.

Macht eine höhere Bildwiederholrate das Scrollen flüssiger?

Ja, sofern der Browser bei jedem Bildschirmaufbau ein Bild liefern kann. Ein 120 Hz-Bildschirm gleitet flüssiger als ein 60 Hz-Bildschirm, aber nur, solange die Seite das kürzere Bildbudget weiterhin füllt. Kann sie das nicht, sehen Sie die Ruckler einfach früher.

Warum scrollt dieselbe Seite in zwei Browsern unterschiedlich?

Browser unterscheiden sich darin, wie sie das Compositing durchführen und das Scrollen an die GPU übergeben, und darin, wie Erweiterungen sich in die Seite einklinken. Es kommt häufig vor, dass ein Browser eine Seite flüssig scrollt, während ein anderer bei identischer Hardware ruckelt.

Ist das dasselbe wie ein Stotter-Test?

Sie teilen sich den Bildzeit-Zähler, aber dieser Test treibt echte Scroll-Inhalte durch den Compositor des Browsers, was der Alltagsfall ist, der den meisten Menschen wichtig ist. Der Stotter-Test isoliert das reine Bild-Timing ohne die Scroll-Ebene.

Testet dies meinen Monitor oder meinen Browser?

Größtenteils Ihren Browser und das Gerät, auf dem er läuft. Die Zeilen bewegen sich durch den Render- und Compositing-Pfad des Browsers, sodass ein schlechtes Ergebnis in der Regel auf den Browser, eine Erweiterung oder die Systemlast hindeutet und nicht auf das Panel. Ihr Display setzt dennoch die Obergrenze – ein 60 Hz-Bildschirm kann niemals so flüssig scrollen wie ein 120 Hz-Bildschirm – aber vorausgesetzt, die Bildwiederholrate ist ausreichend, beurteilt dieser Test, wie gut die Software mithält.

Einstellungen für flüssiges Scrollen und Scrollen mit hoher Bildwiederholrate

Die meisten Browser und Betriebssysteme bieten eine Option für flüssiges Scrollen, die jeden Scroll-Schritt animiert, statt zu springen. Sie lässt die Bewegung sanfter wirken, erzeugt aber keine Bilder, die der Browser nicht zeichnen kann – ist die Seite schwer, animiert das flüssige Scrollen einfach die Ruckler. Der wahre Gewinn entsteht durch eine hohe Bildwiederholrate in Kombination mit einer Seite, die leicht genug ist, um mitzuhalten. Auf einem 120 Hz-Bildschirm ist das Scrollen einer einfachen Seite sichtbar flüssiger als auf 60 Hz, weil doppelt so viele Bilder dieselbe Bewegung beschreiben. Dieser Test lässt Sie bestätigen, dass Ihr Browser diese Bilder tatsächlich liefert, statt die Hälfte davon fallen zu lassen.

Scrollen auf Mobilgeräten, Trackpad und Mausrad

Wie Sie scrollen, ändert, was Sie spüren. Ein Mausrad bewegt sich in einzelnen Schritten, sodass die Flüssigkeit davon abhängt, wie gut der Browser dazwischen animiert. Ein Trackpad oder Touchscreen scrollt kontinuierlich und wird an den Compositor übergeben, was in der Regel der flüssigste Weg ist – aber auch der, bei dem ein verlorenes Bild am deutlichsten auffällt, weil Ihr Finger eine Erwartung setzt, die der Bildschirm erfüllen muss. Handys und Tablets sind hier besonders empfindlich, da das Scrollen die wichtigste Art ist, sich durch alles zu bewegen. Wenn eine Seite unter Ihrem Finger ruckelt, aber nicht unter einem Mausrad, wird der Compositor gezwungen, auf den Haupt-Thread zu warten.

Wovon ein ruckelfreies Scrollen abhängt

Flüssiges Scrollen ist eine Kette, und das schwächste Glied bestimmt das Ergebnis: Die Seite muss leicht genug sein, um rechtzeitig gezeichnet zu werden, der Browser muss das Scrollen an die GPU übergeben, das System darf nicht ausgelastet sein oder drosseln, und das Display muss genügend Bildwiederholreserve haben, um die Bilder anzuzeigen. Dieser Test fordert die gesamte Kette auf einmal. Ist die Zahl gut, hält jedes Glied; ist sie schlecht, grenzen die obigen Abschnitte ein, welches Glied Sie zuerst prüfen sollten. Weil Scrollen so häufig vorkommt, zahlen sich kleine Verbesserungen überall aus – ein Browser-Update, eine deaktivierte Erweiterung oder ein Wechsel zur Hardwarebeschleunigung kann ein ruckelndes Ergebnis in ein sauberes verwandeln, und Sie werden den Unterschied auf jeder Website spüren, die Sie danach besuchen.