HTML 압축기
HTML 코드를 압축해 파일 크기를 줄입니다
HTML 압축기
이 도구는 HTML을 파싱해서 구조를 이해하는 것이 아니라, 입력한 텍스트에 정규식을 순서대로 적용하는 방식으로 동작합니다. 먼저 주석 제거 옵션이 켜져 있으면 <!--...--> 패턴을 지우고, 줄바꿈 제거는 모든 개행을 공백 하나로 바꾸며, 태그 간 공백 제거는 > < 형태를 ><로 붙이고, 마지막으로 속성 공백 정규화가 연속된 공백 두 칸 이상을 한 칸으로 줄입니다. 결과 크기는 문자 수가 아니라 Blob([문자열]).size로 측정한 실제 UTF-8 바이트 수를 기준으로 압축률을 계산하므로, 한글처럼 한 글자가 3바이트를 차지하는 텍스트가 많으면 압축률 수치가 영문 위주 HTML과 다르게 나올 수 있습니다.
자주 묻는 질문
이 압축기는 실제 HTML 파서를 사용하나요?
아니요. DOM 트리를 만들어 태그 구조를 이해하는 방식이 아니라 정규식으로 텍스트를 치환하는 단순한 방식입니다. 그래서 속도는 빠르지만 아래 항목들처럼 문맥을 구분하지 못하는 한계가 있습니다.
압축이 HTML 기능을 망가뜨릴 수도 있나요?
대부분의 경우 안전하지만, <pre>나 <textarea> 태그 안의 공백은 원래 화면에 그대로 표시되어야 하는 의미 있는 공백인데, 이 도구는 정규식이 태그 구분 없이 전체 텍스트에 동일하게 적용되므로 그 안의 연속 공백도 함께 줄어들어 레이아웃이 깨질 수 있습니다.
압축 효과(절감률)는 어떻게 계산되나요?
원본과 결과물 각각을 Blob(...).size로 측정한 바이트 수를 비교해 (1 - 압축후/원본) × 100으로 계산합니다. 들여쓰기와 주석이 많은 HTML일수록, 그리고 코드 자체가 짧을수록 상대적 절감률은 더 크게 나오는 경향이 있습니다.
gzip과 함께 쓰면 의미가 있나요?
네. 이 도구가 하는 공백·주석 제거는 gzip 압축 이전 단계의 원본 크기를 줄이는 것이고, gzip은 반복되는 패턴을 압축하는 별개의 알고리즘이라 두 방식은 서로 대체가 아니라 보완 관계입니다. 다만 공백이 많이 제거된 파일은 gzip이 찾아낼 반복 패턴 자체가 줄어들어, 압축 전 파일 기준으로 보면 gzip 이후 최종 크기 차이는 생각보다 크지 않을 수 있습니다.
script나 style 태그 내부 코드도 함께 압축되나요?
이 도구는 HTML 전체를 하나의 텍스트로 취급하므로 인라인 <script>·<style> 내부의 줄바꿈과 공백도 똑같이 정리됩니다. 다만 JS/CSS 문법에 맞는 안전한 압축(변수명 유지, 세미콜론 자동 삽입 등)은 하지 않으므로, 별도의 JS 압축이 필요하면 javascript-minifier를, CSS는 css-minifier를 사용하는 것이 안전합니다.
주석을 지우면 안 되는 경우가 있나요?
IE 조건부 주석(<!--[if IE]>...<![endif]-->)처럼 문법적으로는 주석이지만 실제 동작에 영향을 주는 경우, 이 도구의 정규식은 그 구분 없이 모든 주석을 동일하게 지우므로 그런 코드가 포함된 파일은 주석 제거 옵션 자체를 꺼야 안전합니다.
실제 배포용으로는 이 도구만으로 충분한가요?
빠른 확인이나 일회성 압축에는 적합하지만, 빌드 파이프라인에 자동으로 넣어야 한다면 HTML을 실제로 파싱해 태그 문맥을 구분하는 html-minifier-terser 같은 라이브러리나 webpack의 HtmlWebpackPlugin을 쓰는 것이 더 안전합니다.
4가지 옵션을 전부 꺼도 되나요?
네, 옵션을 모두 끄면 입력을 그대로 출력하므로 압축 효과는 0%가 됩니다. 어떤 옵션이 실제로 크기를 줄이는지 확인하고 싶을 때 하나씩 꺼보면서 결과창의 바이트 수 변화를 비교해볼 수 있습니다.