Measuring on real devices
Check how smoothly a scroll video runs on phones and computers, with numbers instead of impressions.
A scroll video can feel smooth on a fast laptop and stutter on a phone. Most visitors are on phones, so test on one, and measure rather than judge by eye.
The stats panel in the demos
The demos have a built-in readout. Open a demo with ?stats before the # in
its address, on the device you want to test, and scroll:
text
https://vidscroll.js.org/demos/?stats#/commute| Reading | What it tells you |
|---|---|
| Frames shown per second while scrolling | How smooth the video looks. 30 or more reads as smooth |
| Jump between shown frames | How many video frames are skipped between two shown frames. Small is good |
| Seek time | How long the browser takes to show a requested frame |
| Page frame rate and long frames | Whether the rest of the page keeps up. Frames over 50 ms are visible hitches |
| Usable after, re-encode | How long until scrolling works, and how long an in-browser re-encode took |
Copy report puts all of it, plus the device details, on the clipboard. Compare reports before and after a change.
On your own page
- The console. vidscroll logs a warning for anything that hurts scrubbing: sparse keyframes, a re-encode, a large or long file, a failed CORS read. No warnings is the goal.
onLoad. Itssourcetells you how the video was served:"original"(the file was fine as it is),"optimized"(re-encoded this visit),"cache"(re-encoded on an earlier visit) or"stream"(couldn’t be read).- Remote debugging. On Android, connect the phone over USB and open
chrome://inspectin desktop Chrome to see the phone’s console and record a performance profile while you scroll. Safari offers the same for iPhones through its Develop menu. debug. Thedebugprop logs the engine’s internals to the console, which is mostly useful when reporting a problem.
What usually helps
| Symptom | Try |
|---|---|
| Low frames shown per second, slow seeks | Prepare the file with the CLI, or lower its resolution |
| Low page frame rate, many long frames | Simplify the effects on top: avoid animated blur and large shadows |
| Long wait before scrolling works | A smaller file, or a prepared one so no re-encode runs |
| Big jumps while flicking fast | Normal at very high speeds; smoothScroll evens out wheel scrolling |
Related
- Why seeking stutters: the main cause of low frame rates.
- Easing and feel: smoothing and smooth scrolling.