·2분 읽기
CSS 압축으로 웹사이트 속도 높이기 - 실전 최적화 가이드
CSS 코드 압축(Minify)으로 웹사이트 로딩 속도를 높이는 방법을 알려드립니다. 압축 원리부터 자동화까지 실전 가이드예요.
⚡
CSS/JS 압축기 바로 사용하기
CSS, JavaScript 코드를 압축하세요
→
CSS 압축이 왜 필요한가요?
웹사이트를 만들 때 CSS 파일은 점점 커져요. 주석, 공백, 줄바꿈이 많으면 파일 크기가 불필요하게 커지거든요.
CSS 압축(Minification)은 이런 불필요한 문자를 제거해서 파일 크기를 줄이는 거예요. 보통 30~50% 정도 크기가 줄어들어요.
구글 PageSpeed Insights에서도 CSS 압축을 권장 사항으로 제시하고 있어요. 페이지 로딩 속도가 빨라지면 SEO 점수도 올라가거든요.
CSS 압축이 하는 일
CSS 압축은 기능에 영향을 주지 않으면서 파일 크기만 줄여요.
제거되는 것들: 주석(/* */), 불필요한 공백과 줄바꿈, 마지막 세미콜론, 불필요한 따옴표
단축되는 것들: #ffffff를 #fff로, 0px를 0으로, font-weight: bold를 font-weight: 700으로
예를 들어 body 안에 margin: 0px; padding: 0px; background-color: #ffffff; 라는 코드가 body로 시작하는 한 줄 코드로 압축돼요.
Toolkio의 [CSS 압축기](/css-minifier)를 사용하면 CSS를 붙여넣는 것만으로 자동 압축할 수 있어요.
프로젝트에 CSS 압축 자동화하기
매번 수동으로 압축하는 건 비효율적이에요. 빌드 도구에 자동화하는 게 좋아요.
Webpack을 쓴다면 css-minimizer-webpack-plugin을 설치하세요. 빌드할 때 자동으로 CSS를 압축해줘요.
Vite를 쓴다면 프로덕션 빌드 시 기본적으로 CSS를 압축해요. 별도 설정 없이도 적용되거든요.
PostCSS와 cssnano 조합도 인기 있어요. postcss.config.js에 cssnano 플러그인을 추가하면 돼요.
수동으로 빠르게 결과를 확인하고 싶을 때는 온라인 도구가 편해요. 코드를 붙여넣고 바로 압축 결과를 볼 수 있거든요.
CSS 최적화 추가 팁
압축 외에도 CSS 최적화 방법이 있어요.
사용하지 않는 CSS 제거가 가장 효과가 커요. PurgeCSS나 Chrome DevTools의 Coverage 탭으로 사용되지 않는 스타일을 찾을 수 있어요.
CSS를 여러 파일로 분리하고 필요한 페이지에서만 로드하는 것도 좋아요. 모든 페이지에서 전체 CSS를 불러오면 불필요한 다운로드가 발생하거든요.
크리티컬 CSS를 인라인으로 넣으면 첫 화면 렌더링이 빨라져요. 스크롤 없이 보이는 영역의 스타일만 HTML 안에 넣고, 나머지는 비동기 로드하는 거예요.
[이미지 압축 가이드](/blog/how-to-compress-images)와 함께 적용하면 웹사이트 전체 성능을 크게 향상시킬 수 있어요.