Why do CSS @imports harm performance?

In this article, we are going to see what are CSS imports and why CSS @imports harm performance and alternate to CSS @imports. Be ready to learn something new from this article, so let’s get started with the first topic which is what are CSS @imports.

What are CSS @imports?

CSS @imports are used to import one stylesheet into another stylesheet in which you are currently. And using CSS @import you can add custom style font to your stylesheets.

In CSS most of the fonts are older and in the modern web world, we want to create some great websites with great fonts so we can import some fonts from google fonts. Using CSS @imports you can split your CSS files into small files for each container and import them into a styles.css file.

/* This is styles.css file. */
@import "header.css"
@import "about.css"
Code language: CSS (css)

In the above example, I have imported two CSS files into the style.css file the first one is the header.css and the second one is about.css. using @import now I can use the CSS code which is written in both of the files in the styles.css file. So this is what CSS @imports are.

How do CSS @imports harm performance?

So you can import as many of these files as you want in your styles.css. It will not cause any harm but when you will deploy your webpage on the server it will cause extra HTTP requests on every import. You’re using @import it does not mean that you’re not gonna need to download them. CSS @import is not magic you’re still gonna need these physical files, this just makes it more convenient for you to include them. It might not make your loading slow. But if you have these hundreds of import statements it will cause extra HTTP requests.

Once you download the CSS file that you’re in. You have to go download the imported files also, so it will make your webpage slow. So you can import as many of these files as you want in your styles.css it will not cause any harm but when you will deploy your webpage on the server it will cause extra HTTP requests on every import. You’re using @import it does not mean that you’re not gonna need to download them.

Using @import is good when you’re not hosting your webpage on any server. But when you deployed your webpage on the server you need to think about the performance of the webpage, and loading speed, in that scenario, you might need to consider not using this @import. But think about some alternatives, so below I mentioned an alternative to CSS @imports have a look at it.

What are alternatives to CSS @imports?

The only alternative which I can suggest to you that is to use the <link> tag in HTML. Here below in the screenshot, I used the <link> tag in HTML to add the style.css file to the webpage. Now, whenever I will write any CSS code it will directly affect the webpage and I can write the whole code in one single file and link that file with HTML.

And if I had multiple stylesheets I can also link them with <link> tags so they will be downloaded only when the page is rendered.

Another example of using the tag

So without the <link> tags, you would have to use CSS @imports them to add any custom fonts or for linking multiple files. But with the <link> tag, you can directly link the font stylesheet to your HTML markup and use them in styles.css look at the screenshot below example. Then with the <link> tag, we can exclude the use of the @import tag and make our page load a little bit fast. As we discuss how @import can harm the webpage performance using the <link> tag is the way to solve it!

Conclusion

In this article, we talk about what is CSS @imports and how they harm performance, we also talk about the alternatives to CSS @import. But if you have any other doubts you can learn that from Codedamns tutorials. also, check out Codedamns playground where you can practice your coding.