Avoid CSS @Import

> > Avoid CSS @Import

Updated: November 6th 2015


What is @ CSS import?

It is a method of importing one css file from inside another css file. It looks like this...

@import url("style.css")

Why not use it?

The @import method of retrieving CSS files creates some problems that affect your page speed. The largest problem is that it causes files to load sequentially (one has to wait for the other) instead of in parallel (at the same time). This wastes times and round trips and makes your web page load slower.

How to avoid css @ imports

Look in your HTML and CSS files and locate the @ import calls. You can also use the online CSS delivery tool which will detect them.
Again, they look like this and will usually be near the top of the file.

@import url("style.css")

Rather than call that css file using the import method it is better to just keep that additional css in just one file (copy and paste the imported css into the original css file). If you can not do that for some reason, include those css files from the html file using the following code...

<link rel="style.css" href="style.css" type="text/css">

Make sure to replace "style.css" with the location and name of your CSS file.

Check all your CSS files

Tip: Use our CSS tool to find out if you have @imports on your page

Many websites have several CSS files (you should try to combine those CSS files). If you have more than one CSS file, check each file for imports.

If a CSS file calls another CSS file via the @ import method, it is particularly bad for page speed. This adds additional steps for the browser to load your web page, causing the browser to download, parse, and then go out and get the next CSS file before it starts displaying your page.
This can be avoided by using the link method shown above.

It is best if no @imports are used at all

Patrick Sexton by