{"id":1898398,"date":"2021-10-19T09:58:00","date_gmt":"2021-10-19T07:58:00","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=1898398"},"modified":"2023-07-26T14:20:11","modified_gmt":"2023-07-26T12:20:11","slug":"critical-css","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/critical-css\/","title":{"rendered":"Critical CSS in WordPress: What It Is and How to Optimize CSS Delivery"},"content":{"rendered":"

When running a performance audit on Google PageSpeed Insights, you\u2019ll find that Google recommends you to \u201celiminate render-blocking resources<\/a>\u201d almost every time. Meaning that you should always load your critical CSS and JavaScript in priority.<\/p>

\"Critical<\/figure>

But how to decide which CSS is critical and which one is not? Which part of your website should you \u201cdelay\u201d to speed up another? It\u2019s all about priorities and finding which CSS resources are essential and how to optimize their delivery. <\/p>

Let\u2019s dive in. <\/p>

What is Critical CSS and Why it Matters for Performance?<\/h2>

Critical CSS is a technique that extracts the CSS above the fold to display the page as quickly as possible. It\u2019s like taking the bare minimum CSS to display the content being viewed by a visitor.  <\/p>

\"Critical
Critical CSS located above-the-fold 
<\/figcaption><\/figure>
\ud83d\udca1 Critical CSS makes you rethink how the browser loads CSS: you need to prioritize the CSS for above-the-fold content.<\/td><\/tr><\/tbody><\/table><\/figure>

In other words, critical CSS is key to optimizing performance. Before rendering the page, your browser needs to download and parse the CSS files, making those files a render-blocking resource. The bigger your CSS files are, the longer it will take for the browser to process them. All those requests created by heavy CSS files will increase the time for a web page to load, upsetting visitors <\/strong>and Google. <\/p>

The page speed may also affect your SEO performance because of the new ranking factor, including the Core Web Vitals. They are a set of factors implemented by Google to measure the user experience \u2014 including how fast a page is. The better the experience is, the better will be your ranking. <\/p>

Are you familiar with the six Lighthouse metrics that measure performance<\/a>? Two of them – First Contentful Paint (FCP)<\/a> and First Input Delay (FID)<\/a> – measure the perceived speed of your website. If those metrics are in good shape, so will be your user experience measured by Google<\/a>. However,  if both KPIs are in the red, you better optimize your critical CSS.<\/p>

Critical CSS Explained in Plain English<\/h3>

In plain English, critical CSS is an optimization task. It\u2019s like telling your browser to load only the CSS being viewed by the visitor. This helps to improve the perceived speed, meaning how fast the website seems to a visitor.<\/p>

Let\u2019s do a quick exercise with the image below. Imagine you are a mobile user accessing a website. <\/p>

Scenario #1 <\/strong>– On top, there is a page with render-blocking CSS. You see a blank page until the entire CSS file has loaded. <\/p>

Scenario #2 <\/strong>– On the bottom, the critical CSS is rendered first. You start to see the page way earlier since the browser has already started to load the most important stylesheet. <\/p>

Question: Which scenario \u201cfeels\u201d faster to you?<\/strong><\/p>

\"Top:
Top: loading a page with render-blocking CSS
Bottom: inlined critical CSS (above-the-fold-content)
<\/figcaption><\/figure>


Answer: We all agree that the perceived speed of the bottom line is better. <\/em><\/p>

Your visitor will sense a perceived decrease in page-load time due to faster page rendering when done properly.<\/p>

Why is Critical CSS Necessary?<\/h3>

Loading a CSS stylesheet is typically how you style your WordPress site. CSS is the language used to describe a web page, such as the colors, the layout, and the fonts. Without CSS, the web would look like our left column below: <\/p>

WP Rocket\u2019s site without CSS<\/td>WP Rocket\u2019s site with CSS<\/td><\/tr>
<\/td><\/td><\/tr><\/tbody><\/table><\/figure>

What Does Critical CSS Rendering Path Mean?<\/h2>

The Critical Rendering Path is the series of tasks the browser needs to perform to render a page on the visitor screen. For example, those tasks include downloading photos, the fonts, and the text to display on the web page. <\/p>

As seen previously, the browser also needs to download your CSS files to render the proper layout of the page. If your files are really large, visitors will end up waiting until the whole file has been downloaded. <\/p>

But what if the browser could start to render the CSS as the download progresses? <\/p>

Imagine a way to mitigate the blocking and start the CSS delivery as soon as possible. This technique is precisely known as the optimization of the critical rendering path. <\/strong><\/p>

\"The
The critical rendering path
<\/figcaption><\/figure>


The browser follows five steps <\/strong>until it renders the page to the visitors. A lot can happen during this process. That\u2019s why we should make sure that each step is completed as quickly as possible. <\/p>

Two questions are now coming up: how to optimize each step? How to make sure that we have the most efficient CSS delivery? <\/p>

These questions take us to the next section. You\u2019ll learn how to improve rendering times with the critical CSS technique (optimize CSS delivery) and eliminate the render-blocking CSS errors. <\/p>

The 3 Steps to Optimize CSS Delivery\u00a0on WordPress<\/h2>

CSS controls your WordPress site\u2019s visual formatting and style, but if the CSS file isn’t delivered optimally, you may end up with a slow web page. <\/p>

So one of the best ways to improve your WordPress site\u2019s performance is by optimizing how <\/em>and when<\/em> the CSS code is delivered. There are three main steps to optimize CSS delivery for your WordPress site, namely: <\/p>

Step 1: Find and generate the critical CSS<\/strong> \u2014 that’s identifying the minimum CSS code you need to display the above-the-fold content. You need to find out what the user can see in the viewport when they first load the page. Determining the right critical CSS for a page can be complex because visitors use many different screen sizes, such as desktop, tablet, and mobile. <\/p>

\"\"
Different above-the-fold content for Desktop, Tablet, and Smartphone – 
Source:  Kinsta<\/a><\/figcaption><\/figure>

How to find critical CSS <\/strong><\/p>

WebDev<\/a> gives you three tools you can use to identify critical CSS:<\/p>