Critical CSS issues and FOUC
If you notice that your site is loading unstyled for a few moments before correcting itself, you could be experiencing FOUC, that is, a "flash of unstyled content" related to the Load CSS Asynchronously option.
FOUC, or other issues with critical CSS could be addressed in one of the following ways:
Mod_pagespeed can conflict with this feature and cause a broken layout, so we recommend disabling it.
Disable the option on specific pages
If you're only having the problem on certain pages, you can disable Load CSS Asynchronously just for those pages.
Generate page-specific critical path CSS
Exclude Files From Loading Asynchronously
If the above methods don't work, issues can be resolved by excluding any problematic file(s) from being loaded asynchronously. To do that, follow this guide:
Edit the generated Critical CSS
If you would like to edit the critical CSS generated by our tool, follow these steps:
- Use WP Rocket to automatically generate critical CSS for your site.
- Disable automatic generation in the future by installing this helper plugin.
- The generated CSS files are stored on your server: wp-content/cache/critical-css
If you are a developer and understand CSS, you may edit those directly.
- Clear the WP Rocket cache
Use Fallback Critical CSS
In cases where our tool cannot generate the correct critical CSS, you can use the fallback field to specify your own. This will be applied in any case where the critical CSS does not already exist. To generate the necessary CSS you can use this Critical Path CSS Generator tool:
- Turn off WP Rocket before you start using the tool!
- Enter your URL in the tool and copy the generated CSS into the Fallback critical CSS field in WP Rocket:
- Delete any existing files in the /wp-content/cache/critical-css/1 folder.
- Activate the "No Auto-generated Critical CSS" helper plugin (found above)
Heads up! You may have to edit any relative URLs in the code (e.g. for background images, fonts etc.) and turn them into absolute URLs manually.
For example, if the generated CSS contains a relative reference to a font, like this:
The relative path (indicated by
../ in the URL) will not be correct when removed from its original context. Therefore you need to replace it with the absolute, correct path, for example:
To ensure that your Fallback CSS continues to be used, and isn't overridden by our automatic generation you should also: