Archived topic
Page hero shapes FOUC
9 replies · Started by Eric on December 12, 2021
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?
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. :)
Sure, the site is ...
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
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.
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).
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.
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. :D
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.
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. :D
