Avoid Css @import


Staff member
What is @ CSS import?
It is a method of importing one css file from inside another css file. It looks like this...
Please, Log in or Register to view codes content!
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.
Again, they look like this and will usually be near the top of the file.
Please, Log in or Register to view codes content!
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...

Please, Log in or Register to view codes content!
Make sure to replace "style.css" with the location and name of your CSS file.

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

Create an account or login to comment

You must be a member in order to leave a comment

Create account

Create an account on our community. It's easy!

Log in

Already have an account? Log in here.

Latest posts

Top Bottom