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:

Disable mod_pagespeed

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: 

Exclude files from Async CSS

Edit the generated Critical CSS

If you would like to edit the critical CSS generated by our tool, follow these steps:

1. Use WP Rocket to automatically generate critical CSS for your site.
2. Disable automatic generation in the future by installing this helper plugin.
3. 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.
4. 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:

1. Turn off WP Rocket before you start using the tool! 
2. Enter your URL in the tool and copy the generated CSS into the Fallback critical CSS field in WP Rocket:
   

   

Note: You do not need any JavaScript snippet provided by the tool. Just copy the CSS into WP Rocket’s settings, it will take care of the JS part automatically.

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:

@font-face{font-family:droid_serifregular;src:url(../DroidSerif-webfont.eot);
	

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:

@font-face{font-family:droid_serifregular;src:url(http://example.com/wp-content/themes/neutro/font/droid_serif_regular/DroidSerif-webfont.eot);
	

To ensure that your Fallback CSS continues to be used, and isn't overridden by our automatic generation you should also: 

3. Delete any existing files in the /wp-content/cache/critical-css/1 folder.
4. Activate the "No Auto-generated Critical CSS" helper plugin (found above)