why do css @imports harm performance?

Why do CSS @imports Harm Performance? – 1 Great Positive Answer

by

Why do css @imports harm performance?

When you want to code a web page that loads faster in performance, then you should have to consider many things even these are small tags or multiple numbers of lines of code.

As a front-end developer there is a big challenge then the backend developers. Because the design matters first. If front-end design is not good and high performance then the backend is nothing.

So here the styling of the page is very critical and complex if we are achieving the performance and fast loading webpage.

So to writing the CSS for our web design we use many methods and the most popular methods are:

  1. Inline CSS
  2. Infile CSS
  3. Separate file CSS

The above terms are according to my pronunciation. If you think I am wrong then I apologize because as a front-end developer I better remember these above 3 terms than accurate pronouncing them.

Inline and inline stylesheet doesn’t affect the separate style sheet. And further there are also two types of importing a separate style sheet into your webpage:

  1. Using link tag.
  2. Using @import in your CSS file or style tag.

Why do css @imports harm performance?

Now if we compare both of the above performance wise then the first method wins. Because it is a great way to increase performance of loading your CSS file.

And the second method using @import tag is very harmful in getting performance of a web page. So let’s talk about why do css @imports harm performance of a webpage.

When you use @import in your css file. The web browser waits until your @import css file is fully downloaded. Then it starts downloading the rest of the elements and contents of the web page.

Import may be very convenient in writing, and this is only a benefit of using @import. 

If you really want a great performance you should create only a single stylesheet instead of creating multiple CSS files and using these in your webpage. Write good code with minimal properties which only you really need and minify it. And use this final stylesheet using the link tag.

I didn’t say that @import is a bad approach but when you are very serious in load times then you might think about it.

Let say if you use the @import direct in your html page it will not affect much. But when you use @import in your stylesheet it will affect much and will lower the speed of your webpage.

why do css @imports harm performance?
why do css @imports harm performance?

In the above screenshot you can see I have imported 2 CSS files a.css and b.css. Using this way will not affect your loading speed performance. Now these two stylesheets will be downloaded parallel. The performance issue occurs when you import a CSS file inside a CSS file.

Summary

In the end I think @import is not a good approach. Always use a link tag to add a stylesheet in your web page. First try to make a single stylesheet of all your CSS code. But if you are dealing with multiple CSS files then you should use a link tag instead of @import.