키 포인트
html 압축, 문서에서 중복 요소를 제거하는 프로세스 인 파일 크기를 줄이고 코드 유지 관리 가능성을 향상시킬 수 있습니다. 그 효과에 대한 논란에도 불구하고 Google의 Pagespeed Insights는이 방법을 권장합니다.
HTML 압축을 자동으로 수행 할 수있는 세 가지 도구는 최소화되며, Peavy의 HTML Miniifier 및 Kangax HTML Miniifier. 각 도구에는 HTML 주석 제거, 불필요한 속성 및 공간과 같은 고유 한 기능과 기능이 있습니다.
중복 문자열을 포인터로 대체하는 기술 인 Gzipping과 함께 HTML 압축을 사용하면 파일 크기를 더욱 줄일 수 있습니다. 이 두 기술의 결과는 다르지만 두 가지 모두를 동시에 사용하면 소량의 바이트를 절약 할 수 있습니다.
-
이 기사는 Siteground와 공동으로 만들어진 일련의 기사의 일부입니다. Sitepoint를 가능하게 한 파트너를 지원해 주셔서 감사합니다.
HTML 압축의 이점에 대한 명확한 합의는 없지만 Google의 Pagespeed Insights에서 웹 사이트를 테스트하면 HTML, CSS 및 JavaScript를 압축해야한다는 것입니다. -
자원 압축은 중복 요소를 제거하는 것을 의미합니다. 즉, 문서에서 필요하지 않은 요소를 올바르게 처리합니다.
이 개념을 HTML 문서에 적용하고 압축은 다음을 포함 할 수 있습니다.
-
인라인 CSS 및 JavaScript 코드의 주석뿐만 아니라 HTML 주석을 제거하십시오
인라인 CSS 및 JavaScript에서 HTML 코드 및 공간을 제거하십시오
불필요한 따옴표, 빈 속성 등을 삭제하십시오
cdata 섹션 를 삭제하십시오
이러한 작업은 파일 크기를 줄이는 동시에 코드를 간단하고 유지 관리 할 수 있도록 도와줍니다.
gziping과 압축 자원의 비교
GZIP를 사용하는 경우 여전히 HTML을 압축 할 가치가 있습니까?
HTML 압축에 대한 한 가지 인수는 HTML 페이지 압축이 공간을 제거하고 파일 크기가 줄었다는 것입니다. 이것은 압축이 상당히 쓸모가 없게 만듭니다.
우선,이 두 작업은 동일하지 않으며 동일한 결과를 얻지 못한다는 점에 유의해야합니다.
압축 된 결과는 브라우저가 동일한 파일의 압축되지 않은 버전처럼 구문 분석하고 실행할 수있는 완전히 유효한 코드로 구성된 파일을 만듭니다. 반면에,
gzipping은 모든 중복 문자열을 찾고 문자열의 첫 인스턴스에 대한 포인터로 대체합니다. ... 네트워크에서 GZIPPING은 서버에서 직접 수행됩니다. ... 서버는 파일을 압축하여 네트워크를 통해 보냅니다. 브라우저는 파일을 수신하고 사용하기 전에 감압합니다.
CSS Tricks 에 Chris Coyer
즉,이 두 기술을 사용하면 소량의 바이트를 절약 할 수 있습니다. 예를 들어, GZIPPING 및 HTML 파일 압축 효과에서 Mads Kristensen은 4 개의 인기있는 웹 사이트 (예 : Amazon.com, CNN.com, Twitter.com 및 Xbox.com) HTML 파일을 압축하고 압축하는 작은 실험에 대해 설명합니다. 결과는 압축 및 압축을 수행함으로써 파일 크기가 9-16%감소 함을 보여준다.
다음 도구는 압축 프로세스를 자동으로 수행합니다.
최소화
최소화는 Node-HTMLPARSER2를 기반으로 한 오픈 소스 서버 측 HTML5 압축기입니다.
이 도구 :
는 HTML5 코드를 압축 할 수 있습니다 (오래된 HTML 드래프트, 인라인 PHP 코드 또는 템플릿 파일 없음)
는 매우 구성 가능합니다
는 조건을 구별 할 수 있습니다. 즉, 주석
… 자세한 내용은 Github의 프로젝트 페이지를 방문 할 수 있습니다.
는 Peavy의 HTML Miniifier 입니다
HTML 미니 시퍼는 PHP를 사용하여 구축 된 온라인 HTML 압축 도구입니다.
를 사용하려면 태그에 추가 할 수있는 CSS 및 JavaScript를 포함하여 HTML을 텍스트 상자에 붙여 넣고 압축 버튼을 클릭하십시오.
압축 후 스크립트가 여전히 유효한지 확인하기 위해 Peavy는 세미콜론 (;)으로 JavaScript 문을 종료하고 멀티 라인 주석 (/ * */) 를 사용하는 것이 좋습니다.
kangax html miniifier
Kangax HTML Miniifier는 강력한 기능을 갖춘 JavaScript 기반 HTML 압축기입니다.
이것은이 도구의 기능 중 일부일뿐입니다. -
html 댓글 삭제
스타일과 스크립트에서 주석을 삭제합니다
cdata 섹션 를 삭제하십시오
속성의 따옴표를 삭제하십시오
불필요한 속성을 삭제합니다
빈 속성을 삭제합니다
htmllint - 를 통해 입력을 확인하십시오
필요에 따라 각 옵션을 구성 할 수 있습니다.
HTML 미니 페이어에 대해 자세히 알아 보려면 Kangax의 HTML Miniifier 실험과 완벽한 고통에서 모든 정보를 찾을 수 있습니다.
결론
CSS 및 JavaScript를 압축하는 것만 큼 일반적이지는 않지만 HTML 압축은 Google의 Pagespeed Insights 권장 사항의 일부입니다. 가치가 있는지 여부는 여전히 열린 질문입니다.
이 기사에서는 많은 HTML 압축 작업을 자동화하여 웹 페이지의 바이트 수를 줄이는 데 도움이되는 세 가지 도구를 나열했습니다.
당신은 어떻습니까? HTML 압축이 좋은 생각이라고 생각하십니까? 가장 좋아하는 HTML 압축 도구는 무엇입니까? HTML 압축 도구에 대한 FAQS
HTML 압축이란 무엇이며 왜 중요한가?
HTML 압축은 기능에 영향을 미치지 않고 HTML 문서에서 불필요하거나 중복 데이터를 삭제하는 프로세스입니다. 여기에는 공간 제거, 라인 브레이크, 댓글 및 블록 분리기가 포함됩니다. HTML 압축의 중요성은 HTML 파일의 크기를 줄여 웹 사이트로드 속도를 높일 수 있다는 것입니다. 더 빠른로드 속도는 사용자 경험을 향상시키고 웹 사이트의 SEO 순위를 향상시킬 수 있습니다.
HTML 압축 도구는 어떻게 작동합니까?
HTML 압축 도구는 웹 사이트의 텍스트 부분을 분석하고 다시 작성하여 전체 파일 크기를 줄입니다. 웹 사이트의 기능을 변경하지 않고 공백, 라인 브레이크 및 주석과 같은 불필요한 문자를 제거합니다. 일부 도구는 또한 CSS 및 JavaScript 압축과 같은 추가 기능과 자동 HTML Tidy를 제공하여 웹 사이트를 더욱 최적화 할 수 있습니다.
최고의 HTML 압축 도구는 무엇입니까?
각각 고유 한 기능을 갖춘 여러 HTML 압축 도구가 있습니다. 가장 인기있는 도구 중 일부에는 HTMLMINIFIER, MINIIFY 및 CLEANCSS가 있습니다. HTMLMINIFIER는 고도로 구성 가능하고 잘 테스트 한 JavaScript 기반 HTML 압축기입니다. Miniify는 여러 클라이언트 성능 규칙을 준수하는 데 도움이되는 PHP5 응용 프로그램입니다. 여러 CSS 또는 JavaScript 파일을 결합하고 불필요한 공간과 주석을 제거하고 GZIP 인코딩 및 최고의 클라이언트 캐시 헤더를 제공합니다. Cleancss는 강력한 CSS Optimizer 및 Formatter입니다.
HTML 압축이 내 웹 사이트 기능에 영향을 미칩니 까?
올바르게 수행되면 HTML 압축이 웹 사이트 기능에 영향을 미치지 않아야합니다. 코드의 기능을 변경하지 않고 불필요한 문자 만 제거합니다. 그러나 압축 후 웹 사이트를 테스트하여 모든 것이 올바르게 작동하는지 확인하는 것이 가장 좋습니다. 일부 도구는 또한 안전한 최적화 만 보장하기 위해 "안전 모드"기능을 제공합니다.
HTML 압축이 일회성 프로세스입니까?
아니요, HTML 압축은 일회성 프로세스가 아닙니다. HTML 파일을 업데이트하거나 변경할 때마다 다시 압축하여 최적화되어야합니다. 일부 도구는 자동 압축을 제공하여 시간과 노력을 절약 할 수 있습니다.
HTML 압축이 SEO를 향상시킬까요?
예, HTML 압축은 웹 사이트의 SEO를 향상시킬 수 있습니다. HTML 파일의 크기를 줄임으로써 압축은 웹 사이트의로드 속도를 높일 수 있습니다. 더 빠른로드 속도는 사용자 경험을 향상시키고 웹 사이트의 SEO 순위를 향상시킬 수 있습니다.
CSS 및 JavaScript 및 HTML을 동시에 압축 할 수 있습니까?
예, 많은 HTML 압축 도구도 CSS 및 JavaScript 압축도 제공합니다. 이를 통해 웹 사이트 코드의 모든 측면을 최적화하여로드 시간과 전반적인 성능을 더욱 향상시킬 수 있습니다.
HTML 압축을 사용하여 파일 크기를 얼마나 줄일 수 있습니까?
파일 크기의 감소량은 원래 HTML 파일의 크기와 그들이 포함하는 불필요한 데이터의 양에 따라 다릅니다. 그러나 일반적으로 파일 크기를 10-20%줄일 것으로 예상 할 수 있습니다.
HTML 압축과 관련된 위험은 무엇입니까?
HTML 압축과 관련된 가장 큰 위험은 프로세스가 올바르게 작동하지 않으면 오류가 발생할 수 있다는 것입니다. 이것이 압축 후 웹 사이트를 항상 테스트하는 것이 가장 좋은 이유입니다. 일부 도구는 또한 안전한 최적화 만 보장하기 위해 "안전 모드"기능을 제공합니다.
모든 웹 사이트에 HTML 압축이 필요합니까?
모든 웹 사이트에 HTML 압축이 엄격하게 필요하지는 않지만 웹 사이트로드 시간 및 성능을 향상시키는 모범 사례입니다. HTML 파일이 큰 웹 사이트에 특히 유리하거나 SEO를 최적화하고자합니다.
위 내용은 이 세 가지 HTML 미니 화 도구로 파일 크기를 자릅니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!