HTML 압축 도구 추천과 사용법 - 웹페이지 로딩 속도 높이는 코드 최적화 가이드
HTML 압축만으로 파일 크기를 10~25%까지 줄일 수 있습니다. 설치 없이 쓰는 온라인 도구부터 빌드 자동화까지, 상황별 HTML 압축 도구 선택 기준과 주의사항을 정리했습니다.
웹사이트 속도 측정 도구에서 생각보다 낮은 점수를 받고 당황한 경험, 한 번쯤 있으실 겁니다. 서버도 바꿔 보고 플러그인도 정리했는데 점수가 오르지 않는다면, 의외로 기본적인 부분을 놓치고 있을 수 있습니다. 바로 HTML 파일 자체의 크기입니다. HTML 압축 도구를 사용하면 코드 로직을 한 줄도 바꾸지 않고 파일 크기를 줄일 수 있어서, 웹 최적화를 시작할 때 가장 먼저 시도해 볼 만한 방법입니다.
HTML 압축이 필요한 이유
HTML 압축(Minification)은 브라우저가 페이지를 그리는 데 필요 없는 문자를 제거해 파일 크기를 줄이는 작업입니다. 사람이 읽기 좋으라고 넣은 들여쓰기, 줄바꿈, 주석 같은 것들이 제거 대상입니다.
효과는 원본 상태에 따라 다르지만, 공백과 주석이 많은 파일이라면 압축만으로 원본 대비 10~25% 정도 크기가 줄어드는 경우가 흔합니다. HTML은 브라우저가 가장 먼저 내려받아 해석하는 파일이기 때문에, 이 파일이 가벼워지면 첫 화면이 표시되는 시점에도 직접적인 영향을 줍니다.
특히 다음과 같은 경우라면 효과를 체감하기 쉽습니다.
- 템플릿 엔진이나 CMS가 생성한 HTML에 공백과 주석이 많이 남아 있는 경우
- 페이지 하나의 HTML이 100KB를 넘는 콘텐츠형 사이트
- 모바일 접속 비중이 높아 네트워크가 불안정한 사용자가 많은 경우
HTML 압축은 무엇을 없애는 걸까
압축 도구가 하는 일은 생각보다 단순합니다. 대표적으로 제거되거나 정리되는 요소는 다음과 같습니다.
- 공백과 줄바꿈: 태그 사이의 불필요한 스페이스, 탭, 개행 문자
- 주석: HTML 주석 전체. 도구 옵션에 따라 특정 주석만 남길 수도 있습니다
- 불필요한 속성: 기본값과 동일한 속성값, 빈 속성, 따옴표 생략이 가능한 부분
- 인라인 코드의 공백: style, script 태그 내부의 공백 (도구에 따라 지원 범위가 다름)
압축 효과는 원본 크기가 아니라 gzip이나 brotli가 적용된 이후의 실제 전송 크기로 판단해야 합니다. 서버 압축이 이미 켜져 있다면 Minification의 추가 절감 폭은 몇 퍼센트 수준으로 줄어들지만, 브라우저가 파싱해야 할 문자 자체가 줄어드는 이점은 그대로 남습니다.
HTML 압축 도구 추천 4가지
도구는 크게 브라우저에서 바로 쓰는 온라인 방식과, 배포 과정에 끼워 넣는 자동화 방식으로 나뉩니다. 상황별로 정리하면 다음과 같습니다.
| 도구 | 사용 방식 | 이런 분께 추천 |
|---|---|---|
| Toptal HTML Minifier | 온라인, 붙여넣기 방식 | 설치 없이 파일 한두 개만 빠르게 처리할 때 |
| html-minifier-terser | npm 패키지 (CLI, 빌드 연동) | Node.js 환경에서 세부 옵션까지 제어하고 싶을 때 |
| minify (tdewolff) | Go 기반 CLI | 수백 개 파일을 일괄 처리할 때, 속도가 중요할 때 |
| 빌드 도구 내장 기능 | Vite, webpack, Nuxt 등에서 자동 처리 | 이미 프레임워크 기반으로 개발 중인 프로젝트 |
온라인 도구로 시작하기
정적인 HTML 파일 몇 개만 관리한다면 온라인 도구로 충분합니다. 코드를 붙여넣고 버튼 한 번이면 결과가 나오고, 압축 전후 크기를 바로 비교해 주는 곳이 많아 효과를 눈으로 확인하기 좋습니다. 다만 매번 수동으로 반복해야 하고, 파일이 수정될 때마다 다시 압축해야 한다는 한계가 있습니다.
빌드 자동화로 넘어가기
페이지가 수십 개를 넘어가면 수동 압축은 현실적으로 유지가 어렵습니다. html-minifier-terser 같은 도구를 빌드 스크립트에 연결해 두면 배포할 때마다 자동으로 압축된 결과물이 생성됩니다. Nuxt, Next.js 같은 프레임워크는 프로덕션 빌드 시 상당 부분을 알아서 처리해 주므로, 이 경우에는 별도 도구보다 빌드 설정을 먼저 확인하는 것이 순서입니다.
압축 전 반드시 확인할 것
HTML 압축은 안전한 편이지만, 몇 가지 예외 상황에서는 화면이 깨질 수 있습니다.
- pre, textarea 태그: 이 태그 안의 공백과 줄바꿈은 화면에 그대로 표시되는 내용입니다. 제대로 된 도구는 기본적으로 보존하지만, 압축 후 반드시 확인해야 합니다
- 인라인 JavaScript: 주석 처리 방식에 따라 압축 과정에서 코드가 깨질 수 있으므로, 압축 후 콘솔 에러를 점검해야 합니다
- 원본 관리: 압축본을 원본 위에 덮어쓰면 이후 수정이 매우 어려워집니다. 원본은 그대로 두고 배포용 파일만 압축하는 구조를 만들어야 합니다
HTML 압축만으로는 부족한 이유
여기까지 적용했다면 한 가지 짚고 넘어갈 부분이 있습니다. 일반적인 웹페이지에서 전체 용량의 가장 큰 비중을 차지하는 것은 HTML이 아니라 이미지라는 점입니다. HTML을 30KB 줄여도 압축되지 않은 2MB짜리 사진 한 장이 있으면 체감 속도는 거의 달라지지 않습니다.
그래서 실제 최적화 작업에서는 HTML 압축과 이미지 최적화를 한 세트로 진행하는 것이 효율적입니다. 이미지는 설치 없이 브라우저에서 바로 쓸 수 있는 이미지 압축 도구로 용량을 줄인 뒤 업로드하는 습관만 들여도, HTML 압축보다 훨씬 큰 폭의 개선을 얻는 경우가 많습니다. 두 작업을 함께 하면 페이지 전체 용량 기준으로 의미 있는 변화를 만들 수 있습니다.
오늘 바로 시작하는 방법
순서는 간단합니다. 먼저 온라인 HTML 압축 도구에 대표 페이지의 소스를 붙여넣어 몇 퍼센트가 줄어드는지 확인해 보세요. 절감 폭이 10%를 넘는다면 빌드 자동화까지 도입할 가치가 충분합니다. 그다음 사이트에서 가장 용량이 큰 이미지 5장을 골라 압축해서 교체해 보세요. 이 두 가지만으로도 페이지 속도 점수가 눈에 띄게 달라지는 것을 확인할 수 있을 겁니다.
