무료 변환기

HTML 축소기

브라우저에서 HTML 코드를 즉시 축소하고 압축하세요. 주석을 제거하고, 공백을 축소하고, 파일 크기를 줄이세요. 무료이며 비공개입니다.

여기에 HTML 파일을 드래그 앤 드롭하세요.

.html 및 .htm 파일을 지원합니다. 또는 위에 HTML을 붙여넣으세요.

또는

이 도구에 대하여

HTML 축소는 웹페이지 소스에서 불필요한 문자(태그 사이의 공백, 주석, 중복된 따옴표, 선택적인 닫는 태그)를 제거하여 페이지 렌더링 방식을 변경하지 않고 파일 크기를 줄입니다. 페이지당 절감 효과는 보통 10~30%이지만, 특히 정적 사이트나 동적 압축 없이 제공되는 페이지의 경우 많은 요청에 걸쳐 복합적으로 절감됩니다.

이 축소기는 블록 수준 요소 사이의 공백을 제거하고, 중요하지 않은 텍스트 내의 공백을 축소하고, HTML 주석(IE 조건부 주석 제외)을 제거하고, HTML5 사양에서 허용하는 중복 속성 인용문을 제거하고, 사양에서 허용하는 선택적 닫는 태그(</p>, </li>)를 제거합니다. 결과는 모든 브라우저의 소스와 동일하게 렌더링됩니다.

축소는 서버 수준에서 gzip 또는 Brotli 압축과 함께 사용할 때 가장 유용합니다. 압축은 이미 축소로 인해 발생하는 절감 효과의 대부분을 제거하지만 두 가지를 결합한 경우 특히 대역폭 비용이 중요한 트래픽이 많은 사이트의 경우 여전히 압축보다 낫습니다.

HTML을 축소하는 이유

특히 느린 연결 및 모바일 네트워크에서는 작은 HTML이 더 빠르게 로드됩니다. 페이지 무게는 핵심 웹 바이탈에 직접적인 영향을 미칩니다. 콘텐츠가 포함된 최대 페인트와 첫 번째 바이트까지의 시간은 모두 서버가 구문 분석을 위해 더 적은 HTML을 반환할 때 향상됩니다. SEO 순위가 Core Web Vitals 점수에 따라 달라지는 사이트의 경우 축소는 측정 가능한 개선입니다.

또한 축소된 HTML은 대규모로 대역폭 비용을 줄여줍니다. 페이지당 10KB를 절약하여 하루에 백만 페이지를 제공하는 사이트는 매일 10GB의 송신을 절약합니다. 데이터 전송을 기준으로 요금을 청구하는 CDN에서 제공되는 정적 사이트에 대한 영향 복합입니다.

사용 방법

HTML을 붙여넣고 축소된 버전을 받으세요.

  1. HTML 입력 추가: HTML 소스를 입력 영역에 붙여넣거나 .html 파일을 놓습니다. 축소기는 유효한 HTML5 마크업을 허용합니다.
  2. 옵션을 선택하세요: 기본값은 주석을 제거하고 공백을 축소합니다. 특정 요소를 보존해야 하는 경우(예: 문서에 대한 주석 유지) 개별 변환을 비활성화할 수 있습니다.
  3. 축소: 축소기는 HTML 토큰 스트림을 탐색하여 활성화된 각 변환을 적용합니다. 출력은 크기가 축소된 기능적으로 동일한 HTML입니다.
  4. 복사 또는 다운로드: 결과를 제공된 HTML로 사용합니다. 배포하기 전에 대상 브라우저에서 페이지가 올바르게 렌더링되는지 확인하세요.

일반적인 사용 사례

기술적인 세부사항

축소기는 HTML 토큰을 토큰별로 처리합니다. 블록 수준 요소(<div>, <p>, <ul>) 사이의 공백은 렌더링에 영향을 주지 않으므로 제거됩니다. 인라인 컨텍스트(<span>, <a>, 텍스트 콘텐츠) 내부의 공백은 렌더링에 영향을 미칠 수 있으므로 보존됩니다.

주석은 기본적으로 제거되지만 조건부 주석(<!--[if IE]>)은 유지됩니다. HTML5 파서가 허용하는 경우 속성 따옴표가 제거됩니다. 공백이나 특수 문자가 없는 단일 단어 속성 값은 따옴표를 생략할 수 있습니다.

선택적인 닫는 태그는 HTML5 사양에 따라 생략됩니다: </p>, </li>, </td>. 그리고 닫는 것을 암시하는 형제가 뒤에 올 때 몇 가지 다른 태그를 생략할 수 있습니다. 이는 읽기에는 드물지만 브라우저가 동일하게 구문 분석하는 유효한 HTML5입니다.

모범 사례

자주 묻는 질문

HTML 축소는 무엇을 제거합니까?
태그, HTML 주석(<!-- -->), 선택적 닫는 태그(</li>, </p>, </td>), 기본 속성 값(입력의 type="text") 및 부울 속성 값(disabled="disabled" → 비활성화) 사이에 불필요한 공백이 있습니다.
축소로 인해 내 페이지가 손상될 수 있나요?
드물지만 CSS가 인라인 요소 사이의 공백을 사용하거나 JavaScript가 innerHTML 비교를 사용하는 경우 가능합니다. 항상 축소된 출력을 테스트하십시오. 이 도구는 기본적으로 보수적인 설정을 사용합니다.
Next.js와 같은 프레임워크를 사용하는 경우 HTML을 축소해야 합니까?
대부분의 최신 프레임워크(Next.js, Nuxt, Angular)는 프로덕션 빌드에서 HTML을 자동으로 축소합니다. 이 도구는 정적 HTML 파일, 이메일 템플릿, 빌드 시스템이 없는 프로젝트에 유용합니다.
인라인 CSS와 JavaScript도 축소됩니까?
이 도구는 HTML 구조에 중점을 둡니다. 인라인 <style> 및 <script> 내용은 그대로 유지됩니다. 이러한 경우 최적의 결과를 얻으려면 전용 CSS 및 JavaScript 축소기를 사용하세요.
선택적 닫는 태그를 제거해도 안전한가요?
예, HTML5 사양에 따라 다르지만 결과를 읽기가 더 어렵습니다. 일부 팀에서는 명확성을 위해 이 변환을 비활성화하고 약간의 크기 저하를 허용합니다.
내 HTML이 서버에 업로드됩니까?
아니요. 축소기는 브라우저에서 실행됩니다.
이것은 html-minifier-terser와 어떻게 비교됩니까?
html-minifier-terser는 표준 Node.js HTML 축소기이며 약간 더 공격적인 결과를 생성합니다. 이 도구는 빌드 설정 없이 브라우저 측에서 사용할 수 있는 동일한 변환을 다룹니다.
항상 축소해야 합니까, 아니면 선택적으로 축소해야 합니까?
항상 생산을 위해. 버전 관리의 소스 코드에는 절대로 사용하지 마십시오. 소스에서 읽을 수 있는 HTML은 유지 관리에 필수적입니다.