The critical CSS in your project is the CSS that’s used to style the above-the-fold content of your website. Above-the-fold content is what users see on your website first, which can include navigation and other elements. So it’s very important to properly style and render this part of the website as quickly as possible.
Before the browser can render content it must process all the style and layout information for the current page. As a result, the browser will block rescources until external stylesheets are downloaded and processed, which may require multiple roundtrips and delay the time to first render. As well as the time required to download and parse the stylesheet.
For browsers which don’t support HTTP/2 yet there is an even further overhead from the round-trip time to open a new connection to the web server. To solve this problem, PageSpeed recommends adding inline CSS to the HTML document. This doesn’t mean we want to embed the entire stylesheet into the document, instead we only inline the CSS required to display the initial viewport when loading the page. (above the fold).
One thing that we’d would like to mention is that your visitors probably use a myriad of devices with different viewports (like mobiles and tablets) to visit your website. So, above-the-fold content is not going to be of much help by itself. To solve this issue, you should also consider any CSS related to the layout and typography to be critical as well.
Fortunately, there are techniques that allows us to optimize the delivery of our CSS and mitigate the blocking. This technique is known as optimizing the critical rendering path.
How to inline CSS
In-lining CSS is fairly easy and straight forward. Let’s get to it:
1. Identify – Identify your theme’s critical css. You can do this by simply visiting sitelocity, it will automatically generate critical css for you. Optionally, if you prefer manual, one can be found here. You’ll want to input your domain in the top bar and paste your theme style.css.
2. Copy – Copy the generated content, we went with sitelocity and copied our css:
3. Apply – The final step is to load the critical CSS in WordPress. There are different methods to do this.
3.1) You can either use a plugin like AutoOptimize or WPRocket, where you can set the fallback critical css, (wp-rocket) or inline/defer (auto-optimize) like so:
3.2) The alternative (our preferred way) is you can load it directly from the <head> . Copy the CSS from the generator and insert it straight under your theme’s header (within the style brackets, view image below)
That is it! Your website is now properly pre-rendering critical-CSS.