Avoid CSS @import

CSS @import: A Quick Overview

The CSS @import process, or rule, entails calling style sheets and CSS files from within another CSS file. While this provides a method for developers to better manage and organize their style sheets, when the @import rule is used, it causes these CSS style sheets and files to be load one by one, versus in parallel. Like JavaScript, CSS is render-blocking by default, meaning that the browser will not start loading any other content until the CSSOM (CSS Object Model) is downloaded, parsed, then executed. Without any of the styles applied to the page, the page is unusable. You might see this on some pages where you see a “flash” of the unstyled content right before the CSS is applied.

How to Avoid CSS @import

To avoid seeing the CSS @import message in a website speed test report, the best method is to call the CSS from within the HTML itself, not from within the CSS file. The issue is most prevalent when the @import message is included within the CSS file. This method uses the tags inside HTML, which should not affect the load time of the web page. You can also set this to load asynchronously, especially if the CSS is not critical to the above-the-fold page content.

CSS @import Additional Optimizations

In addition to removing the @import message, some other CSS optimizations include reducing the number of CSS files you are using. Typically, websites will use somewhere between 2-3 CSS files. For some larger organizations, especially with different global websites, may require more style sheets, themes, etc. And for smaller organizations, some web developers can get that number down to just a single CSS file, but that is typically not commonplace. And obviously, you do not want to have a unique style sheet for every single page. We will discuss other CSS optimizations later in this guide, like minifying, inlining, or combining CSS, but it is best to avoid the @import statement altogether.



Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.


PageSpeed Terms

PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.



YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.