Skip to main content

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

· Updated on · 4 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 "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.

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.

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

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

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="//" as= "font"/>

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

  1. Go to
  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.

@import url(file.css);

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

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 and provide recommendations to optimize page load time.

Start a free 14-day trial today!

Site speed monitoring

Get a monthly email with page speed tips