FOUC issue with WP rocket latest version and PRO theme latest version.
The dropdown menu FOUC. Please reach out to the WP Rocket team as soon as possible to find the culprit and make it compatible.
Hello Mike,
Thanks for writing in! I can confirmed that there is a known issue in the latest release of the theme with the menu issue. Our developers were already fixing it and a patch release will be available anytime soon. Please watch for it in Automatic Updates.
Please bear with us.
Update:
Please be advised that we have released X 7.2.2 and Cornerstone 4.2.2 that address the menu issue. You can now update to this latest version. This latest release contains fixes for several issues so be sure to check out the changelog (http://theme.co/changelog/).
After doing the updates, always remember to clear all caches (if you are using
WP Rocket,WP SuperCacheorW3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.
I thought this was great news but the issue persists.
Updated to PRO 3.2.2 cleared the cache in the builder. Cleared cache in WP Rocket regenerated critical CSS and cache without success. Tested on staging which bypasses CDN and external cache (Cloudflare).
It’s the drop-down that causes the issue. I shared it in a secure note.
Please make sure to respect our privacy.:
1. Don’t share the site public.
2. Don’t share URL or any print screen public only in a secure note.
3. Don’t share any of our code public, only in a secure note.
Hello Mike,
Since you have done the basic troubleshooting and have updated to the latest version, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
Best Regards.
Please see login criteria to our staging environment for this issue in the secure note.
Remember we do not want to have render blocking js. So defer js and even jquery.js will still be done. Even though we have tested disable all this. The issue is in any of the latest versions of PRO. WP Rocket is also investigating on the issue.
But we will not disable core performance features here. So try to find the root issue, thanks.
- Make sure you are not logged in while testing. Open and browse with incognito/private mode
- Make sure you browse many different URLs as it does not appear on all pages.
- Make sure you test in different browsers. As for me, it Flashes on all pages in Firefox, Safari and Opera but not as frequent in Chrome.
Please make sure to respect our privacy.:
1. Don’t share the site public.
2. Don’t share URL or any print screen public only in a secure note.
3. Don’t share any of our code public, only in a secure note.
Hey Mike,
At the time of FOUC, the minified concatenated WP Rocket CSS is still not available in the page. That included the stack styles. It’s not just the Dropdown having that issue. It’s the whole page (see secure note). It just happens very fast that the dropdown is the most noticeable part.
I’ll post this in our issue tracker but we could not consider this as a bug as a third-party plugin is involved. It would be best to exclude the stack CSS for now.
It would also be the decision of our dev team if they will work this out with WP Rocket devs.
Thanks.
I consider it to be a bug to solve. Yes, it involves third-party plugins which many of your users use.
It worked before and I prefer it to keep on working. Excluding the main CSS file from the PRO theme decrease the performance. I will highlight this to the WP Rocket team as well.
To mention I excluded the stack CSS file without success solving the problem.
But I would appreciate if you could synchronise with them. Can I have the lead developers email so I can put you two in contact? It makes sense as many of your users use WP Rocket. So it’s mutual beneficial here they want to solve it but they need your help.
I would appreciate if this bug could be fixed. As I prefer to minify and concatenated the CSS files for the PRO theme. As it improves performance upon the code base and how it’s built. While others might gain by not concatenated with http/2. But Pro theme is still, no offence, in the category of loading unnecessary CSS and js (bloated builders) so still sees gains of applying these rules.
It makes sense to synchronize with the most used and popular performance plugins in the WordPress community.
Hi Mike,
Just letting you know that FOUC is a known trait of any optimization that has relation to DEFER and ASYNC loading and it’s something that can’t be fixed through the theme or builder.
To explain this further, let’s give an example of normal loading
The CSS1.css will only load if the dependency Script1.js is first loaded, and Script1.js will only load if the document/HTML is ready or loaded too. And it will only render once they are loaded.
Now, with asynchronous loading, all of them are loaded in any order. The document/HTML will start render even if the CSS1.css nor Script1.js is not loaded, and the loading order varies since they are asynchronous. That’s the main reason why FOUC or unstyled content is seen upon page load. It may work and may not work sometimes based on asynchronous loading.
This https://www.proteusthemes.com/blog/speed-up-wordpress-optimization-guide/ may help explaining further.
For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content.
This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score.
Flash of unstyled content (FOUC) can be fixed by utilizing the Critical path CSS option in the WP Rocket settings (just below the render-blocking CSS/JS option). The theory is, that you could add the CSS code needed for the above-the-fold part of the page, so that this flash effect of unstyled text would not appear on page load. This is harder than it sounds. There are tools that are supposed to generate this critical CSS for you, but I did not have much success with them.
I agree with that and I personally ignore some of the recommendations of the analysis tool especially if it has bad effect on my site. Like FOUC and or optimized images (where the tool requires to have 80% reduction of image size where-as it has a bad effect on the retina or high DPI displays, they simply want the image pixelated or with lowe resolution in exchange of speed)
This issue is already added to our issue tracker and we’ll surely investigate it, but this is optimization related in which the theme has no control. The CSS is simply added as per Wordpress standard, and optimization has varying effects depending on asynchronous loading and we can’t promise any solution as even optimization plugins has no permanent solution since Wordpress is a modular type system.
Thanks!
Solved the issue thanks anyway.
It’s due to WP Rockets critical CSS is using the latest published post as a reference to generate the critical CSS. In our case it was a slider preview page. Which did not have the header or hero element. Which made it FOUC as the critical CSS was not used correctly.
We forced a fix in an MU Plugin to specify a page to pick from. To not face this issue once again. This was a long route to find what caused it but now we know.
Glad you sorted things out, and thank you for the info.
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.