CSS 또는 JavaScript 코드를 압축하여 파일 크기를 줄이세요.
CSS 미니파이어는 공백·주석·불필요한 세미콜론을 제거해서 파일 크기를 줄여 줘요. 이 도구는 JavaScript 압축 모드도 있고, 줄어든 비율을 결과 아래 절감률로 보여 줘요. 페이지 로딩 속도·CDN 비용 모두에 영향을 미치는 표준 빌드 단계예요.
프로덕션 배포 전 빌드 도구(webpack/vite/parcel)가 자동으로 minify하지만, 직접 작성한 인라인 스타일·커스텀 빌드 단계에서는 수동 minify가 필요할 때가 있어요.
color: red;} → color:red} 가능 (원치 않는 단축)_property: value 같은 옛 IE 핵은 일부 minifier가 제거calc(100% - 10px) 의 공백은 필수. 일부 도구가 잘못 제거결과를 라이브 환경에 올리기 전에 시각적 회귀 테스트(visual regression) 한 번 돌리는 게 안전해요.
Minify 다음 단계 최적화도 검토해보세요.
Lighthouse 점수에서 'Eliminate render-blocking resources' 항목이 이 최적화의 측정 지표예요.
Source map을 켜세요. 빌드 도구에서 sourceMap: true 옵션이면 dev 환경에서 원본 파일·줄번호로 디버깅 가능해요. 프로덕션에는 sourceMap 노출 안 하는 게 보안에 좋아요.
SCSS/SASS는 먼저 일반 CSS로 컴파일한 뒤 minify해요. 빌드 파이프라인이 두 단계로 처리해요.
긍정적이에요. 페이지 로딩 속도가 Core Web Vitals(LCP·FCP)에 직결되거든요. 단, robots.txt나 보안 헤더에는 영향 없어요.
calc(100% - 10px)의 +/- 양옆 공백은 필수 — minify 시 제거하면 깨진다는 표준 근거