HTML 압축기 (HTML Minifier)
HTML을 붙여넣으면 주석과 불필요한 공백을 제거하고 인라인 CSS와 JavaScript를 압축합니다. <pre>와 <textarea> 안의 내용은 작성한 그대로 유지됩니다.
브라우저에서 실행가입 불필요업로드 없음
압축 결과
HTML 압축기 사용 방법
- HTML 문서나 조각을 붙여넣거나
.html파일을 엽니다. - 제거할 항목을 고릅니다: 주석, 공백, 그리고 인라인
<style>와<script>블록도 압축할지 여부. - 경고 줄을 확인합니다. 문법 오류가 있는 인라인 스크립트는 페이지를 망가뜨리지 않도록 변경 없이 유지됩니다.
- 압축된 HTML을 복사하거나 다운로드합니다.
무엇이 제거되나요?
- 주석:
<!-- … -->를 제거합니다. 단, Internet Explorer 조건부 주석과<!--!로 시작하는 주석은 제외합니다. - 블록 요소 사이의 공백:
<div>,<li>,<head>같은 태그 사이의 줄바꿈과 들여쓰기는 렌더링되지 않으므로 완전히 제거합니다. - 텍스트 안의 연속 공백: 공백 하나로 줄입니다. 브라우저도 원래 그렇게 렌더링합니다.
- 태그 안의 공백:
<p class = "a">는<p class="a">가 됩니다.
무엇이 유지되나요?
공백이 의미를 갖는 곳이 있으며, 압축기는 이를 존중합니다. <pre>와 <textarea>의 내용은 바이트 단위로 그대로 유지됩니다. <b>bold</b> text처럼 인라인 요소 사이의 공백 하나는 제거하면 단어가 붙어 버리므로 유지합니다. 속성 값과 따옴표는 절대 바꾸지 않습니다.
인라인 CSS와 JavaScript
인라인 <style> 블록은 CSSO로, 인라인 <script> 블록은 Terser로 최적화합니다. CSS 압축기와 JavaScript 압축기 페이지에서 쓰는 것과 같은 엔진입니다. JSON-LD 등 JSON 스크립트 블록은 압축하고, 알 수 없는 타입의 스크립트(예: 템플릿)는 그대로 둡니다.
HTML 압축은 효과가 있나요?
서버 렌더링 페이지와 정적 사이트에서 HTML 문서는 브라우저가 가장 먼저 다운로드하는 파일이므로, 줄인 바이트만큼 첫 렌더링까지의 시간이 짧아집니다. 전송 압축 전 기준으로 10~25% 절감이 흔하며, 들여쓰기가 많은 템플릿이나 인라인 스크립트가 큰 페이지는 더 많이 줄어듭니다.
자주 묻는 질문
HTML을 압축하면 페이지 모양이 바뀌나요?
아니요. 브라우저가 어차피 합쳐 버릴 공백만 제거하며,
<pre>/<textarea>의 내용은 건드리지 않습니다. CSS에서 white-space: pre로 요소를 스타일링한다면 공백 축소를 끄세요.인라인 JavaScript와 CSS도 압축하나요?
네, 옵션을 켜면 압축합니다. 인라인 블록에 문법 오류가 있으면 변경 없이 유지하고 경고를 표시하므로 페이지가 깨지지 않습니다.
Handlebars, Jinja, Blade 같은 템플릿 파일도 압축할 수 있나요?
템플릿 태그가 텍스트나 속성 값 안에만 있다면 대개 가능합니다. 태그 이름 안이나 속성 사이에 로직을 넣는 템플릿은 직접 확인이 필요할 수 있습니다.
HTML이 어딘가로 전송되나요?
아니요. 모든 처리는 브라우저에서 로컬로 이루어집니다.