I noticed that the web page for a wordpress conference, https://us.wordcamp.org/2021, has a surprisingly janky scroll, at least on my crappy laptop. Chrome dev tools confirm that the jank is not a figment of my imagination; but that the site indeed drops frames like nobody's business:
What the screenshot also shows is that the drop in frame rate is caused by something in the CSS rather than JS (all the time spent in compositing and painting). I can see that it's constantly repainting during scroll (paint flashing, when enabled, colors the whole viewport green):
as opposed to something like google's search results page, where scrolling doesn't cause repaints. The question is, why exactly. Do the dev tools provide a quick way of identifying the problem? I can't find any hints.
UPDATED: found it! It's because they have a stupid background image on the body element. Apparently this is what is causing constant repaints on scroll! Disabling the image makes the scroll smooth again.