Lighthouse: Avoid CSS @import

Overview

CSS @import is the process of calling stylesheets/CSS files from within another CSS file.

This method causes the browser to load each CSS file sequentially, rather than in parallel. Since CSS is render-blocking, by default, this is likely to affect page performance.

Avoid using CSS @import to speed up your page load and improve your visitors' page experience.

How does using CSS @import affect page performance?

By default, CSS files are render-blocking because they block the main-thread. When this happens, the browser cannot continue the rendering process until these files have been downloaded, parsed, and executed.

CSS @import causes files to load sequentially rather than in parallel. This means your browser has to process every single CSS file before it can start rendering content on your page.

For example - if you have a CSS file called style1.css and you wish to import another CSS file style2.css into the original CSS file, you would use the following code inside style1.css:

@import url("style2.css")

In the above example, the browser will download, parse, and execute style1.css, discover that it needs to import style2.css, and then proceed to download, parse, and execute style2.css.

This requires additional requests and network round trips, increasing the bandwidth consumed and likely slowing down your page load times.

Avoid using CSS @import and use other methods like link tags, inlining CSS, or combining CSS to allow the browser to load your page faster, and also vastly improve your visitors' page experience.

How does GTmetrix trigger this audit?

GTmetrix evaluates your page code and flags any CSS @import call. This audit triggers if there is at least one such call.

This is a Custom GTmetrix audit

Lighthouse doesn't consider the usage of CSS @import in any of its audits; however, we at GTmetrix still feel that they play an important role in your webpage's performance.

We always recommend that developers and webmasters eliminate render-blocking behaviour on websites in the interest of web performance and using CSS @import goes against that principle.

CSS @import forces the browser to load stylesheets sequentially, causing additional network requests, blocking the main-thread for longer, and extending the overall page load time.

Hence, we feel it is important to continue checking for the use of CSS @import, and point to better alternatives.

How to fix this audit?

As noted above, there are a few strategies you can employ in place of using CSS @import, such as:

1) Using link tags

You can employ link tags in two ways here, such as:

a) Using <link rel="stylesheet">

<link rel="stylesheet" type="text/css" media="handheld" href="style2.css">

where "style2.css" is the CSS file being linked and the media attribute signals what device the linked stylesheet will be displayed on.

b) Using <link rel="import">

<link rel="import" href="style2.css" async>

where "style2.css" is the CSS file being imported and the async tag denotes that this stylesheet is asynchronously loaded.

Note that async attributes should only be added to non-critical stylesheets i.e., those not required for loading critical (or above-the-fold) content.

2) Combining or inlining CSS

Combining and inlining CSS files are techniques to reduce the number of overall CSS files.

Read more about these optimizations in our how to eliminate render-blocking resources article.