CSS 또는 JavaScript 코드를 압축하여 파일 크기를 줄이세요.
CSS 미니파이어는 공백·주석·불필요한 세미콜론을 제거해서 파일 크기를 30~70% 줄여 줘요. 페이지 로딩 속도·CDN 비용 모두에 영향을 미치는 표준 빌드 단계예요.
- **로딩 속도**: 다운로드·파싱 모두 빨라짐. 모바일 3G에서 체감 큼 - **대역폭 비용**: CDN 사용량 감소. 트래픽 많은 사이트는 월 단위로 비용 차이 큼 - **gzip과 별개로 효과**: 미니파이된 CSS는 gzip 후에도 추가 절감 5~15% - **Critical CSS**: 첫 화면용 인라인 CSS는 minify 필수 프로덕션 배포 전 빌드 도구(webpack/vite/parcel)가 자동으로 minify하지만, 직접 작성한 인라인 스타일·커스텀 빌드 단계에서는 수동 minify가 필요할 때가 있어요.
- **마지막 세미콜론**: `color: red;}` → `color:red}` 가능 (원치 않는 단축) - **CSS hack**: `_property: value` 같은 옛 IE 핵은 일부 minifier가 제거 - **calc 안 공백**: `calc(100% - 10px)` 의 공백은 필수. 일부 도구가 잘못 제거 - **vendor prefix 순서**: 모든 prefix가 표준 위에 와야 호환 - **!important**: 자체적으로는 안전하지만 specificity 변화 주의 결과를 라이브 환경에 올리기 전에 시각적 회귀 테스트(visual regression) 한 번 돌리는 게 안전해요.
Minify 다음 단계 최적화도 검토해보세요. - **PurgeCSS**: 안 쓰는 CSS 셀렉터 제거 (Tailwind는 기본 적용) - **Critical CSS 추출**: 첫 화면용만 인라인, 나머지는 lazy load - **HTTP/2 push 또는 preload**: CSS 빠른 도착 - **gzip/brotli**: 서버 측 압축. brotli가 gzip 대비 15~25% 추가 감소 - **CSS 나누기**: 페이지별 별도 CSS 번들 Lighthouse 점수에서 'Eliminate render-blocking resources' 항목이 이 최적화의 측정 지표예요.
Source map을 켜세요. 빌드 도구에서 `sourceMap: true` 옵션이면 dev 환경에서 원본 파일·줄번호로 디버깅 가능해요. 프로덕션에는 sourceMap 노출 안 하는 게 보안에 좋아요.
SCSS/SASS는 먼저 일반 CSS로 컴파일한 뒤 minify해요. 빌드 파이프라인이 두 단계로 처리해요.
긍정적이에요. 페이지 로딩 속도가 Core Web Vitals(LCP·FCP)에 직결되거든요. 단, robots.txt나 보안 헤더에는 영향 없어요.