Andrey (azangru) wrote,
Andrey
azangru

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

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.
Subscribe

  • (no subject)

    This was a good talk. Interesting to see that SvelteKit is taking the same direction as Remix.run, 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

    Error

    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.
  • 0 comments