×

Prior to rendering any of your site, the browser must process all of the style and layout information for the current page. Until this happens, the browser holds off on displaying any content to the user. As such, Cascading Style Sheets (CSS), like JavaScript, are considered to be render-blocking.

When building your site, your browser performs the following steps:

  1. Examines the HTML and builds the Document Object Model (DOM), which is a structural representation of the HTML that the browser understands;
  2. Examines the CSS and builds the CSS Object Model (CSSOM), which is a structural representation of the CSS that the browser understands;
  3. Combines the DOM and the CSSOM to create the render tree, which details to the browser what should be rendered and how the rendered content should appear;
  4. Displays your site.

To build the CSSOM, the browser must download and process all of the CSS files called for in the HTML.

Methods for Handling Render-Blocking CSS

A critical resource is any resource, including CSS, that may block the initial rendering of the page. The fewer there are of these resources on a page, the less work the browser has to do to render the site on the screen. As such, there are variables that you can optimize to deliver the fastest possible rendering:

  • Reducing the number of CSS files used, and
  • Reducing the size of the CSS files used

How to Eliminate Render Blocking CSS in above the fold content article

Rigor’s monitoring tool allows users to alert on the number of CSS resources used on a page

The following section discusses methods you might consider to optimize the variables mentioned above.

Reducing the Number of CSS Files Used

The fewer critical resources the browser has to download, the faster it can move on to processing any received content and render the site. You can reduce the number of critical resources by doing the following:

  • Using Inline CSS
  • Combining CSS files
  • Using Conditional CSS.

The CSS file (stylesheet.cs) associated with the HTML document contains the following:

.red { color: red };

.blue { color: blue };

.green { color: green };

Suppose that you only need the first line of the CSS file to style your above-the-fold content. When used inline, your HTML would appear as follows:

Combining CSS Files

Your site might have one main CSS file and several supporting CSS files. Depending on how large each of the files are, you might consider consolidating these files. While combining CSS files results in the browser fetching an overall larger file, it reduces the number of calls the browser must make to fetch each individual file. Reducing the overall number of calls (and thus the amount of time it takes for the browser to fetch the files) will reduce the load time of your site.

One area where you might consolidate is instances where the @import method is used. The @import method allows you to import style rules from one style sheet into another.

@import url(“stylesheet.css“);

The issue with using the @import method is that files must be loaded sequentially (a given file that needs to import a secondary file will need to wait for the secondary file to load before it can do so), instead of in simultaneously. This waiting period adds time to your overall page rendering time.

Rather that calling a CSS file that uses the @import method, you might consider copying and pasting the necessary CSS from the secondary file into the original file, which would eliminate the need to download two files that can only be done sequentially.

If moving the CSS from the secondary file to the primary file isn’t possible, you can include the secondary file as you would any other CSS file in the HTML:

<link rel = “stylesheet.css” href=“stylesheet.css” type = “text/css”>

Using Conditional CSS

You might have CSS that is only required in some, not all, instances. For example, you might have CSS that applies only when the site is viewed in a browser below a certain size. While the browser will fetch all CSS files, you can mark certain resources as non-render blocking to improve your site load times. Please note that the browser does place a lower priority in downloading non-blocking resources.

Typically, CSS files are called from the HTML as follows:

<link rel = “stylesheet.css” href=“stylesheet.css”>

However, you can use CSS media queries to address conditional cases and mark a given file as non-render blocking.

<link rel = “stylesheet.css” href=“stylesheet.css” media=”(min-width: 400px)”>

You can use media queries to check the conditions of one or more media features. For example, the above CSS declaration indicates that the browser should block rendering only if the condition is met. As such, you can tailor the presentation of your site such that only the necessary CSS, especially for your above-the-fold content, is render-blocking.

Reducing the Size of CSS Files Used

The browser can get the content processed and displayed to the user faster if there are fewer critical bytes it has to download. In addition to reducing the number of required resources (discussed in the previous section), you can also minimize the transfer size by optimizing and compressing the files fetched by the browser.

Summary

Like JavaScript, CSS is considered to be a render-blocking resource, since the browser holds off on displaying content to your users until all style rules and layout information are parsed and applied. To minimize the delivery delay of content to your users, you may choose to implement one or more of the following techniques to prioritize the loading of CSS for your above-the-fold content and defer the CSS for content that is below-the-fold:

  • Using Inline CSS
  • Combining CSS files
  • Using Conditional CSS.

Advantages

Disadvantages

Inline CSS

Eliminates the download time required by the browser to fetch external style sheets

Increases size of HTML, so appropriate only for small snippets of CSS

Combining CSS Files

Reduces the number of calls the browser makes to fetch required resources

Individual files may take longer to download due to increased file size

Using Conditional CSS

Allows browser to render page quicker due to lower priority placed on render-blocking content that is not required for initial page load

Does not decrease the overall number of calls or download time required to fetch files

Rigor is the first end-to-end digital performance monitoring and optimization platform for digital organizations. Our platform programmatically identifies, prioritizes and remediates the root causes of poor site performance and reliability. If you are interested in learning how Rigor can help you proactively avoid the need for these 404 Fail Pages, click here to try free for two weeks.

Suggested Blog Posts

  • jemois5

    Hi Jennifer,
    You may use an online tool, like the on from sitelocity.com, which extracts the critical css and also combines all the css files into a single one.
    It also generates the JS script to load the css file after the initial page load.
    Cheers