Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Getting Started with CSS Importing Style Sheets with @import

Posted by Sean Lum
Sean Lum
11,949 Points

What has a faster loading time? @import statements in external or internal styles, or using multiple link tags?

From my understanding, link tags can be loaded asynchronously (multiple, at the same time); whereas @import is linear and has to be loaded one at a time. So is it more efficient to use @import or link tags?

2 Answers

Joe Rizza
Joe Rizza
8,513 Points
Joe Rizza
Joe Rizza
8,513 Points

@import will load it's target each time the page loads. It is more efficient to use link tags, because the CSS content will be cached in the browser as the user navigates your site. Pages will load faster when using link.

Sean Lum
Sean Lum
11,949 Points

Thank you, I didn't know about the caching. That makes a lot of sense

Kristopher Van Sant
PLUS
Kristopher Van Sant
Courses Plus Student 18,830 Points
Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

Great question! Quoting here from a stackoverflow post....

" link is preferred in all cases over @import, because the latter blocks parallel downloads, meaning that the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.

You can see this in great detail here:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

So, while @import may be convenient, that's all it offers. If you really want to take advantage of fast loading times, use the minimum number of stylesheets (probably one in most cases), write good CSS with efficient selectors (the usual stuff), minify it, and use a <link> tag."

Sean Lum
Sean Lum
11,949 Points

Great article, thank you.