Forced reflow

  • osaopaulo
    March 25, 2026 at 6:04 am

    Hello there!

    Checking my pages at PageSpeed Insights, I’ve found that carrousel is triggering an error (or notice?) that warns about a forced reflow:

    “A forced reflow occurs when JavaScript queries geometric properties (such as offsetWidth) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about forced reflows and possible mitigations.”

    Is it something that can be fixed? What could be the reason it triggers the test?

    Forced reflow - PageSpeed Insights

    Best regards!

  • Ying
    March 25, 2026 at 10:33 am

    Hi there,

    In your case:

    – The main culprit is the file …dist/carousel.js?ver=2.5.0 hosted on cdn.fundacaometropolitana.com.br.
    – It accounts for ~33 ms total reflow time (the biggest chunk is 30 ms in one function).
    – This is very typical for image/slide carousels (Owl Carousel, Swiper, Slick, or custom ones) that resize slides, calculate widths, or reposition items in a loop.

    I would recommend:
    – Defer or delay the carousel script
    – If you use a performance plugin (WP Rocket, LiteSpeed, Flying Scripts, etc.), delay carousel.js until user interaction (onclick, scroll, mouseover, etc.).
    – Lazy-load the carousel — only initialize it when the section comes into viewport.

  • osaopaulo
    March 25, 2026 at 2:45 pm

    Hi, Ying!

    Thanks for the answer!

    The carousel implemented in my sites are not from any third-party plugins, but comes from GenerateBlocks itself. Also, its script is already deferred:

    <script defer="" src="https://cdn.fundacaometropolitana.com.br/osaopaulo.org.br/wp-content/plugins/generateblocks-pro/dist/carousel.js?ver=2.5.0" id="generateblocks-carousel-js"></script>

    I am not using any performance plugin, but delaying it until user interaction is not an option, as we rely on the auto-play option.

    Also lazy-loading the carousel is not viable, as the carousel is the first element of the viewport (aside the header of the site).

    Any other suggestions?

  • Ying
    March 25, 2026 at 2:55 pm

    I think it’s because the carousel is at the top of the page and is above the fold, so defer does not really do anything, as it needs to be interacteble immediately after the page load.

    In this case, I don’t think there’s much that can be done, unfortunately.

    I checked both of your sites’ performance, and both are pretty good. I don’t think you need to worry about this.

  • osaopaulo
    March 27, 2026 at 10:42 pm

    Okay, Ying.

    Thanks for checking!

  • Ying
    March 30, 2026 at 7:17 am

    No Problem 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.