Contact Number

+9501010103

Email Address

contact@oxosolutions.com

Social Icons
Empowering small to large businesses since 2008

Fulfilling all your IT needs at single stop
CIN: U74999PB2016PTC045616​GSTIN: ​​03AACCO3599B1ZO

Avoid CSS @ import

Avoid CSS @ import

Cascading style sheets (CSS) is a style sheet language which is used to describe the look and formatting of the web page. 

What is CSS@import ?

It is a process of importing CSS file into another CSS file. It is an external stylesheet. Here is the example of CSS@import.

<style>

@import url(B.css) ;

</style>

Why to avoid CSS@import ?

It causes additional HTTP requests for server and browser which increases the page load time. 

The delay in page load occurs because the files are downloaded in the sequential manner (this means one after the other) instead of downloading parallely. The sequential loading adds additional round trip times to the overall page and thus slows down the web page as per the amount of CSS files imported. 

Positions of CSS@import ?

CSS @ import can be added in both CSS files and HTML pages. 

  • Usage in CSS files
    • It can be located at the top of the page. Here is the example of the script:

@import url(“style2.css”)

  • Usage in HTML files
    • It is used in the style tags. Here is the example:

<style type=”text/css”>

@import url(“style2.css”);

font-family: sans serif;

font-size: 17px;

font-weight: 300;

# more CSS scripts #

</style>

How to avoid CSS@import ?

This problem can be fixed using one of three methods:

#Method 1: By combining CSS files

 One method is that you can merge the files. This means you can simply copy and paste the files you were importing, directly into the original file. This will remove the need to import the file. 

Another way is that you can add a separate link in the header of HTML instead of adding CSS@import. 

#Method 2: By using inline CSS in HTML

If the CSS is inlined in the HTML, this reduces the unnecessary sequential loading of the page. 

<script type=“text/css”>…CSS script goes here…</script>

#Method 3: By using link tag in the HTML

If the link tag is used in the header of HTML instead of using CSS@import, this also helps in reducing the problem. 

<link href=”style2.css” rel=” stylesheet” type=”text/css”>

Conclusion

This article explains why CSS@import is bad for the page speed, including the additional steps that are added for the browser to load the web page. Moreover, it causes the browser to download, parse and then go out and get the next CSS file before it starts displaying the page.  

The best practise is to use not even a single @import.

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow Us