Passive event listeners
Silktide loads your pages in a real browser and looks for scripts that listen for touch and mouse-wheel events in a way that can delay scrolling. Marking these listeners as passive lets the browser scroll immediately.
When a script listens for touch or wheel events, the browser must wait for that script to run before scrolling, in case the script prevents scrolling. On busy pages this makes scrolling stutter or lag — one of the most noticeable forms of jank, especially on mobile devices.
Why this matters
Scrolling is the single most common thing visitors do on a page, and people immediately notice when it isn't smooth. A page that hesitates or judders under the finger feels broken even when everything on it works, and that impression lands hardest on mobile, where touch scrolling is constant.
How to fix it
Mark touch and wheel listeners as passive, which promises the browser they will never prevent scrolling:
// Blocks scrolling until the handler runs
document.addEventListener('touchstart', onTouchStart);
// Passive: the browser scrolls immediately
document.addEventListener('touchstart', onTouchStart, { passive: true });
- Add
{ passive: true }to your owntouchstart,touchmove,wheel, andmousewheellisteners, unless a listener genuinely callspreventDefault()to stop scrolling. - For reported listeners inside third-party scripts, check for an updated version of the library, or raise it with the vendor - see 3rd party code.
All modern browsers support passive listeners; only very old browsers need feature detection.
How Silktide tests this
- Load the page in a real browser and find event listeners for touch and wheel events that are not marked passive and could delay scrolling.
- Report the script containing each such listener, with the line where it is registered.
Troubleshooting
My listener needs to prevent scrolling
A listener that genuinely calls preventDefault() to stop scrolling cannot be
passive - marking it passive makes the browser ignore the preventDefault()
call. If a reported listener really must prevent scrolling, leaving it
non-passive is correct; consider narrowing where it is attached so it doesn't
affect scrolling elsewhere on the page.