작동 원리

HTML 압축기는 여러 단계의 최적화를 수행합니다. 먼저 주석을 제거하고, 연속된 공백과 줄바꿈을 하나의 공백으로 축소합니다. 태그 속성의 불필요한 따옴표를 제거하고, boolean 속성(checked, disabled 등)의 값을 생략합니다. 인라인 CSS와 JavaScript도 함께 최소화할 수 있습니다. 이러한 과정을 통해 HTML 파일 크기를 일반적으로 20~40% 줄여 페이지 로드 시간을 단축합니다.

압축으로 줄어드는 실제 이득

주의할 점이 있습니다. 파일 크기가 30% 줄어도 실제 전송량이 30% 줄지는 않습니다. 요즘 서버는 대부분 gzip이나 brotli로 한 번 더 압축해서 보내는데, 이 압축은 반복되는 공백을 매우 효율적으로 처리하기 때문입니다. 이미 지운 공백은 어차피 압축에서도 거의 자리를 차지하지 않았던 것입니다.

그래서 압축 후 전송량 차이는 보통 몇 퍼센트 수준입니다. 그럼에도 최소화를 하는 이유는 파싱 시간이 줄고, 압축을 적용하지 않는 환경에서도 이득이 있으며, 캐시 용량을 덜 쓰기 때문입니다. 큰 효과를 기대하기보다 배포 과정에 자동으로 끼워 넣는 정도가 적절합니다.

공백을 함부로 지우면 안 되는 곳

HTML에서 공백은 대부분 무시되지만 예외가 있습니다. 인라인 요소 사이의 공백은 실제로 한 칸 띄어쓰기로 렌더링됩니다. <span>가</span> <span>나</span>에서 공백을 지우면 "가 나"가 "가나"로 붙어버립니다.

<pre>와 <textarea> 안은 더 확실합니다. 이 요소들은 공백과 줄바꿈을 있는 그대로 표시하도록 정의되어 있어서, 내용을 건드리면 화면에 보이는 결과가 바뀝니다. 코드 예제를 담은 페이지를 압축했다가 들여쓰기가 사라지는 사고가 여기서 납니다. 압축 후에는 반드시 화면을 확인하세요.

원본을 따로 보관하세요

압축된 HTML은 되돌릴 수 없습니다. 정렬 도구로 다시 펼칠 수는 있지만 원래의 줄 나눔과 주석은 복원되지 않습니다. 압축본은 배포용, 원본은 작업용으로 나눠 관리하는 것이 원칙입니다. 저장소에 커밋하는 것은 언제나 원본이어야 합니다.

자주 묻는 질문

주석이 전부 사라지나요?

일반 주석은 제거됩니다. 다만 조건부 주석처럼 기능을 갖는 주석이 있으므로, 오래된 브라우저 대응 코드가 들어 있다면 결과를 확인하세요.

SEO에 영향이 있나요?

내용이 바뀌지 않으므로 직접적인 영향은 없습니다. 페이지가 조금 빨라지는 만큼 간접적인 도움은 될 수 있지만, 체감할 정도는 아닙니다.

코드가 서버로 전송되나요?

전송되지 않습니다. 압축이 브라우저 안에서 이루어지며 어떤 요청도 발생하지 않습니다.

HTML 압축이란?

HTML 압축(Minification)은 코드의 동작을 그대로 유지하면서 파일 크기를 줄이는 최적화 기법입니다. 사람이 읽기 쉽도록 넣은 들여쓰기, 줄바꿈, 공백, 주석 등은 브라우저 렌더링에 영향을 주지 않지만 전송되는 데이터 양을 늘립니다. 이런 불필요한 문자를 제거하면 파일 크기가 줄어들고, 결과적으로 페이지 로딩 속도가 빨라집니다. 보통 HTML 파일은 압축 후 10~30% 정도 크기가 줄어드는데, 주석이 많거나 들여쓰기가 깊은 파일일수록 효과가 큽니다.

HTML 압축기

HTML 압축(Minify) 도구 안내