CSS 압축으로 속도 향상: 불필요한 공백 제거해 사이트 성능 최적화하는 4가지 실전 방법

CSS 압축으로 속도 향상 불필요한 공백을 제거해 사이트 성능 최적화하기

불필요한 공백 제거해 사이트 성능 최적화하는 4가지 실전 방법

CSS 압축(minification)만 제대로 적용해도 CSS 파일 크기가 평균 30~50% 줄어들고, 페이지 로딩 속도가 체감 가능한 수준으로 빨라진다. 코드를 한 줄도 바꾸지 않고 파일 크기만 줄이는 가장 손쉬운 성능 최적화 방법이다.

블로그에 스타일을 잔뜩 추가했는데 페이지 로딩이 느려졌다면 CSS 파일 크기를 한번 확인해보자. 생각보다 용량이 큰 경우가 많다. 압축 한 번으로 해결되는 경우도 많다.

 

📋목차

• CSS 압축이란 무엇이고 왜 해야 하는가
• CSS 압축으로 얻을 수 있는 성능 개선 효과
• 무료 CSS 압축 도구 4가지
• 자동화된 CSS 압축 빌드 환경 설정
• 티스토리 블로그 CSS 압축 적용법
• CSS 압축 시 주의해야 할 점
• 압축 전후 성능 비교 방법

🤔 CSS 압축이란 무엇이고 왜 해야 하는가

"CSS 압축"은 CSS 파일에서 주석, 공백, 줄바꿈 같은 불필요한 문자를 제거해 파일 크기를 줄이는 작업이다. 개발할 때는 가독성을 위해 들여쓰기와 주석을 넣지만, 브라우저는 이 정보가 없어도 동작에 전혀 지장이 없다.

예를 들어 이런 CSS를 압축하면 이렇게 된다.

 

/* 압축 전 */
.container {
display: flex;
flex-direction: column;
align-items: center;
/* 중앙 정렬 */
margin: 0 auto;
}

 

/* 압축 후 */
.container{display:flex;flex-direction:column;align-items:center;margin:0 auto}

 

공백과 주석만 제거했을 뿐인데 파일 크기가 확 줄었다. 브라우저는 압축된 코드를 전혀 문제 없이 읽는다.

📈 CSS 압축으로 얻을 수 있는 성능 개선 효과

"CSS 압축"의 효과는 Core Web Vitals의 LCP(최대 콘텐츠 표시 시간)와 FCP(최초 콘텐츠 표시 시간)에서 나타난다. CSS는 렌더 블로킹 리소스이기 때문에 파일이 클수록 화면이 늦게 그려진다.

구글 PageSpeed Insights는 CSS 압축 여부를 체크해 권고사항으로 제시하기도 한다. 애드센스 승인 심사에서도 페이지 속도 지표를 확인하므로 CSS 압축은 필수 최적화 작업이다.

🛠️ 무료 CSS 압축 도구 4가지

바로 사용할 수 있는 무료 "CSS 압축" 도구 4가지를 소개한다.

첫 번째는 CSS Minifier(cssminifier.com)다. CSS를 붙여넣고 버튼 하나로 압축된 결과를 받을 수 있다. 가장 단순하고 직관적인 도구다.

두 번째는 Clean CSS(cleancss.com)다. 압축 수준을 세밀하게 조절할 수 있고, 불필요한 속성을 자동으로 감지해 제거하는 기능도 있다. 고급 최적화가 필요할 때 유용하다.

세 번째는 Minify(minifier.org)다. CSS뿐만 아니라 HTML, JavaScript도 같이 압축할 수 있다.

네 번째는 PostCSS + cssnano 조합이다. 개발 빌드 파이프라인을 구성한다면 이 조합이 가장 강력하다. 자동으로 압축과 벤더 프리픽스 추가까지 처리해준다.

⚙️ 자동화된 CSS 압축 빌드 환경 설정

매번 도구에 붙여넣는 게 번거롭다면 자동화 환경을 구성하는 방법도 있다. npm과 cssnano를 이용한 방법이다.

 

npm install cssnano postcss postcss-cli --save-dev

package.json에 스크립트를 추가한다.

{
"scripts": {
"minify-css": "postcss src/style.css -o dist/style.min.css"
}
}

postcss.config.js를 만든다.

module.exports = {
plugins: [
require('cssnano')({ preset: 'default' })
]
}

이제 npm run minify-css 명령어 하나로 CSS가 자동 압축된다.

🏠 티스토리 블로그 CSS 압축 적용법

티스토리는 별도의 빌드 시스템이 없기 때문에 도구로 압축 후 결과를 붙여넣는 방식을 쓴다. 스킨 편집에서 CSS 탭의 내용을 복사해서 온라인 압축 도구에 넣고, 결과물을 다시 CSS 탭에 붙여넣으면 된다.

주의할 점은, 압축 전 원본 CSS를 반드시 백업해두는 것이다. 압축된 코드는 사람이 수정하기 어렵기 때문에 나중에 수정할 일이 생기면 원본이 필요하다.

또 하나의 팁은, CSS를 완전히 완성한 뒤에 압축하는 것이다. 개발 단계에서 압축 코드를 직접 수정하는 건 너무 힘들다.

⚠️ CSS 압축 시 주의해야 할 점

"CSS 압축"을 하다 보면 의도치 않게 스타일이 깨지는 경우가 있다. 주요 원인은 중복 선택자 제거, 단축 속성 변환, 색상값 최적화 과정에서 생기는 부작용이다.

특히 calc() 함수나 CSS 변수를 사용할 때는 압축 수준을 낮추거나, 압축 후 반드시 실제 화면을 확인해야 한다. 압축 전후로 주요 페이지들을 크로스 브라우저로 테스트하는 게 안전하다.

📊 압축 전후 성능 비교 방법

CSS 압축 전후의 효과를 측정하려면 구글 PageSpeed Insights를 압축 전에 한번, 압축 후에 한번 실행해서 비교하면 된다. LCP, FCP, TBT 점수가 개선됐는지 확인할 수 있다.

Chrome DevTools의 Network 탭에서도 CSS 파일의 실제 다운로드 크기와 시간을 직접 확인할 수 있다. 압축 전후 파일 크기를 비교해보면 얼마나 줄었는지 바로 알 수 있다.

---

출처 및 참고
- cssnano: https://cssnano.github.io/cssnano
- Google PageSpeed: https://pagespeed.web.dev
- PostCSS: https://postcss.org