HTML 입력
압축 결과
복사됨!
HTML 압축기 (Minifier)
HTML 붙여넣고 옵션 고르면 압축본 제공. pre·code·script 태그 안쪽은 그대로 보존.
쓰는 법
- 옵션 체크 (주석 제거 / 줄바꿈 제거 / 공백 축소).
- 왼쪽에 HTML 붙여넣기.
- 'HTML 압축' 버튼 클릭.
- 오른쪽에 압축본 + 원본/압축 크기 + 절약률 표시.
- 복사 한 번이면 끝.
HTML 용량 줄여서 TTFB 개선하기
HTML 소스에 들어있는 주석, 들여쓰기 공백, 줄바꿈은 브라우저가 어차피 무시하는 거지만 전송 용량엔 포함돼요. 이걸 싹 빼면 보통 10~30% 줄어들고, 그만큼 다운로드가 빨라져서 TTFB(첫 바이트 응답 시간)가 개선됩니다.
주의할 점은 <pre>, <code>, <textarea>, <script> 같이 공백이 의미 있는 태그 안쪽은 절대 건드리면 안 되거든요. 여긴 그 부분 다 보존하면서 필요한 곳만 압축해드려요.
여기 쓰면 편한 점
- 옵션 토글로 어떤 최적화를 적용할지 직접 고를 수 있어요.
- pre, code, textarea, script 내부는 절대 안 건드려서 코드 예시나
로 감싼 블록이 깨질 걱정 없어요.
- HTML 다운로드 용량이 줄어드니까 페이지 로딩 속도 개선에 직접 영향.
- 주석(
<!-- -->)은 싹 제거돼서 개발자 메모가 프로덕션에 노출될 일 없어요. - 원본/압축 크기가 숫자로 나와서 효과 바로 확인 가능.
- HTML은 브라우저 밖으로 안 나가요. 내부망 페이지 넣어도 안전.
다른 HTML Minifier랑 비교
| 항목 | 사장나라 | html-minifier (npm) | htmlcompressor.com |
|---|---|---|---|
| 동작 위치 | 브라우저 | Node.js | 서버 |
| 설치 필요 | 없음 | npm install | 없음 |
| 옵션 개수 | 3종 토글 | 다수 | 제한적 |
| pre/code 보존 | 있음 | 있음 | 있음 |
| 광고 | 거의 없음 | 해당 없음 | 많음 |
자주 묻는 질문
압축하면 레이아웃이 깨지지 않나요?
주석 제거랑 태그 사이 공백 축소는 렌더링에 영향 없어요. pre, code, textarea, script 내부는 보존하니까 코드 블록이나 입력창도 안 깨집니다.
얼마나 줄어요?
원본 들여쓰기랑 주석 양에 따라 보통 10~30% 줄어들어요. 정적 사이트 빌드 결과물이 큰 프로젝트는 CDN 전송량 비용까지 줄어듭니다.
인라인 CSS랑 JavaScript도 압축되나요?
script 태그 안쪽은 그대로 보존돼요. 인라인 JS/CSS도 압축하고 싶으시면 CSS Minifier나 JS Minifier 도구 따로 쓰시면 됩니다.
HTML 엔티티(<, &)는 어떻게 되나요?
그대로 유지돼요. 이 도구는 공백이랑 주석만 제거하지, 내용(텍스트나 엔티티)은 안 건드립니다.
HTML이 서버로 올라가요?
아니요. 전부 브라우저 안에서 처리합니다. 내부 페이지나 관리자 템플릿도 안심하고 넣으셔도 돼요.