[CSS] - css에서의 <link> vs @import 어느 것을 사용해야 하나요?

 

🔶 <link> vs @import

🔸 edge 브라우저에서 css @import가 안되나요? - 이젠 왠만해선 잘 됩니다

 

블로그 글들을 찾아보면 edge에서 @import를 하면 edge 브라우저는 @import를 인식하지 못하여 css가 깨진다고 설명이된 글들이 몇 개 있습니다.

 

이러한 오해는 오래된 edge 브라우저 버전에서 @import를 지원하지 않았기 때문에 발생한 문제입니다.

mdn 사이트를 근거로 말씀을 드리겠습니다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/@import 포스트 中 브라우저 호환성 표 발췌

MDN에서 정리한 브라우저 호환성 표에 따르면 MS Edge 브라우저에서는 12버전, 2015에 @import 기능 지원이 안정화 되었다는 것을 알 수 있습니다.

 

오래된 브라우저를 사용하는 유저들에게 까지 지원할 것이 아니라면 CSS에서 별도로 필요한 경우 @import기능을 사용하시면 되겠습니다. 

 

🔸 성능 개선을 위해 <link>를 사용하기

 

웹 페이지 브라우저 성능 개선을 위해서 외부 css 스타일 (폰트 스타일, 매터리얼 아이콘 등)을 다운로드가 필요한 경우 왠만해서 <link>를 활용해서 다운로드 받는것이 효율적입니다.

 

<link> 태그는 병렬로, @import 방식은 css를 직렬로 다운로드를 받기 때문입니다.

이 부분에서 관련 레퍼런스가 없어서 해외의 글을 발췌 해보았습니다.

https://www.debugbear.com/blog/avoid-css-import 포스트 中 일부 발췌

 

이 글에 따르면 css 파일은 렌더-블로킹 자원들(렌더링을 차단하는 요소)이며 브라우저가 렌더-블로킹 자원들을 다운로드가 되어야 사용자들에게 어떠한 콘텐츠들을 보여 줄 수 있다고 합니다.

 

@import 방식이 없이 작성된 문서에는 브라우저가 병렬로 다운로드가 가능하지만,

@import를 사용하면 직렬로 다운이 되고 이것은 병렬방식보다 길게 시간을 소요하기 때문에 웹사이트가 느려지게 됩니다.

 

위의 이미지는 구글폰트를 @import 방식으로 다운로드 받을 때의 예시입니다.

1번째 css파일과 2번째 css파일은 병렬적으로 로드가 가능한 것을 볼 수 있지만,

3번째 css파일인 구글폰트를 다운받는 경우 2번째 파일이 다운로드가 끝난 후 로드가 되는 것을 볼 수 있습니다.

 

따라서 웹 브라우저 속도 개선을 위해서는 일반적으로 @import 방식보다 <link>태그로 외부 스타일을 참조하는 것이 더 권장되는 방식입니다. (예외적으로 @import가 권장되는 경우도 있다고는 합니다.)

 

🔶 Reference

 

https://developer.mozilla.org/ko/docs/Web/CSS/@import

@import - CSS: Cascading Style Sheets | MDN

 

https://www.debugbear.com/blog/avoid-css-import

What Is CSS @import And Why Can It Slow Down Websites? | DebugBear

 

🔶 더 보면 좋은 글

 

https://velog.io/@soorokim/Render-Blocking

Render Blocking