Enable/disable defer loading of CSS

CSS is used to style a webpage. It is commonly used to add fonts, colors, spacing, etc to a page. When a website uses a theme, which is pretty common for CMS like WordPress, these styling definition is written into multiple CSS files based on how and where they are going to be used. Similarly, the plugins for these CMS also adds up more CSS file to render their widgets or other contents on the webpage.

Performance Issues

Everything comes with a cost, the more CSS files you add, the browser is going to take more time to download, parse, and render them before the visitor can see any content on the screen. This delay in rendering the content on the screen is what know as “First Contentful Paint” or FCP matrix of Google’s Core Web Vitals.

While more CSS files add up those many network round trips to the server, to simplify our understanding hereafter, we will talk just in terms of the size of the total CSS. Let’s say, no matter how many CSS files a website is using, the total size of those files is 1 Megabyte. And without bringing much complexity to the telecommunication network, let’s assume it’s going to take around 4 seconds to load these CSS definitions on a standard 3G network.

Now, this 4 seconds of duration is a blocker for the entire page, because unless everything has been downloaded, and parsed, the browser is not going to render anything on the screen. This 4 seconds is a huge time and sufficient enough to bounce the visitor.

Why defer CSS

In the above example, you see the total CSS used on the entire page is 1 MB. But should we load really everything, even those stylesheet definitions that are going to be used towards the footer area? No, right. We can first load only those styles which are sufficient to render the content on the visible area of the screen, engage the user by allowing them to start reading the page from the top, and continue loading the remaining styles in the background. This approach is what we also call, critical and non-critical CSS loading.

The styles used above the fold, aka visible area of the screen, are critical CSS because it’s the bare minimum load required to engage the user. And the styles used below the fold can be called non-critical because they can be loaded a few seconds later, or just before the user is about to scroll the page.

Toggle CSS defer

When you enable CSS deferring, RabbitLoader automatically takes care of the critical and non-critical CSS in a unique way for every single web page of the website. This ensures the minimum render-blocking time due to CSS loading and parsing.

This option is available on the Console->Settings->Page Rules. If you are new to the page rule, please take a look here. Click on the modify button for the page rule you want to modify. If you want this new setting to be effective for the entire website, choose the ‘*’ rule.

Turn on the checkbox for CSS optimization.

When CSS optimization is turned on, the non-critical CSS is deferred. This improves the page load time and improves Core Web Vital health.

Exclude CSS files from deferring

For any reason, if you would like RabbitLoader to never defer some CSS files, you can put those file names in the “Skip lazy load” box separated by space. If there are multiple files with the same name, you can also include the path of the file. For example, /folder1/style.css and /folder2/style.css