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

Posted by Unsubscribed User
Unsubscribed User
14,547 Points

@import

I'm watching the "Media Features and Media Types" lesson right now, and Guil mentions "As we've learned in previous lessons, @import can be quite expensive performance wise."

I don't remember him mentioning it before in the lesson track I'm on. I could have zoned out though. Does anyone know the video he mentions it in? I want to know more.

Thanks

3 Answers

Vlatko .
Vlatko .
2,526 Points

I'm now sure if he mentions it in any video or not, but the more @import's you use, the more requests the browser makes, in turn, leading to slower load times.

This is more so true when you're importing fonts from a URL, such as Google Fonts. Google Fonts will also let you know how each font you link to affects your load times. Usually, choosing 1-2 fonts won't affect you as much as say importing 4-6 fonts. It also depends on the size of the font as well, so some fonts will be smaller or larger in size than others.

Unsubscribed User
Unsubscribed User
14,547 Points
Unsubscribed User
Unsubscribed User
14,547 Points

Thanks! Are @imports any worse than just a normal href link? From what I know so far, I assume you want to be opening as few connections as possible and combining css whenever possible in general for href or any other type of thing that requires a dns lookup or server connection. Do @imports add some other type of load in addition to this?

Vlatko .
Vlatko .
2,526 Points

To my understanding, the weight of the link is dependent on what is being linked, but I'm not entirely sure if @import functions differently from hrefs/src in that regards. And yes, generally you want to keep your CSS/JS files combined in order to minimize the amount of requests.

Unsubscribed User
Unsubscribed User
14,547 Points

Thanks!

Vlatko .
Vlatko .
2,526 Points
Vlatko .
Vlatko .
2,526 Points

[deleted]