Don't use CSS @import

The CSS @import function makes it possible to include external CSS files in a document. It can be used as a way to import CSS scripts within a stylesheet tag in HTML documents or to add extra rules within CSS files.

Why avoid using @import?

CSS @import is notorious for loading every single imported file separately instead of paralleled. In other words, the browser of the visitor has to wait for every imported file to load instead of being able to load all your CSS files at once. This can heavily slow down your website, depending on the amount of CSS files you import. Also, when you use @import to include extra CSS files it creates extra HTTP requests, extra requests for the browser of your visitor to deal with.

How to detect if my site is using @import?

Use the CSS Delivery Tool to automatically detect the use of CSS @import tags on your web page.

The @import function can be used both in the HTML pages (in style tags) or in CSS files. One key characteristic is that you always find it in the top lines of CSS scripts; @import has to be used in that position.

Usage in HTML files

In HTML pages the @import code usually looks something like this: <style type="text/css">
@import url("cssfile.css");
a {color : #000; }
# more CSS rules below #
</style>

Usage in CSS files

In CSS files you can usually find it in the top lines of the document looking like this: @import url("cssfile.css");

How to remove & replace @import?

What you first should do is remove all the @import rules from your CSS code. Then you open all the CSS files you use for the web page (also the ones you don’t use @import for), copy & paste all the codes within those files, combine them all in one large CSS script and call it from a HTML header within style tags (the same can be done with Javascripts). Combining all CSS scripts in one bigger script and inlining it in the HTML markup is the best way to deal with CSS scripts when it comes to page speed. There is no reason to call separate CSS files (or even a single one), unless your site uses extremely large CSS scripts.