Enable/disable defer loading of CSS

CSS plays a pivotal role in crafting the aesthetic appeal of webpages, encompassing elements such as fonts, colors, and spacing. In the realm of content management systems (CMS) like WordPress, where themes are frequently employed, styling definitions are often dispersed across multiple CSS files, tailored to their specific application and placement within the website. Additionally, plugins utilized within these CMS platforms introduce further CSS files to facilitate the rendering of their respective widgets and content elements on the webpage.

Performance Issues Due to Multiple CSS Files

Indeed, every addition of CSS files imposes a cost in terms of increased load time for web browsers. This delay in downloading, parsing, and rendering CSS files before content can be displayed on the screen directly impacts the user experience and is measured by metrics like “First Contentful Paint” (FCP) in Google’s Core Web Vitals.

Let’s simplify the understanding by considering the total size of all CSS files on a website to be 1 Megabyte. Regardless of the number of CSS files, this total size is crucial for our analysis. Assuming a standard 3G network, it typically takes around 4 seconds to load these CSS definitions.

This 4-second duration acts as a significant blocker for the entire page. Until all CSS files are downloaded, parsed, and processed by the browser, rendering of any content on the screen is delayed. Such a delay is substantial enough to potentially prompt visitors to bounce from the site, underscoring the critical importance of optimizing CSS delivery for enhancing user experience and reducing bounce rates.

Why defer CSS

In the scenario outlined above, where the total CSS size for the page amounts to 1 MB, it’s evident that loading all stylesheet definitions, including those destined for the footer area, isn’t optimal. Instead, a more efficient approach involves prioritizing the loading of styles necessary to render content within the visible area of the screen—the so-called “above the fold” content.

By initially loading only critical CSS, we enable users to swiftly engage with the page, commencing their reading journey from the top without undue delays. Concurrently, non-critical CSS—pertaining to elements below the fold or beyond immediate visibility—can be deferred for subsequent loading. This methodology, often referred to as critical and non-critical CSS loading, ensures a smoother user experience by balancing the need for immediate engagement with the optimization of loading times.

Critical CSS, focusing on the essentials required for initial content rendering, serves as the cornerstone of this strategy. Conversely, non-critical CSS, earmarked for elements lower on the page, can be loaded in a staggered fashion, either a few seconds after the critical CSS or precisely before users are anticipated to scroll down, thus maintaining an optimal balance between performance and user engagement.

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, a critical CSS is generated for each page including only the styling required for above-the-fold page content, and 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

This technique can also be used when critical CSS generated by RabbitLoader is missing some styling due to how CSS is extracted.

Re-trigger Critical CSS build

While RabbitLoader automatically detects styling changes and regenerates critical CSS, it may miss some styling changes if they are done outside the main theme or done with the old class name. For example, if a class .title{color:red} is changed to .title{color:blue}, this may not retrigger CSS generation.

Critical CSS looks for the classes of the BODY tag and retriggers when the class list is modified. You can include a new class in the BODY tag and increment it when CSS is modified. For example, if it is WordPress and the last modified CSS affecting above-the-fold CSS was modified on 10th April, the below class be added to the BODY tag-

$className = base64_encode(strtotime("2024-04-10 23:40:59"));

Include the $className in the BODY tag as <body class=".....existing classes..... $className"> which will then be picked up by RabbitLoader.