[Resolved] Page hero shapes FOUC

Home Forums Support [Resolved] Page hero shapes FOUC

Home Forums Support Page hero shapes FOUC

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2046900
    Eric

    I’m using shapes at the bottom of a page hero block on my site, and I noticed that when the site is first loaded, I have a FOUC consisting of the shapes (in black and white, not their final colors) appearing one on top of the other (see screenshot below), before eventually it loads and appears as expected. I’m not sure if this is an issue with GeneratePress, GenerateBlocks, or my openlitespeed cache. Any ideas on how to resolve this?

    screenshot

    #2046954
    Elvin
    Staff
    Customer Support

    Hi there,

    Can you link us to the site in question? So we can observe closely and figure out why it occurs.

    You can use the private information text field to provide the site details. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #2046988
    Eric

    Sure, the site is …

    #2047013
    Elvin
    Staff
    Customer Support

    Ah I see now.

    It’s an optimization issue.

    Your site is loading the necessary CSS for layout later than it should as there’s a lot of scripts and styles being loaded on your site.

    To address this consider the following:
    – Install an optimization plugin (for caching, minification and combine to reduce the number of requests)
    – Consider reducing the number of plugins installed so there are less things to load

    A wise man once said:
    "Have you cleared your cache?"

    #2047016
    Eric

    Well, option #2 really is not an option as I have a fairly complex web app that requires a lot of plugins. πŸ™‚ As for option #1, I’m using the LiteSpeed Cache plugin (https://wordpress.org/plugins/litespeed-cache/) for optimization. It has worked great up until my use of shapes with GenerateBlocks, but I’ll take a look to see if there is a configuration option I can change to fix this.

    #2047152
    Elvin
    Staff
    Customer Support

    Well, option #2 really is not an option as I have a fairly complex web app that requires a lot of plugins. πŸ™‚ As for option #1, I’m using the LiteSpeed Cache plugin (https://wordpress.org/plugins/litespeed-cache/) for optimization. It has worked great up until my use of shapes with GenerateBlocks, but I’ll take a look to see if there is a configuration option I can change to fix this.

    Try doing an A/B/C/D test of different variation of setting for LiteSpeed Cache and see which ones give the best yield.

    You can start w/ the simple ones like the ones I’ve previously mentioned. You then start enabling more from there. (lazy load, object cache, CDN, JS combine, etc).

    A wise man once said:
    "Have you cleared your cache?"

    #2047801
    Eric

    I didn’t have much luck with my initial testing of LiteSpeed Cache configurations (and was not inclined to spend much time on it, as everything was working fine before I started using shapes in my page hero blocks). However, I did discover that this particular issue seems to go away when I insert the page hero using elements rather than as a block directly on the page, so I’ll just do that for now.

    #2048102
    Elvin
    Staff
    Customer Support

    If I may advise further:

    Since it has a lot of plugins, you may want to consider hiring an optimization specialist for it as optimization itself is a pretty tedious work because no sites are every 100% the same.

    There are guidelines but there’s no 1 combination of settings that applies to all sites because every site has variations of plugins installed making optimization complicated. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2048120
    Eric

    I guess you can advise that, but I’m not going to hire an optimization specialist just to fix my FOUC issue with shapes. πŸ™‚ I already implement a number of optimization strategies (including page- and server-level caches, object cache, CDN, disabling scripts/stylesheets where they’re not needed, etc.) and my site is generally pretty fast and earns decent pagespeed scores, etc. (particularly considering how complex/heavy it is). There is always more optimization work to be done, but making my site faster is not my primary concern right now. It is the FOUC for shapes (when shapes are included in a page hero block directly on a page).

    When I use the shape in a page hero block added via Elements, it’s fine. The issue is probably with how LiteSpeed Cache is handling the critical CSS for the page or something, but I’m not going to spend much time or money investigating it because I can just use an element. I’ll mark this as “resolved” since it is probably a LiteSpeed configuration issue or conflict and not a GeneratePress issue specifically. Anyone else experiencing the issue, though, may want to try adding their page hero blocks with shapes via elements rather than directly on the page.

    #2048126
    Elvin
    Staff
    Customer Support

    Yeah, it never ends. Google will always set a new metric.

    Critical CSS is pretty tricky to deal with too. That has to be tweaked or else, it’s actually detrimental to leave on because it messes with the loading of assets. Usually causes CLS.

    I’d consider tweaks like disabling Critical CSS or atleast set GenerateBlocks’ CSS from internal to “External CSS” and then exclude it from being combined and see if it improves on things.

    Thanks for letting us know. Glad you found a workaround. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

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