CSS가 하나의 파일로 번들링되면, 트리 쉐이킹 후에도 다양한 @media 환경(모바일, 태블릿, 데스크톱, 다크/라이트/기타 테마 등)으로 인해 여전히 많은 불필요한 CSS가 포함됩니다.
이는 Core Web Vitals에 좋지 않습니다: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS)뿐만 아니라 First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI), 그리고 DOMContentLoaded 이벤트와 같은 다른 중요한 성능 및 사용성 지표에도 부정적인 영향을 미칩니다.
CSS를 여러 파일로 분리하여 각 파일이 해당 환경에 필요한 코드만 포함하도록 하면 CSS 로딩 및 렌더링을 크게 개선할 수 있습니다.
CSS를 다음과 같이 여러 파일로 분리하세요:
📄main.css - 모든 @media 조건에 필요한 CSS 포함
📄screen.css - screen @media 조건에만 필요한 CSS 포함
📄print.css - print @media 조건에만 필요한 CSS 포함
📂breakpoints
📄x-small.css - X-Small breakpoint에만 필요한 CSS 포함
📄sm.css - Small breakpoint에만 필요한 CSS 포함
📄md.css - Medium breakpoint에만 필요한 CSS 포함
📄lg.css - Large breakpoint에만 필요한 CSS 포함
📄xl.css - Extra large breakpoint에만 필요한 CSS 포함
📄xxl.css - Extra extra large breakpoint에만 필요한 CSS 포함
📂themes
📄light.css - light 테마에만 필요한 CSS 포함
📄dark.css - dark 테마에만 필요한 CSS 포함그런 다음 CSS 파일을 다음과 같이 포함하세요:
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">이 접근 방식을 사용하면 최신 브라우저는 현재 @media 조건에 맞는 CSS 로딩을 우선적으로 처리하므로, 사용자가 불필요한 CSS 부분이 로드될 때까지 기다릴 필요가 없어 페이지 렌더링이 훨씬 빠르게 시작됩니다.
만약 모든 CSS를 하나의 파일로 묶고 link 태그의 media 속성에 조건을 지정하지 않으면, 브라우저는 페이지 렌더링을 시작하기 전에 CSS 전체 세트가 로드될 때까지 기다립니다. 이는 페이지 렌더링 속도를 현저히 느리게 만듭니다.
이 예시의 breakpoint는 Bootstrap 5를 기반으로 합니다. Bootstrap에서 곧 라이트/다크/기타 테마 지원을 추가할 예정이므로, 이 접근 방식은 앞으로 더욱 중요해질 것입니다.
웹을 더 좋고 빠르게 만들고 싶다면 다음을 실천해 주세요:
- 이 글을 공유하고,
- 사용하는 프레임워크 개발자들에게 이 글을 보내고,
- 웹사이트에 이 CSS 분리 방법을 적용하세요.
소셜 미디어에 공유하거나 나중에 보려면 저장하세요:
이 최적화 및 브라우저 동작에 대해 더 자세히 알고 싶으시면 다음 자료를 참고하세요:
- Vadim Makeev의 “Conditionally adaptive CSS. Browser behavior that might improve your performance” 글. 이 글의 커버 스크린샷은 그의 훌륭한 글에서 가져온 것이며, 더 많은 스크린샷과 실험 내용이 포함되어 있습니다.
- MDN Web Docs: CSS 성능 최적화.