Flash of unstyled content before CSS appears to load

  • Resolved ahillmortons

    (@ahillmortons)


    1 year ago

    Hi,

    We are using style pack on 2 sites. It’s doing a great job on both for numerous things. The first reason we came across it was for the FSE compatibility which we have turned on.

    model-engineer.co.uk/forums
    modelboats.co.uk/forums

    I think related to the FSE (which from my understanding loads a single page with a template and adds in the header and footer template parts), for a fraction of a second when any forum page loads there is a flash of unstyled content (like when the style sheet hasn’t loaded), and then the page appears as it should.

    It appears to last longer where the connection isn’t quite as good or the OS/browser has less resources available.

    Is this something you are aware of? and do you know if there’s a fix for it?

    WordPress 6.3
    FSE Lawson Theme
    bbp style pack 5.6.8

    Many Thanks,

    Andy

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • codejp3

    (@codejp3)

    While I have not experienced this first-hand, I understand that it has been an issue since the introduction of FSE themes (and pages that use the Gutenberg editor).

    It has to do with template file priority order. Here’s a detailed link explaining it:

    https://github.com/WordPress/gutenberg/issues/33989

    As for how it affects Style Pack (and every other plugin or code that adds CSS/JS files to pages), the enqueued files don’t get injected until after the proper header.php/.html file is loaded.

    It is still an unpatched issue within WP core, but I will look into any possible intermediary solution for Style Pack. If we can find a suitable solution until WP core is patched, it would help with Style Pack styling, but every other plugin or code snippet would also have to be patched with the temp fix in order to provide a complete solution for you.

    Probably not what you wanted to hear, and I wish I had better news to deliver. All I can say is that we will look into it and see what can be done for Style Pack.

    codejp3

    (@codejp3)

    One more option for you may be a caching/pre-loading plugin that works well with FSE themes. That may be a good option for the time being, and should help overall for all plugins/code that enqueues CSS/JS files. Just a thought.

    Thread Starter ahillmortons

    (@ahillmortons)

    Hi @codejp3,

    Thanks for another prompt response. I suspected it might be a known issue and to do with using an FSE theme.

    I use WPMU and they have some support for pre-loading with their Hummingbird plugin, I’ll see if I can look at pre-loading with that, though I’ve had mixed results using it in the past with it breaking other things – hopefully WPMU support can assist now I think I understand what I need to achieve.

    Thanks again,

    Andy

    codejp3

    (@codejp3)

    I would suggest a system-level caching layer like Varnish, but WPMU doesn’t support it according to this topic (also mentions how it affects Hummingbird, which may not do what you expect based on what I’m reading):

    https://wpmudev.com/forums/topic/varnish-on-wpmu-hosting/

    Another possibility is WP Super Cache. While not a true system-level caching layer, it acts like a caching layer:

    https://www.ads-software.com/plugins/wp-super-cache/

    There may be other, better options, but that should help put you in the right direction.

    I’m going to mark this as resolved for now, but feel free to comment if you have any other questions or issues on this.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Flash of unstyled content before CSS appears to load’ is closed to new replies.

Tags