미니파이하면 인라인 JavaScript나 CSS가 깨지지 않나요?

미니파이는 문자열, 템플릿 리터럴, 정규식 안의 의미 있는 공백을 보존합니다. 인라인 JS·CSS 미니파이어도 마찬가지입니다. ASI에 의존하는 코드처럼 특수한 경우라면 Minify Inline JS를 끄고 공백 압축만 사용하세요.

Remove Optional Tags는 정확히 무엇을 제거하나요?

스펙이 생략을 허용하는 태그입니다. 다음 앞의 , 블록 요소 앞의 , , , 심지어 이나 의 여는 태그까지 포함합니다. 브라우저는 동일하게 해석하지만 일부 구식 도구는 불만을 표시할 수 있습니다.

Gzip이 이미 압축하는데 미니파이는 중복 아닌가요?

Gzip은 매우 효과적이지만 먼저 미니파이를 하면 보통 5%에서 10%가 더 줄어듭니다. Gzip은 내용 순서를 바꾸거나 중복 토큰을 제거하지 못합니다. 결국 브라우저에 도착하는 최종 크기가 TTFB를 결정합니다.

미니파이된 HTML이 W3C 검증을 통과하나요?

기본 옵션에서는 통과합니다. Remove Optional Tags가 만든 결과도 HTML5로서 유효합니다. 스펙이 해당 태그의 생략을 명시적으로 허용하기 때문입니다. 엄격한 XHTML을 원한다면 이 옵션을 꺼두세요.

미니파이된 HTML을 원래 서식으로 되돌릴 수 있나요?

완전히는 안 됩니다. 공백, 주석, 생략된 태그는 사라지면 돌아오지 않습니다. 내장된 포맷 버튼이 들여쓰기를 다시 맞춰 읽기 좋게 해주지만, 원래 레이아웃이나 지운 주석은 복구하지 못합니다. 원본 파일을 따로 보관하세요.

HTML 압축 도구

파일 크기를 줄이기 위해 HTML 코드 압축

원본 HTML

685 문자 · 36 줄

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <style>
    body {
      margin: 0;
      padding: 16px;
      font-family: sans-serif;
    }
    .container {
      max-width: 960px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <!-- Main content area -->
  <div class="container">
    <h1>Hello, World!</h1>
    <p>
      This is a sample HTML page with
      extra whitespace, comments, and
      inline styles to demonstrate minification.
    </p>
  </div>

  <script>
    // Initialize the page
    document.addEventListener('DOMContentLoaded', function() {
      console.log('Page loaded');
    });
  </script>
</body>
</html>

HTML 페이지로 가는 직접 링크를 붙여넣으세요. CORS를 허용하는 서버가 필요합니다.

설정

자동 압축

프리셋

공백 축소주석 제거선택적 태그 제거인라인 CSS 압축인라인 JS 압축불리언 속성 축약불필요한 type 속성 제거