Avoid CSS @import

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.

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.

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.