how and why to avoid css @import statements in stylesheets on your websites

Among the many things that you can do to improve the search engine optimization (SEO) of your web pages, one of the easiest and important thing is to improve on the page load time. It has been shown that improving the page speed leads to better user experience, user engagement and thus, indirectly better search engine optimization. Avoiding the CSS @import statements in your stylesheets are just one of those things to do to improve SEO.

The page load times have been known to be one of the factors considered in search result ranking by many search engines including Google.

One of the many ways to speed up the page load is to facilitate the parallel fetching of resources from the web server. When multiple resources are fetched in parallel (as opposed serialized fetching) the load times decrease dramatically. In the HTML code of the webpage, you should make a concerted effort to make sure that all the dependent resources can be downloaded simultaneously by the browser from the server.

When there are multiple CSS files or stylesheets involved in the rendering of a webpage, all of these files need to be downloaded to the client machine before the webpage can be displayed correctly. One of the ways the CSS files is included in the source is using what is called an import statement (example: @import new.css) from within another CSS file. Such CSS @import statements should be avoided as much as possible.

You should understand why the CSS file might be included in this fashion in the first place. There are actually some advantages to importing style sheets in this fashion, mostly from a coding perspective rather than from a page loading perspective.

Portability and Transparency: It makes it easier for the web developer to include a master CSS file in web pages without having to worry about all other stylesheets that also need to be imported. This dependency is defined within the master CSS file.

Extensible and Maintainability: It allows the web developer to extend and overwrite/override the CSS rules without having to worry about order of import and other issues. This also makes it easier to maintain a lot of stylesheets in a large project.

An example of the @import statement would look something this:

@import url("styleone.css");
@import url("styletwo.css");

In spite of its uses in web development, it is a major hindrance in terms of page speed when it comes to executing and rendering of the page in the web browser. It affects the page loading speed in two important ways:

Synchronous downloads: This prevents the various stylesheet resources from being downloaded synchronously. The browser needs to first download the master CSS file, and then parse it before it can identify and download other dependent CSS files. The problem gets worse if there are imported CSS files inside the other dependant stylesheets.

Minification and Combining: Another way to reduce page load time is to reduce the bandwidth by minifying the CSS files. The minification process removes all the extra bytes, such as whitespace, comments and other irrelevant parts from the CSS files and then combines them into one file for one easy download. The import statements thus reduces the effectiveness of this process.

There are several different ways you can eliminate the imports in CSS files. Each of the following techniques has varying levels of difficulty based on the size of the project and how your code structured…

Merge to One File: Merge all the css files you have into one single file, often manually.  If this creates an extraordinarily large file, then divide them up into a smaller number of files that can effectively be managed, usually 2 or 3. You can do this division based on the usage of the files in pages. For example, you can merge multiple smaller files into a single file if many of them are used in most of the webpages in the site.

Multiple links: If you cannot merge everything into a single CSS file, then consider including links to each and every css file directly in the HTML source rather than using @imports. You can even include them in a common header file which is then shared among all the webpages.

Using links in the HTML would look something like this:

<link href="styleone.css" rel="stylesheet" media="screen" type="text/css" />
<link href="styletwo.css" rel="stylesheet" media="screen" type="text/css" />

Using multiple CSS @import statements inside the HTML source (as opposed to within the CSS file) to include stylesheets does not affect the page load times in most modern browsers. It is the @import statements with an CSS file that is most detrimental to the page load times. You are still discouraged from using the css @import statements within the HTML page, because older versions of MSIE  loads it later as if it was included at the bottom of the page. So, it is best not to use it.