What Is CSS @import And Why Can It Slow Down Websites?

The CSS @import rule can be a convenient way to load additional stylesheets. But it can also make resources on your website render more slowly, causing your website to take longer to render.

What is CSS @import?

The most common way to load a CSS file is by using a link tag:

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

Another method is to reference one stylesheet inside another, by using @import "url" in CSS:

@import "imported.css";
/*contents of link.css */

This way, the browser starts another stylesheet request after loading the initial CSS file.

Why does CSS @import slow down your website?

Most CSS files are render-blocking resources, which means the browser has to download them before it can show the user any content.

When multiple stylesheets are added without @import (by using link tags in the HTML instead), the browser can download them in parallel.

In contrast, using @import to reference one CSS file inside another means they are downloaded sequentially, which takes longer. As a result, the website loads more slowly.

For example, this often happens when importing Google Fonts in a CSS file.

This request waterfall shows how @import creates a sequential dependency, slowing down the website. The Google fonts CSS only starts loading after style.css has been downloaded.

The longer the @import request chain is the longer it will take to render the website.

How to avoid using @import

Use a standard stylesheet link tag instead of @import

If you can edit the source CSS file, remove the @import and instead, reference the secondary CSS file in the HTML document using a <link> tag.

Instead of doing this in a CSS file:

Use this in your HTML :

<link
  rel="stylesheet"
  href="//fonts.googleapis.com/css?family=Press+Start+2P"
/>

If you can’t edit the CSS file you can use a preload resource hint to help the browser discover (and download) the @import resource sooner.

<!-- This is the CSS file that contained the original @import statement -->
<link rel="stylesheet" href="parentCSS.css" />

<!-- This tells the browser to download the imported resource right away -->
<link
  rel="preload"
  href="//fonts.googleapis.com/css?family=Press+Start+2P"
  as="font"
/>

How to check if your website uses @import (and could be faster)

1. Go to debugbear.com/test
2. Enter your website’s URL
3. Scroll down to the Recommendations
4. See if the recommendations include removing @import

CSS @import in HTML style tags

In theory, using @import inside a style tag in the HTML would allow browsers to discover the stylesheet right away and start downloading it early.

<style>
  @import url(file.css);
</style>

However, browsers don't always support this well. While some of the issues in that post have been addressed there's still a number of problems with @import.

@import in HTML is easy to avoid, simply use a stylesheet link tag instead.

<link rel="stylesheet" href="file.css" />

Conclusion: CSS import vs link

Try to use link tags instead of CSS @import whenever possible so that your website renders as quickly as possible.

When using link tags isn't possible consider preloading the stylesheets loaded with @import.

Monitor site speed and Core Web Vitals

Want to optimize page speed to rank higher in Google and deliver a better user experience? DebugBear can continuously monitor the speed of your website, provide recommendations to optimize page load time, and track website performance as experienced by your real-world users.

Start a free 14-day trial today!