스타일시트 preloading이 의미 있는(없는) 경우
CSS preloading이 대개 도움이 되지 않는 이유와 도움이 되는 유일한 경우
스타일시트 preloading이 의미 있는(없는) 경우
저는 preloading된 스타일시트와 이를 둘러싼 많은 잘못된 정보들을 정기적으로 접합니다. 리소스를 preloading하면 다운로드 예약 시점이 변경됩니다. 하지만 대부분의 경우 스타일시트 preloading은 도움이 되지 않습니다. 어떤 경우에 작동하고 어떤 경우에 작동하지 않는지 5가지 사례를 통해 보여드리겠습니다.
2026년 3월 Arjen Karel이 마지막으로 검토함
스타일시트 preloading의 개념
스타일시트는 렌더링을 차단합니다. 스타일시트가 다운로드되는 동안 브라우저는 페이지를 렌더링하지 않으며 방문자는 빈 화면만 보게 됩니다.
스타일시트를 다운로드하는 데 걸리는 시간을 최소화하기 위해 개발자들은 종종 preloading에 의존합니다. Preloading은 브라우저가 HTML에서 리소스를 발견하기 전에 가져오도록 지시하여 더 빨리 준비되도록 합니다. 이는 <link> 태그와 rel="preload" 속성을 사용하여 수행됩니다.
2025 Web Almanac에 따르면, 데스크톱 페이지의 13%만이 렌더링 차단 리소스 감사를 통과합니다. Preloading은 해결책이 아닙니다. 불필요한 렌더링 차단 리소스를 제거하고 중요하지 않은 스타일시트를 지연시키는 것이 해결책입니다.
사례 1: 스타일시트를 선언하기 직전에 preloading하기
때로는 개발자들이 열의에 넘쳐 실제 CSS 선언 직전 HTML에서 CSS를 preloading하여 CSS의 영향을 최소화하려고 시도합니다. 이는 다음과 같이 보일 것입니다:
<link rel="preload" as="style" href="style.css"> <link rel="stylesheet" href="style.css">
이것은 전혀 의미가 없으며 기껏해야 페이지 속도를 늦추지 않는 정도입니다. 브라우저에는 메인 파서가 도달하기 전에 다운로드할 리소스를 찾기 위해 HTML을 스캔하는 내장 프리로드 스캐너가 있습니다. 스타일시트 <link>가 이미 <head>에 있다면 프리로드 스캐너가 즉시 이를 찾습니다. 동일한 URL에 대한 rel="preload" 힌트를 추가하는 것은 브라우저에 이미 가지고 있는 정보를 다시 주는 것일 뿐입니다. 그저 코드 한 줄을 더 추가했을 뿐입니다.
3개의 preloaded 스타일시트
3개의 일반 스타일시트
사례 2: 링크 헤더를 사용하여 스타일시트 preloading하기
이 아이디어는 흥미롭습니다. Link 서버 헤더를 사용하여 스타일시트를 preloading할 수 있습니다. 다음과 같은 모습일 것입니다:
Link: <style.css>; rel=preload; as=style
브라우저가 HTML 구문 분석을 시작하기 전에 스타일시트를 대기열에 추가하게 만드는 아이디어입니다. 이를 생각해낸 개발자의 사고방식이 마음에 듭니다! 하지만 실제로는 거의 이점을 얻지 못합니다. 단 몇 마이크로초에 불과합니다. 꽤 실망스러운 결과이지만, 이 아이디어는 실제로 효과가 있는 방법으로 우리를 안내합니다.
사례 3: 스타일시트를 위한 103 Early Hints
이것이 Core Web Vitals 결과를 실제로 얻을 수 있는 유일한 아이디어입니다. 스타일시트에 대한 early hints를 보내면 First Contentful Paint 및 Largest Contentful Paint와 같은 지표가 개선됩니다.
103 Early Hint 헤더는 실제 HTML 응답 전에 전송됩니다. 즉, HTML을 다운로드하는 동안 브라우저가 병렬로 스타일시트 다운로드를 시작할 수 있습니다. 최상의 시나리오는 HTML 다운로드가 완료될 때쯤 스타일시트 다운로드도 완료되는 것입니다. 이러한 스타일시트로 인한 렌더링 차단 시간이 0이 됩니다. 이는 느린 네트워크에서 발생할 수 있고 실제로 발생합니다. 빠른 네트워크에서는 효과가 덜 분명하지만, 103 Early Hints를 사용하는 것이 거의 모든 경우에 여전히 더 빠릅니다.
103 Early Hint 응답은 preload link 헤더와 거의 동일해 보입니다. 103 Early Hints를 사용하려면 웹 서버나 CDN을 구성해야 합니다.
HTTP/1.1 103 Early Hints Link: </style.css>; rel=preload; as=style
Cloudflare와 같은 일부 CDN은 단순히 link preload 헤더를 설정하여(사례 2에 설명된 대로) 103 Early Hint를 트리거할 수 있게 해줍니다. 구현 및 브라우저 지원에 대한 전체 가이드는 103 Early Hints: 서버 대기 시간 동안 중요한 리소스 Preload를 참조하세요.
CoreDash가 모니터링하는 사이트 전반에서 메인 스타일시트에 103 Early Hints를 사용하는 페이지는 Early Hints가 없는 페이지와 비교하여 75백분위수에서 120ms 더 빠른 FCP를 보여줍니다. 이러한 개선은 서버 대기 시간과 네트워크 대기 시간이 더 많이 겹치는 모바일 연결에서 가장 눈에 띕니다.
사례 4: 비동기 CSS를 구현하기 위한 스타일시트 preloading
CSS가 렌더링을 차단하지 않도록 만드는 잘 알려진 요령은 스타일시트를 preloading하고 로드되면 페이지에 추가하는 것입니다. 이 아이디어는 간단하며 다음과 같습니다:
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'" >
이는 일반적인 프리로드 코드 <link rel="preload" as="style" href="style.css">를 기반으로 하며, 링크를 최종 형태인 <link rel="stylesheet" href="style.css">로 변경하는 onload 이벤트 리스너 onload="this.onload=null;this.rel='stylesheet'"를 추가합니다.
이것은 이치에 맞는 또 다른 아이디어입니다. 스타일시트가 렌더링을 차단하지 않으면 브라우저는 스타일시트를 기다리지 않고 페이지의 구문 분석 및 렌더링을 계속할 수 있습니다. 하지만 주의하세요!
- 보이는 뷰포트 내에서는 비동기 CSS를 사용하지 마세요. 이는 Cumulative Layout Shift를 유발할 가능성이 높으며, 이는 좋지 않은 user experience로 이어집니다.
- 트레이드오프를 고려하세요. 비동기 CSS는 페이지의 다른 부분들을 다시 렌더링하게 만들 가능성이 높습니다. 이는 Interaction to Next Paint와 같은 지표에 영향을 미칩니다.
더 간단한 최신 대안은 일반 스타일시트 링크에 fetchpriority="low"를 사용하는 것입니다: <link rel="stylesheet" href="style.css" fetchpriority="low">. 이는 브라우저에 JavaScript 해킹 없이 다운로드 우선순위를 낮추도록 지시합니다. 대부분의 사용 사례에서 onload 요령보다 이 방법을 권장합니다.
사례 5: 스타일시트 사전 캐시
드물게 후속 페이지 뷰를 위해 캐시 파일을 미리 준비하려는 기발한 솔루션들을 보게 됩니다. 그러한 솔루션을 만든 열정에는 박수를 보내지만, 제발 이렇게 하지 마세요.
아이디어는 간단합니다. 원한다면 홈페이지에서 이미 다른 페이지의 스타일을 미리 캐시할 수 있습니다. 예를 들어 제품 페이지를 생각해 봅시다. 페이지 로드 후 특정 시점에 브라우저 캐시에 추가하기 위해 스타일시트를 preloading할 것입니다.
function preloadStylesheet(url) {
var link = document.createElement('link');
link.rel = 'preload';
link.href = url;
link.as = 'style';
document.head.appendChild(link);
}
window.addEventListener('load', function () {
preloadStylesheet('cart.css');
preloadStylesheet('shop.css');
});
언뜻 보기에 이것은 나쁘지 않아 보입니다. 이제 어떤 제품 페이지에서든 cart.css와 shop.css를 사용할 수 있으며 더 이상 렌더링을 차단하지 않습니다. 이렇게 하지 말아야 할 몇 가지 이유가 있습니다:
- 더 나은 방법들이 있습니다. 예를 들어 Speculation Rules를 사용한 추측성 사전 렌더링이나 서비스 워커를 사용하는 방법이 있습니다.
- 아마도 리소스를 낭비하게 될 것이고, 트레이드오프할 만한 가치가 없을 것입니다. 리소스를 preloading하는 것이 쉬웠다면 브라우저가 더 잘했을 것입니다.
- 이러한 솔루션은 유지 관리하기 어렵고 미래의 어느 시점에 문제를 일으킬 가능성이 높습니다.
- 일부가 아닌 모든 스타일시트를 preloading해야 합니다. 모든 스타일시트는 렌더링을 차단하고 병렬로 다운로드되기 때문에 단 하나의 스타일시트만으로도 여러 스타일시트와 동일한 영향을 미칠 수 있습니다.
CSS 성능을 위해 실제로 효과가 있는 것
프리로드 힌트를 찾는 대신, 다음의 리소스 우선순위 지정 기본 사항에 집중하세요:
- 사용하지 않고 중복되는 CSS를 제거하세요. 더 작은 파일이 더 빨리 다운로드됩니다. 이것이 대부분의 사이트에서 가장 큰 이점을 제공합니다.
- 서버나 CDN이 지원하는 경우 중요한 스타일시트에 103 Early Hints를 사용하세요.
당사의 Real User Monitoring 데이터에 따르면, 중복되는 CSS를 제거하고 103 Early Hints를 사용하는 사이트들은 일관되게 75백분위수에서 LCP를 통과합니다. 근본 원인(너무 많은 CSS, 너무 늦게 로드됨)을 해결하지 않고 스타일시트만 preloading하는 사이트들은 의미 있는 개선을 거의 보지 못합니다.
