Andrey (azangru) wrote,

Here's where my debug-fu gets woefully inadequate.

I noticed that the web page for a wordpress conference,, 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.

  • (no subject)

    This was a good talk. Interesting to see that SvelteKit is taking the same direction as, by using html forms to submit data without the…

  • (no subject)

    A talk about building large-scale (React) apps. These days, the questions that concern me are: - how can a project be scaled up without…

  • (no subject)

    Watched the second episode of The Problem with Jon Stewart. I thought of Jon as an intellectual comedian. Someone who transcends the limitations of…

  • Post a new comment


    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.