@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:
/*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.
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
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
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.
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.
link tags isn't possible consider preloading the stylesheets loaded with
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!