Speed Avoid CSS @Import

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.
They look like this and will usually be near the top of the file.

Replace those imports with the following code.

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