Skip to main content

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

· 3 min read

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:

@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.

Request waterfall showing that content only appears after all render blocking files have been downloaded.

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.

How to avoid using @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:

Response body showing @import for Google Fonts

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"/>

Quickly 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

DebugBear performance recommendation showing sequential request chain caused by @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" />

Get a monthly email with web performance articles.