CSS @import is when an external CSS file is imported from within another CSS file or HTML page. Typically found in the head of the document, these imports are written as ‘@import url(“style.css”)’.
There are various reasons CSS @import may be used – chiefly, it can make things easier to organise when considering a web page’s styling. So, for example, you could create one master CSS file, then a number of smaller CSS files for different aspects of the page’s style (one for typography, one for images etc.), and then use @import to call them where necessary.
Alas, even though breaking the CSS stylesheets down may make things easier in the short term, it’s best to avoid CSS @import as much as possible for the sake of page speeds. Here we’ll look through how CSS @import affects your page speed (spoiler: not in a good way), and alternatives to use instead.
CSS @import and Page Speed
The main problem with using CSS @import is that it severely adds to a page’s loading time, which gives the user a worse experience of the page, which in turn affects the page’s ranking with various search engines like Google. In a roundabout way, it negatively impacts the page’s Search Engine Optimisation.
So, how does this work? Essentially, with CSS @import the browser has to download and parse (that is, look through) each file in order; it cannot download the CSS files in parallel. This means that the person visiting your web page has to wait for their browser to load every imported file separately, rather than having those files being able to load synchronously. Steve Sounders gives a brilliant visual breakdown of how this staggered loading affects your overall page speed.
In addition to this primary problem, CSS @import also affects page speed in other, smaller ways. These include extra HTTP requests being generated by each CSS file imported, which also impact loading time, and, as explained in this article on Lost Saloon, lowering the effectiveness of minification.
As you can see, CSS @import can create a few different issues – so it’s best to avoid using it whenever possible!
Testing for CSS @import
So, it’s pretty clear now that avoiding CSS @imports is worthwhile. But before you can go about changing them, you need to identify where your import calls are!
Luckily there are a host of online tools that make this extremely simple. Gift of Speed’s CSS Optimisation Test gives you list of all the @import tags that have been used on your page as part of its breakdown of how well optimised your CSS use is. Another alternative is GTMetrix’s Performance Report, where if you scroll down the ‘Page Speed’ tab in your results, you will find a section labelled ‘Avoid CSS @import’ near the bottom.
Once you’ve identified any @import calls in your CSS files, you can look into how to fix them.
Alternatives to CSS @Import: merging and links
There are a few different methods that will allow you to avoid using CSS @import. One of these methods is to simply copy and paste the file you were previously importing directly into the original file, removing the need for it to be imported.
Another popular alternative, if you cannot merge your CSS files as in the method above, is to include links to your CSS files (instead of @import calls) within the header of your HTML. This allows files to be downloaded in parallel, which Lost Saloon details how to implement here.