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)
- Go to debugbear.com/test
- Enter your website’s URL
- Scroll down to the Recommendations
- 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 and provide recommendations to optimize page load time.
Start a free 14-day trial today!
