HTML 미니파이어 – 마크업 압축과 바이트 절감량 측정
HTML 미니파이어는 붙여넣거나 드래그한 HTML을 브라우저의 DOMParser로 파싱해 주석을 제거하고, 공백을 압축하고, 인라인 CSS와 JavaScript를 축소해 더 간결한 버전으로 만듭니다. 사용 가능한 축소 옵션을 선택한 뒤 전·후 바이트 수와 절감 비율과 함께 출력을 검토하세요. IE 조건부 주석은 유지되므로 간결해진 결과를 사용 전에 확인할 수 있습니다.
HTML 미니파이어는 마크업을 간결하게 만드는 브라우저 기반 HTML 축소 도구입니다. HTML을 붙여넣거나 드래그해 온라인으로 변환한 뒤 원본과 함께 출력을 검토하고 바이트 수와 절감 비율을 확인하세요. HTML을 파싱하고 다시 직렬화하는 데 브라우저의 DOMParser를 사용합니다.
축소 과정에서 주석이 제거되고, 공백이 압축되며, 인라인 스타일과 스크립트 블록이 축소됩니다. 사용 가능한 축소 옵션을 선택할 수 있지만, 도구의 동작은 제공하는 옵션으로 제한됩니다. IE 조건부 주석은 유지됩니다. 전·후 크기 수치로 어림값이 아닌 실제 결과를 확인할 수 있습니다.
HTML은 페이지 구조를 기술하는 마크업이고, CSS는 스타일을 정의하며, JavaScript는 스크립팅을 제공합니다. 축소는 주석이나 공백 같은 콘텐츠를 제거하거나 줄여 직렬화된 마크업을 더 간결하게 만듭니다. 페이지를 배포하거나 마크업을 URL·헤더·설정 값에 넣을 때 더 작은 HTML 페이로드를 사용할 수 있습니다. 생성된 결과는 용도에 맞는지 항상 검토하세요.
HTML 미니파이어는 브라우저에서 완전히 동작합니다. 입력은 사용자의 기기에서 처리되며 업로드되거나 저장되거나 서버로 전송되지 않습니다. 페이지가 로드된 후에는 서버가 필요 없으므로 오프라인에서도 동작합니다. 이 도구는 무료이며, 마크업을 다른 곳으로 보내지 않고도 HTML을 간결하게 만들고 바이트 절감량을 확인하고 싶은 개발자와 DevOps 엔지니어에게 유용합니다.
1단계: HTML을 도구에 붙여넣거나 드래그하세요. 미니파이어는 HTML 입력을 받아 브라우저에서 처리합니다.
2단계: 사용 가능한 축소 옵션을 선택하세요. HTML과 인라인 스타일·스크립트 블록에 적용될 축소를 조정합니다.
3단계: 간결해진 HTML 결과를 검토하세요. 도구가 마크업을 파싱하고 다시 직렬화하며 주석을 제거하고 공백을 압축합니다.
4단계: 전·후 바이트 수와 절감 비율을 비교한 뒤 결과를 프로젝트에 복사하세요.
사용 사례: 프로젝트에 배포하기 전에 HTML을 줄이세요. 주석 제거와 공백 압축으로 마크업을 더 간결하게 만들 수 있습니다.
사용 사례: 원본과 축소된 바이트 수를 비교해 크기 감소가 페이지에 유용한지 판단하세요.
사용 사례: URL·헤더·설정 값에 맞추기 위해 마크업을 다른 형식에 넣어야 할 때 간결한 HTML 페이로드를 만드세요.
사용 사례: 인라인 CSS와 JavaScript를 HTML과 함께 축소해 포함된 블록도 간결한 결과에 포함하세요.
사용 사례: 사용 가능한 다양한 축소 옵션을 바꿔가며 결과 마크업과 바이트 절감량을 확인하세요.
사용 사례: 주석과 불필요한 공백을 제거하면서 IE 조건부 주석은 유지해 HTML을 검토나 공유용으로 준비하세요.