Skip to main content

How To Preload CSS Stylesheets

Preload tags are a way to tell the browser about important page resources early on. They are used to improve page load time.

In this article we'll explain how to preload CSS stylesheet files, when it makes sense to do that, and how you can preload resources referenced by CSS code.

When can preloading CSS files speed up your website?​

CSS stylesheets are render-blocking resources, which means that no page content can appear until they have loaded.

For example, this waterfall request waterfall shows several render-blocking stylesheets that have to load before content becomes visible.

Impact of render blocking stylesheets

One thing you can notice in this screenshot is that the second stylesheet is loaded using CSS @import. That means it's referenced from the other stylesheet rather than the document HTML.

That's not great for performance! Rather than loading all render-blocking stylesheets in parallel, the browser has to wait until it's loaded the first stylesheet before it can discover the imported one.

This screenshot from the DebugBear page speed test shows the problem nicely:

CSS import chain in a request waterfall

Preloading this stylesheet is a great way to reduce the amount of time that visitors have to wait for the page to render.

How to preload CSS​

To preload CSS you can add a link rel="preload" tag to your page:

  • Specify the stylesheet URL you want to preload in the href attribute
  • The as attribute needs to be set to "style".
<link
  rel="preload"
  as="style"
  href="https://fonts.googleapis.com/css2?family=Quando&display=swap"
/>

We can run a DebugBear experiment to find out how this will impact page speed.

DebugBear experiment result

Ok, we see an small improvement, but it turns out this page has other issues that also need to be resolved.

But when we look at the waterfall we can see that the CSS files now all start loading at the same time.

CSS preload in action

Why preloading CSS won't always improve performance​

Preloading resources helps the browser load resources early when it otherwise wouldn't be able to discover them. However, sometimes you'll see examples where preloading is applied to CSS link tags in the HTML.

Here's what the MDN rel="preload" example looks like:

<head>
  <meta charset="utf-8" />
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style" />
  <link rel="preload" href="main.js" as="script" />

  <link rel="stylesheet" href="style.css" />
</head>

Adding this preload tag won't do anything for performance! The browser doesn't go through the HTML line by line to start loading resources. Instead it has a built-in preload scanner that looks for things like link and script tags before the browser even starts loading the page.

MDN explains this in the article as well:

This example is trivial, as the browser probably discovers the <link rel="stylesheet"> and <script> elements in the same chunk of HTML as the preloads

Preload resources referenced in CSS​

In addition to loading CSS files using preload, you can also use preloading to optimize loading other resources that are referenced in CSS code, specifically background images and fonts.

Background images​

Typically, the browser only discovers background images once any render-blocking CSS has loaded and the page has rendered. As a result, the page initially renders without the background image present.

By preloading background images you can ensure that the page renders with the image already loaded, or at least with the image download having started.

Here's an example of a website that would benefit from loading a background image with a preload tag to avoid a sequential request chain:

Sequential request chain for a background image

Fonts​

Custom web font files are also often referenced from within CSS files. Preloading web fonts makes sure that your website render more quickly and with the correct font used to render text.

Preloading CSS with 103 Early Hints​

Earlier we saw that adding a preload tag to the HTML when the HTML already contains the CSS link tag doesn't improve performance. However, 103 Early Hints are a way to preload resources even before the page HTML is loaded!

You can see an example of that here. The first two CSS files are referenced in early preload hints. In contrast, the two later stylesheets are referenced in the HTML.

Preloading CSS with early hints is especially useful if your website has a poor server response time. You can run a global Time to First Byte test of your website here.

CSS preloaded with early hints

Test and monitor your website speed​

If you're working to improve your website speed, DebugBear's synthetic website monitoring feature is a great way to track your websites speed, investigate problems, and try out potential fixes.

DebugBear monitoring

Illustration of website monitoringIllustration of website monitoring

Monitor Page Speed & Core Web Vitals

DebugBear monitoring includes:

  • In-depth Page Speed Reports
  • Automated Recommendations
  • Real User Analytics Data
Last updated on