Why it matters
When the main thread cannot produce a frame every 16.7 ms, scrolling stutters. Users read this as a cheap, broken site even when load metrics are good.
How to fix it
Remove work from scroll handlers (use IntersectionObserver or CSS scroll-driven animations), avoid layout reads/writes per frame, and animate only transform/opacity.
Example
const io = new IntersectionObserver(([e]) => el.classList.toggle('in', e.isIntersecting));
io.observe(el);References
More smoothness rules
void smooth reports 13 rules in this category. How the page feels after it loads: dropped frames during a scripted scroll, long animation frames, INP of real clicks, shifts after input, animated layout properties, idle rAF loops and reduced-motion handling.
long-frames-during-scrollLong animation frames block scrollingscroll-listener-nonpassiveNon-passive wheel/touch listenerinp-slowInteractions are slow to respond (INP)layout-shift-after-inputLayout shifts long after an interactionlayout-shift-on-scrollLayout shifts while scrollinganimate-layout-propertyAnimation of a layout-triggering propertytransition-alltransition: allwill-change-overusewill-change is applied too broadly