Hello readers, today I guide you "Why avoid @CSS import?".

What is @CSS import:- The method of importing one CSS file insdie another CSS files is know as @CSS importing. It looks like this.

@import url("style.css");

Why not in use:- The @import method finds the CSS files which creates some issues that affect your web page speed. The most significant problem is it causes documents to load sequentially (one has to wait for the other) rather than in parallel (at the same time). Hence consumes and wastes times and the round trips and makes your webpage load slower.

How to avoid css @ imports:- Check in your HTML and CSS files and track down @ import calls. Also to find those files you can use the online CSS delivery tool.

@import url("style. css");

Alternatively than call that css file using the import method, it is better to just keep that additional css within one file (copy and stick the imported css into the original css file). If you are unable to do that by any reason, you can include those css files from the html code file using the pursuing code.

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

Ensure that you replace "style.css" with the location and name of your CSS file.
 

 Examine your CSS files;-

Hint: Use our CSS tool to determine if you have @imports on your web page

Most of the sites have several CSS files (you should try to those CSS files) hence if you have more than one CSS file you should check each file for imports.

Perhaps a CSS file call another CSS file with the @ import method, it is particularly bad for page speed. This kind of adds additional steps for the browser to kick off your web page, creating the browser to down load, 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 being used at all