CSS 축소기
브라우저에서 CSS 스타일시트를 즉시 축소하고 압축하세요. 주석을 제거하고, 공백을 축소하고, 파일 크기를 줄이세요. 무료이며 비공개입니다.
여기에 CSS 파일을 드래그 앤 드롭하세요.
.css 파일을 지원합니다. 또는 위에 CSS를 붙여넣으세요.
브라우저에서 CSS 스타일시트를 즉시 축소하고 압축하세요. 주석을 제거하고, 공백을 축소하고, 파일 크기를 줄이세요. 무료이며 비공개입니다.
.css 파일을 지원합니다. 또는 위에 CSS를 붙여넣으세요.
CSS 축소는 스타일시트에서 공백, 주석 및 불필요한 문자를 제거하여 브라우저에 제공하기 전에 크기를 줄입니다. 실제 규칙은 변경되지 않습니다. 축소된 스타일시트는 축소되지 않은 소스와 동일하게 페이지를 렌더링합니다. 줄 바꿈, 중복되는 세미콜론, 주석, 16진수 색상 속기 기회 및 0단위 단축키(0px를 0으로 대체)를 제거하면 비용이 절감됩니다.
수십 개의 스타일 규칙이 있는 최신 웹사이트에서 일반적인 축소는 축소되지 않은 소스에 비해 20~40%입니다. 서버에서 gzip 압축과 결합하면 한계 절감 효과가 줄어듭니다. gzip은 이미 반복되는 텍스트를 효과적으로 압축합니다. 하지만 이 조합은 특히 스타일시트가 캐시되어 많은 방문자에게 여러 번 제공되는 경우 여전히 압축 단독보다 낫습니다.
이 축소기는 CSS를 단일 패스로 처리하여 url() 값 외부의 주석 제거, 공백 축소, 중괄호 닫기 전 중복 세미콜론 제거, 0 단위 약어 적용, 가능한 경우 6자리 16진수 색상을 3자리 형식으로 변환(#ffffff → #fff)합니다. 출력은 모든 브라우저가 올바르게 구문 분석하는 유효한 CSS로 유지됩니다.
CSS 파일이 작을수록 더 빠르게 로드되고 렌더링 차단 시간이 단축되어 콘텐츠가 포함된 첫 번째 페인트 및 콘텐츠가 포함된 최대 페인트 점수가 모두 향상됩니다. Core Web Vitals가 검색 순위에 영향을 미치는 사이트의 경우 렌더링 차단 CSS의 모든 킬로바이트를 제거하는 것은 노력할 가치가 있습니다.
대역폭 비용도 규모에 따라 중요합니다. 수백만 개의 페이지 보기를 제공하는 사이트는 스타일시트가 30% 더 작을 때 측정 가능한 양의 송신을 절약합니다. CDN 청구서, 모바일 데이터 사용량 및 에너지 소비 모두 약간의 이익을 얻습니다. 축소는 기본적으로 무료입니다. 즉, 유지 관리 비용이 없는 일회성 빌드 단계입니다.
CSS를 붙여넣고 축소된 버전을 받으세요.
CSS 축소는 대부분 보수적인 공백 제거입니다. 선택기, 선언 및 값 내부의 공백은 중요한 곳에 유지됩니다. 외부의 공백은 축소됩니다. /*로 시작하지 않으면 주석이 제거됩니다! (라이센스 보존 설명).
일반적인 단축키: 0px, 0em 및 유사한 0 단위 값은 0이 됩니다. 숫자 쌍(#ffffff, #336699)이 포함된 6자리 16진수 색상은 3자리(#fff, #369)가 됩니다. } 앞의 마지막 세미콜론이 제거됩니다. 16진수는 때때로 더 길기 때문에 색상 이름은 자동으로 16진수로 변환되지 않습니다(빨간색은 길이가 #f00보다 짧고 #ff0000은 빨간색보다 깁니다).
출력은 입력을 허용하는 CSS 유효성 검사기를 통과해야 합니다. 브라우저 지원은 변경되지 않았습니다. 축소는 규칙 자체를 수정하지 않고 텍스트 표현만 수정합니다.