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.
Sharing is caring
Did you like what Amol Shelke wrote? Thank them for their work by sharing it on social media.
No comments so far
Curious about this topic? Continue your journey with these coding courses: