HTML 코드 압축

중요한 공백과 중요하지 않은 공백

HTML에서 두 인라인 요소 사이의 공백은 실제 공백입니다. 신중한 압축 도구와 페이지를 깨뜨리는 도구는 바로 여기서 갈립니다. 두 링크 사이의 줄바꿈을 없애면 화면에서 단어가 붙어 버리고, pre 블록이나 textarea 안의 들여쓰기를 없애면 내용 자체가 바뀝니다. 그곳에서는 공백이 곧 내용이기 때문입니다. 그래서 공백은 표시되지 않는다는 것이 확실한 곳에서만 제거하고, 표시되는 곳은 그대로 둡니다. 모든 공백을 일률적으로 지우는 도구는 파일은 작게 만들지만 눈에 띄게 잘못된 페이지를 내놓습니다.

주석은 제거합니다. 주석은 읽는 사람이 아니라 소스를 관리하는 사람을 위한 것이기 때문입니다. 다만 조건부 주석은 메모가 아니라 지시문이므로 예외입니다. 불필요한 속성도 삭제합니다. script 요소의 type="text/javascript"는 10년 넘게 기본값이었고, form의 method="get"은 어차피 폼이 하는 동작을 다시 적은 것일 뿐입니다.

속성 따옴표 제거는 올바른 HTML이지만 기본값은 꺼져 있으며, 이는 의도된 것입니다. 사양에서는 공백이나 까다로운 문자가 없는 한 따옴표 없는 속성 값을 허용하고, 브라우저도 이를 완벽하게 처리합니다. 하지만 템플릿 엔진은 그렇지 못한 경우가 많습니다. 따옴표 없는 속성 안에 Blade, Twig, Handlebars, JSX 표현식이 있으면 제대로 파싱되지 않고, 그 오류는 아무도 읽고 싶지 않은 파일에서 빌드할 때 드러납니다. 절약되는 용량은 작고 위험은 작지 않으니, 직접 켤 때만 적용됩니다.

얼마나 줄었는지는 압축 전이 아니라 압축 후를 기준으로 보는 것이 정확합니다. 서버는 HTML을 gzip이나 brotli로 압축해 보내고, 이 알고리즘은 반복되는 공백을 매우 잘 줄입니다. 그래서 최소화로 100 KB에서 70 KB가 된 문서도 실제 전송량은 12 KB에서 11 KB로 줄어드는 데 그칠 수 있습니다. HTML 최소화는 할 만한 가치가 있지만 셋 중 효과가 가장 작습니다. 진짜 무게는 스타일시트와 스크립트에 있습니다.

다른 작업이 필요할 때

파일 하나가 아니라 사이트 전체라면, 이 작업은 브라우저 탭이 아니라 빌드 과정에서 해야 합니다. 요즘 프레임워크와 정적 사이트 생성기는 모두 빌드할 때 HTML을 최소화하며, 손으로 하면 누군가 잊는 순간 멈춰 버립니다. 그 바탕이 되는 라이브러리는 변환 규칙 하나하나까지 설정할 수 있어, 특정 규칙이 문제를 일으킬 때 유용합니다.

마크업을 최적화하기 전에 페이지가 실제로 얼마나 무거운지 확인하세요. 거의 모든 실제 사이트에서 HTML은 이미지, 글꼴, JavaScript에 비하면 오차 수준입니다. Lighthouse나 브라우저의 네트워크 패널을 보면 몇 초 만에 알 수 있고, 대개는 최적화하지 않은 메인 이미지 하나가 페이지의 모든 마크업보다 더 큰 부담이라는 결론이 나옵니다.