Steve Souders, a senior web performance expert at Google, recently wrote a fantastic analysis about why high performing websites should avoid CSS rules that include the @import statement:

In Chapter 5 of High Performance Web Sites, I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo, creating several test pages and HTTP waterfall charts, all shown below. The bottomline is: use LINK instead of @import if you want stylesheets to download in parallel resulting in a faster page.

We recently worked with a customer who had eight separate CSS @imports, causing significant overhead in an otherwise well performing website. Making changes like the ones Steve advocates can lead to significant performance improvements without any investment in complex software or network changes.

Steve’s advise about CSS is important to read, but it is only one part of a broader point: high-performing websites limit the number of HTTP requests made from the browser. Keep that in mind when it comes to any CSS or JavaScript in a website.

Tweet This Post 

No tags