Lighthouse에서 'Remove Unused CSS' 해결하기

최종 검토: Arjen Karel, 2026년 2월

사용하지 않는 CSS란 무엇인가요?

사용하지 않는 CSS는 웹 페이지의 어느 곳에서도 사용되지 않는 CSS 선언으로 구성됩니다. 일부 CSS가 사용되지 않는 것은 아주 정상적인 일입니다. 예를 들어, 일부 CSS 선언이 데스크톱이나 모바일과 같은 다른 기기를 위해 작성되었기 때문입니다. 때로는 스타일시트에 설명된 요소(예: 버튼)가 이 특정 페이지에서 사용되지 않기 때문이기도 합니다. 사용하지 않는 CSS는 Bootstrap과 같은 프레임워크를 사용할 때 자주 발생하는데, 이 경우 실제 사용하는 것보다 훨씬 더 많은 요소가 CSS에 기본적으로 정의되어 있습니다. 또는 페이지를 새롭게 디자인했지만 이전 CSS 요소를 제거하는 것을 잊었을 때도 발생합니다.

사용하지 않는 CSS가 페이지 속도에 나쁜 이유는 무엇인가요?

CSS는 페이지 로딩을 느리게 합니다. 페이지가 로드될 때 브라우저는 먼저 이 페이지에서 HTML을 가져옵니다. 이 HTML은 DOM 노드로 변환됩니다. 그 후 브라우저는 모든 스타일시트를 가져옵니다. 이 CSS 파일에 있는 스타일도 CSSOM이라는 다른 형식으로 변환됩니다. DOM과 CSSOM이 결합하여 렌더 트리를 형성합니다. 이 렌더 트리가 구축되어야만 브라우저가 첫 번째 콘텐츠를 그리기(painting) 시작합니다.

이러한 메커니즘 때문에 CSS 파일은 항상 웹 페이지의 렌더링을 차단합니다. CSS 파일이 필요 이상으로 크면 이 파일을 다운로드하는 데 더 오랜 시간이 걸리고 이로 인해 첫 번째 지연이 발생합니다. CSS 파일에 사용하지 않는 CSS가 포함되어 있으면 렌더 트리를 구축하는 데 시간이 더 오래 걸립니다.

중간값에 해당하는 페이지는 모바일에서 79KB의 CSS를 전송하지만, 2024 Web Almanac에 따르면 그중 52KB는 현재 페이지에서 사용되지 않습니다. 즉, CSS의 66%가 낭비되고 있는 것입니다. 90백분위수에서 사용하지 않는 CSS는 212KB에 달합니다. 그리고 전체 페이지의 85%가 렌더링 차단 리소스(render-blocking resources) 검사를 통과하지 못하며, CSS가 주된 원인입니다.

사용하지 않는 CSS는 모든 CSS가 다운로드되고 파싱될 때까지 브라우저가 어떤 픽셀도 그리지 않기 때문에 First Contentful Paint (FCP) 및 Largest Contentful Paint (LCP)를 직접적으로 지연시킵니다. CSS가 무거운 페이지에서는 스타일시트가 클수록 사용자 상호 작용 중 스타일 재계산 비용이 증가하기 때문에 INP에도 영향을 미칩니다.

수동으로 사용하지 않는 CSS를 찾는 방법

Google Chrome의 Code Coverage 개요에서 사용하지 않는 CSS를 확인할 수 있습니다. Code Coverage는 Chrome DevTools의 일부입니다. DevTools는 모든 Chrome 브라우저에서 사용할 수 있는 일련의 내장 도구입니다.

먼저 Ctrl-Shift-J 단축키로 DevTools를 엽니다. 그런 다음 Ctrl-Shift-P를 입력하여 명령 팔레트를 엽니다. 이제 'coverage'를 입력합니다. Coverage를 선택하고 페이지를 새로 고침합니다. 그러면 페이지에서 로드하고 사용하는 CSS 및 JavaScript 파일의 개요가 표시됩니다. 또한 파일의 크기와 실제 사용되는 코드의 양도 확인할 수 있습니다. CSS 파일을 클릭하면 현재 페이지에서 사용되는 CSS 규칙(녹색)과 사용되지 않는 CSS 규칙(빨간색)을 확인할 수 있습니다.

'Remove unused CSS' 경고 해결 방법

Lighthouse에서 'remove unused CSS' 메시지를 해결하는 방법에는 여러 가지가 있습니다. 어떤 이유로 경고를 수정할 수 없는 경우 CSS 전송을 최적화하여 사용하지 않는 CSS가 페이지 로딩 시간에 미치는 영향을 줄일 수 있습니다. 아래에서 사용하지 않는 CSS를 수정하기 위한 옵션들을 간략하게 살펴보겠습니다.

1. 수동으로 사용하지 않는 CSS 삭제

가장 논리적이고 좋은 방법이지만 동시에 가장 수고스러운 방법은 당연히 사용하지 않는 CSS를 수동으로 제거하는 것입니다. 단계는 간단합니다:

1. 원본 CSS 파일을 백업합니다. 실수로 너무 많은 CSS를 제거할 수도 있습니다.
2. Google Chrome에서 Code Coverage 탭을 열고 각 CSS 파일에서 필요 없는 선언을 확인합니다.
3. 서버(또는 로컬)에서 CSS 파일을 열고 사용하지 않는 각 CSS 선언을 확인합니다. 제거할 수 있는지 결정합니다. 하지만 주의하세요: 특정 페이지에서 사용하지 않는 CSS 선언이 다른 페이지에서는 필요할 수도 있습니다. 이 부분은 직접 판단해야 합니다!
4. 각 CSS 선언이 CSS 내에서 중복되지 않는지 확인합니다. 중복된 CSS 역시 사용하지 않는 것으로 표시됩니다.
5. 각 CSS 규칙에서 축약(shorthand) 방식이 가능한지 확인합니다. CSS를 줄일 수 있나요? 그렇다면 줄이세요!

2. CSS를 여러 파일로 분할

CSS 규칙의 수를 빠르게 줄이는 간단한 방법이 있습니다! 기기에 필요한 스타일만 로드하는 것입니다. 페이지는 종종 모바일에서 방문됩니다. 이 모바일 기기를 위해 desktop 및 print 스타일을 다운로드할 필요는 없습니다. 이러한 스타일을 다운로드하지 않으면 시간을 절약할 수 있으며 결과적으로 Lighthouse의 크리티컬 요청 체인(critical request chain)을 단축할 수 있습니다.

이를 달성하려면 media 속성을 사용하세요. media 속성은 현재 사용 중인 미디어와 일치할 때만 스타일시트가 사용되도록 보장합니다.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet"
 media="screen and (min-device-width: 1024px)">

렌더링을 차단하지 않고 중요하지 않은(non-critical) CSS를 로드하기 위해 media 속성 트릭을 사용할 수도 있습니다:

<link rel="stylesheet" href="non-critical.css" media="print"
      onload="this.onload=null;this.removeAttribute('media');">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>

이 방식은 CSS를 media="print"로 지정하여 렌더링 차단 없이 로드한 다음, 로드가 완료되면 media="all"로 전환합니다.

3. 자동 CSS 정리 도구 사용

자동으로 CSS 파일을 정리하고 사용하지 않는 CSS 참조를 제거해 주는 여러 가지 스마트 도구가 있습니다. 이러한 도구들은 매우 훌륭하게 작동하지만 완벽하지는 않습니다. 때로는 너무 많은 CSS 선언을 제거하기도 합니다. 따라서 신중하게 사용하고 항상 직접 CSS를 확인해야 합니다. 최고의 CSS 정리 도구는 PurgeCSS입니다. PurgeCSS는 Node.js에서 실행되며 Webpack, PostCSS 및 Vite와 통합됩니다. 콘텐츠 추출기를 사용하여 HTML, JavaScript 및 템플릿 파일에서 클래스 이름을 스캔한 다음, 발견되지 않는 CSS 선택자를 제거합니다. 빠른 분석을 위해 PurifyCSS online을 시도해 볼 수도 있습니다.

4. 크리티컬 CSS (Critical CSS)

크리티컬 CSS는 웹사이트의 뷰포트(표시되는 부분)에 필요한 CSS 규칙의 모음입니다. 즉, 크리티컬 CSS는 페이지의 표시되는 부분을 렌더링하는 데 필요한 CSS입니다.

페이지에서 크리티컬 CSS를 추출할 수 있는 도구들이 여러 개 있습니다. 그런 다음 이 크리티컬 CSS를 페이지의 head 섹션에 인라인으로 배치하고, 원본 CSS 파일은 비동기적으로(브라우저가 나중에 사용할 수 있도록) 로드합니다.

이렇게 한다고 해서 사용하지 않는 CSS 문제가 완전히 해결되는 것은 아닙니다. 결국 사용하지 않는 CSS가 로드되고 파싱되겠지만, 첫 번째 렌더링 단계에서는 브라우저가 방해를 받지 않게 됩니다.

크리티컬 CSS를 찾고 추출하는 데 가장 널리 사용되는 도구는 Node.js 스크립트인 Critical입니다. Critical Path CSS Generator와 같은 온라인 도구도 있습니다.

5. CSS 파일 축소 (Minify)

위에서 읽었듯이, 사용하지 않는 CSS는 두 가지 방식으로 페이지 속도를 늦춥니다. 첫 번째 이유는 CSS 파일이 커져서 다운로드하는 데 더 많은 시간이 걸리기 때문입니다.

CSS 파일을 축소(minifying)하여 파일 크기를 줄이면 이 문제에 대응할 수 있습니다. 이는 CSS 축소기(minifier)를 통해 수행됩니다. CSS 축소기는 공백, 주석 및 포맷팅을 제거하여 CSS 파일을 줄입니다. 또한 변수와 CSS 코드를 다시 작성하여 전송할 때 차지하는 바이트 수를 줄일 수 있습니다.

잘 알려진 CSS 축소 도구는 css-minify입니다. 명령줄에서 css-minify -f filename 명령을 통해 모든 CSS 파일을 축소하세요. cssminifier.com과 같은 다양한 온라인 CSS 축소기들도 있습니다.

6. CSS 프레임워크 재컴파일

Bootstrap CSS와 같은 CSS 프레임워크를 사용하고 있나요? 사이트 전체의 스타일을 지정할 수 있는 CSS 프레임워크입니다. 이 프레임워크는 너무 방대해서 대부분의 기능을 전혀 사용하지 않을 가능성이 높습니다.

다행히도 Bootstrap 및 다른 CSS 프레임워크 제작자들은 이를 고려했습니다. 이 프레임워크는 SASS로 작성되었습니다. CSS와 매우 유사한 언어입니다. 간단한 변수와 함수를 사용할 수 있는 여러 개의 작은 SASS 파일들로 구성되어 있습니다. 이를 통해 약간의 지식만 있으면 프레임워크를 쉽게 조정하고 개인화할 수 있습니다. 사용하지 않는 부분은 생략하고 최종 1개의 CSS 파일로 쉽게 컴파일할 수 있습니다.

또한 표준 CDN에서 CSS 프레임워크를 수정 없이 그대로 로드하지 않도록 주의하세요. 프레임워크를 다운로드하고 원하는 방식대로 정확히 SASS로 컴파일하여 사용하는 CSS 클래스만 포함되도록 하세요.

7. 다른 CSS 전략 고려

정말로 빠른 속도를 원하시나요? 그렇다면 CSS 전략을 다시 생각해 보는 것도 좋은 아이디어입니다. 방법은 사이트에 따라 다릅니다. 모든 길은 로마로 통하는 법이니까요.

저희 사이트를 예로 들어보겠습니다. 저희는 페이지당 실제로 필요한 CSS만 로드합니다. CSS 클래스는 필요할 때만 CMS에서 자동으로 가져옵니다. 저희는 CSS를 인라인으로(페이지의 head에) 배치합니다. 이렇게 하면 추가적인 네트워크 요청을 줄일 수 있습니다. 이 솔루션은 매우 빠르며 유지 관리가 쉽습니다.

주의 깊은 독자라면 "CSS 캐싱은 어떨까요? 최종 CSS 파일이 캐시될 때 CSS가 더 빠르지 않나요?"라고 생각할 수 있습니다. 네, 맞습니다. 이것이 바로 저희가 보이는 뷰포트 내의 페이지를 미리 로드하기 위해 Speculation Rules를 사용하는 이유입니다. 이렇게 하면 CSS를 포함하여 항상 캐시에서 페이지를 검색해 옵니다.

WordPress에서 'remove unused CSS' 해결하기

사용하지 않는 CSS를 제거할 준비가 되셨나요? WordPress에서 시작하는 방법은 다음과 같습니다. WordPress에서는 3가지 방법으로 CSS를 추가할 수 있습니다:

• 템플릿에 직접 추가. 템플릿 폴더에는 header.php라는 파일이 있습니다. 이 파일에는 템플릿 관련 CSS 파일이 있는 경우가 많습니다. 제가 위에서 설명한 것처럼 이 CSS 파일들을 수정할 수 있습니다. 원본 CSS 파일을 백업하는 것을 잊지 말고 테마 업데이트 시 CSS 파일이 덮어쓰여질 수 있다는 점을 명심하세요.
• 플러그인을 통해 추가된 CSS. WordPress의 플러그인은 HTML에 무제한의 CSS 파일을 추가할 수 있습니다. 이러한 플러그인은 wp_register_style 및 wp_enqueue_style 함수를 사용합니다. 대부분의 플러그인은 현재 페이지에서 활성화되어 있는지 확인조차 하지 않습니다. 해당 페이지에 플러그인 전용 CSS가 필요하지 않은데도 모든 페이지에 CSS를 주입할 뿐입니다. 저는 매일 이런 경우를 봅니다. 이 경우, wp_dequeue_style 및 wp_deregister_style 함수를 사용하여 페이지에서 이러한 스타일을 제거할 수 있습니다. 이것은 정밀한 작업입니다. 이 문제를 어떻게 해결해야 할지 확신이 서지 않는다면 개발자에게 문의하거나 저에게 도움을 요청하세요. 페이지 유형별로 로드할 플러그인, 스타일 및 스크립트를 설정할 수 있는 Asset CleanUp 플러그인을 사용할 수도 있습니다.
• JavaScript를 통해 추가된 CSS. JavaScript를 사용하여 스타일시트를 페이지에 주입하는 것도 가능합니다. 스타일시트와 마찬가지로 wp_dequeue_script 함수를 사용하여 페이지별로 이러한 스크립트를 비활성화할 수 있습니다. JavaScript가 로드되지 않으면 스타일시트도 주입되지 않습니다. 만약 스크립트와 스타일시트가 필요하지만 로드 직후에 바로 필요한 것이 아니라면, 스크립트 defer 속성을 통해 JavaScript 로딩을 연기하는 것이 가능합니다. functions.php에 다음 코드를 추가하여 이 작업을 수행하세요:

function defer_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( strpos( $url, 'somescript.js' ) ) {
        str_replace( ' src', ' defer src', $url );
    }
}
add_filter( 'script_loader_tag', 'defer_js', 10 );

사용하지 않는 CSS를 줄인 후에는 Real User Monitoring을 통해 개선된 사항을 확인하세요. 저희 CoreDash 데이터에 따르면 크리티컬 CSS를 인라인하고 나머지를 지연시킨 사이트는 FCP 중간값이 320ms 개선된 것으로 나타났습니다.