How to Add Critical CSS to WordPress

What is Critical CSS?

Critical CSS is the web page styling required for the ‘above the fold’ content – the first part of the page that is seen upon loading. Adding critical CSS to WordPress can be achieved either manually, or through the use of a plugin and/or external services.

By adding critical CSS to WordPress, you are deliberately creating a new CSS file that holds the limited styling for the above the fold content. If you are working with combined and minified files, this will mean not having one singular CSS file.

This limited CSS file will be loaded first, as a priority as part of the critical render path – and help the page load as quickly as possible without a Flash Of Unstyled Content (FOUC). While the user is still viewing the first fold, the remainder of the page will load – in the background.

Do You Really Need Critical CSS?

If a site is properly optimized, there likely isn’t a need for worrying about critical CSS.

There are a few problems you can encounter, such as every device having a different viewport, and hence ensuring that you truly have all the styling information required for what ‘above the fold’ means for each device is difficult.

This can also introduce issues with future updates and make a less seamless workflow for editing the website.

However, if you are having issues with your initial page load speed or appearance, or looking at render blocking issues within speedtests, critical CSS could be the answer to help resolve the issue.

Adding Critical CSS to WordPress

If you are using OpenLiteSpeed, the inbuilt plugin LS Cache has the ability to generate critical CSS automatically from your pages, either in the background or the foreground.

For other web servers, it is recommended to use Autooptimize Critical CSS:

This plugin pairs with to scan your site, generate the relevant critical CSS, and apply them to your pages via the plugin.

Need Help Adding Critical CSS to WordPress?

This is part of our optimization service. We can help you optimize your site above and beyond adding Critical CSS to WordPress, just let us know what you are trying to achieve, and we will let you know how we can help.