FOUC issue with elementor

  • Unknown's avatar
    marketing095568cbd0 · Member ·

    Trying to clean up performance and fix some FOUC/visual flicker on load, but I’m starting to think plugin overlap is part of the problem.

    Site: https://hmcole.com

    Stack:

    • Elementor
    • Perfmatters
    • Jetpack (Boost + core)
    • Yoast SEO

    At this point I’ve tweaked a lot, but I’m not confident the settings aren’t fighting each other.

    Main question:
    What should actually be ON vs OFF across these?

    Specifically:

    • Should Perfmatters handle all JS/CSS optimization and Jetpack Boost be mostly off?
    • Any Elementor settings that conflict with Perfmatters (defer/delay JS, CSS loading)?
    • Yoast sitemap/SEO settings that overlap with anything else?
    • Anything in Jetpack that’s known to cause FOUC or render delay?

    Goal is simple:
    No flicker, clean load, and no redundant optimization layers stacking on top of each other.

    Curious how others are structuring this stack without things stepping on each other.

    The blog I need help with is: (visible only to logged in users)

  • michaelmedahunsi · Staff ·

    Hi @marketing095568cbd0,

    Great question! Stacking multiple performance plugins is one of the most common causes of FOUC, and you’re right to suspect overlap.

    The golden rule here is: only one plugin should handle each optimization task. When two plugins both try to defer JS, optimize CSS loading, or concatenate files, they can fight over load order and produce exactly the kind of flicker you’re seeing.

    Here’s what I’d recommend for the Jetpack Boost side of things:

    If Perfmatters is your primary optimization tool (which is common with Elementor sites), turn off these Jetpack Boost features to avoid duplication:

    • Optimize CSS Loading (Critical CSS): off
    • Defer Non-Essential JavaScript: off
    • Concatenate JS: off
    • Concatenate CSS: off

    You can safely keep it enabled in Boost:

    • Image CDN — unless Perfmatters or another plugin is already handling image optimization
    • Page Cache — unless you’re running a separate caching plugin

    The reverse approach works too. You could let Boost handle the CSS/JS optimization and disable Perfmatters’ equivalent settings. Either way, the key is making sure each job is handled by exactly one plugin.

    As for the Elementor, Perfmatters, and Yoast sides of the equation – those are outside what we can configure for you here, but I’d suggest reaching out to Perfmatters support for their recommended Elementor compatibility settings. They may have specific guidance on which of their defer/delay options play nicely with page builders.

    On the Yoast front, its sitemap and SEO features generally don’t overlap with performance plugins — those operate at a different layer (metadata and indexing rather than CSS/JS delivery), so that’s unlikely to be contributing to the FOUC.

    After making changes, clear any page caches and regenerate Critical CSS (if you’re keeping that feature active in whichever plugin you choose) to make sure everything is built fresh.

    Hope that helps point you in the right direction!

Log in or create an account to reply