CSS 용량 줄이기
페이지를 렌더링하려면 CSS의 모든 바이트를 다운로드하고 파싱해야 합니다. 따라서 스타일시트 용량이 작을수록 초기 렌더링 속도가 빨라지고, 코어 웹 바이탈(Core Web Vitals)이 개선되며 모바일 데이터 소모가 줄어듭니다. 이 CSS 압축기는 공백과 주석을 제거하고, 중복 규칙 병합, 색상 코드 단축, 불필요한 값 제거 등의 구조적 최적화를 적용하여 페이지의 외관을 유지하면서 스타일시트 용량을 최소화합니다.
주요 기능
- 공백 및 주석 제거.
- 값 단축: 색상, 0, 단위 및 폰트 굵기.
- 구조적 최적화: 중복 선택자를 병합하고 덮어쓰인 선언을 제거합니다.
- 라이선스 주석(
/*! … */) 유지 옵션. - 용량 비교 (바이트 및 퍼센트 단위).
- 개인정보 보호: 모든 작업이 브라우저 내에서만 안전하게 실행됩니다.
압축 전후 비교
.card .title {
font-weight: bold;
color: #333333;
}
.card .title {
font-size: 1.25em;
}
변환 결과:
.card .title{font-weight:700;color:#333;font-size:1.25em}
CSS 압축이 필요한 경우
프로덕션 빌드 과정의 일부로 CSS를 압축하고, 읽기 쉬운 원본 소스는 버전 관리 시스템에 보관하세요. 대부분의 프레임워크와 번들러는 이 작업을 자동으로 수행합니다. 이 도구는 빠른 수정, CMS 테마, 이메일 템플릿, 임베디드 위젯 및 빌드 단계가 없는 프로젝트에 유용하게 사용할 수 있습니다.
관련 도구
JavaScript 압축기로 스크립트를 압축하거나, Box Shadow 생성기 및 CSS 그라데이션 생성기를 사용하여 시각적으로 스타일을 만들어 보세요. JSON 데이터를 정렬할 때는 JSON 포매터를 활용할 수 있습니다.