HTML minification 은 한 번 client's 사이트의 모든 버튼을 왼쪽으로 4 픽셀 이동했는데,왜 그런지 알아내는 데 부끄럽게도 오랜 시간이 걸렸습니다. 사용된 탐색 display: inline-block 항목을 나열하고 레이아웃은 공백에 따라 - 우연히도 항상 그렇듯이 - 이루어졌습니다 사이 X-1000 은 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1 </li> 그리고 <li> 태그. HTML 에서 인라인 요소들 사이의 공백의 실행은 대략 4 픽셀 너비의 공백으로 렌더링됩니다. 축소기는 공백을 제거했습니다; 브라우저는 간격을 제거했습니다; 디자인은 이동했습니다. 마크업은 "the same." 픽셀은 그렇지 않았습니다.
그 이야기는 축소판에서 HTML 축소 주제의 전부입니다. 공백이 거의 순수하게 장식적인 CSS 나 자바스크립트와는 달리 HTML 공백은 때로는 렌더링이 중요합니다- 즉,HTML 축소기는 찾기-및-바꾸기보다 더 똑똑해야 하며,당신은 "smaller" 및 "identical"가 발산할 수 있는 서너 곳을 알아야 합니다. 그것들을 올바르게 가져오고 축소하는 것은 공짜 돈입니다: HTML 문서는 브라우저가 받는 가장 첫 번째 리소스이며,다른 것은 없습니다 - CSS 요청도 없고,JS 요청도 없고,이미지 검색도 없습니다 - 도착하고 구문 분석을 시작할 때까지 발생하므로,그것에서 잘라낸 바이트는 중요한 경로의 앞쪽에서 잘라냅니다.
I've 존재하는 모든 컨텍스트에서 HTML 을 축소: 워드 프레스 페이지 캐시 즉석에서 축소 (that's 네 픽셀 버그가 온 곳), 정적 사이트 빌드,라라벨 블레이드 출력,이메일 템플릿,내 자신의 제품에 대한 마케팅 페이지. The Toolz.dev의 HTML 축소기 일회성 사례에 대해 내가 원했던 도구입니다. 붙여넣기, 축소, 완료, 완전히 클라이언트 측, 빌드 시스템이 필요하지 않습니다.
이 가이드에서는 사용 방법, 정확히 제거되는 항목과 살아남아야 하는 항목, 4픽셀 버그 클래스를 유발하는 공백 규칙, HTML 축소가 어디에 위치하는지 다룹니다 핵심 웹 바이탈 전략.
TL;DR: 마크업을 붙여넣으세요 Toolz.dev HTML 미니파이어 댓글을 제거하고 공백을 축소하려면 일반적으로 페이지를 10 – 25% 축소 - 무료,즉시, 브라우저에서 완전히 처리. 두 가지 알아야 할 사항: 의 내용을 보존합니다
<pre>,<textarea>,<script>, 그리고<style>바이트별(코드 샘플을 내부에 보관하세요<pre>), 그리고 공백의 각 실행을 a로 축소하기 때문입니다 싱글 공간을 삭제하는 대신 인라인 블록 요소 사이의 렌더링된 간격이 살아남습니다. 공격적인 축소판을 물어뜯는 4픽셀 레이아웃 버그가 여기서 발생합니다. 페이지의 CSS 및 JS 절반도 축소합니다 CSS 미니파이어 전자를 처리하고 다음을 참조하세요 웹 개발자 툴킷 가이드 전체 파이프라인의 경우.
주요 특징
댓글 제거
HTML 주석은 렌더링 효과가 전혀 없는 순수한 페이로드이며 실제 페이지에는 놀라운 수의 주석이 있습니다. 템플릿 주석, "we might need later" (2021년부터), 빌드 도구 배너, 추적 스니펫 문서 등 모든 항목이 캐시되지 않은 모든 로드의 모든 방문자에게 제공됩니다. 주석을 제거하는 것은 하나의 역사적 각주와 함께 존재하는 가장 안전한 단일 축소 변환입니다: 조건부 주석(<!--[if IE]>) 는 한때 기능적 구문 이었으므로이 도구는 그들을 내버려 둡니다. 그것은 평범한 코멘트를 제거하지만 기본적으로 IE 조건부 블록을 제자리에 유지합니다 - 2026 년에 타겟팅 한 브라우저는 어쨌든 그들을 존중하지 않으므로 보존하는 데 몇 바이트가 걸리고 감사 할 수있는 레거시 마크 업의 동작을 변경할 수있는 기회를 제거합니다.
공백 축소
헤비급 변환. HTML 소스는 파일을 읽는 개발자를 위해 존재하는 들여쓰기와 줄 바꿈으로 가득 차 있으며 HTML 렌더링 규칙에 따라 블록 수준 요소 사이의 공백 실행은 어쨌든 아무것도 표시되지 않도록 축소됩니다. 브라우저는 이미 아름다운 들여쓰기를 무시하고 있었습니다. 파일에서 이를 축소하면 무시된 바이트가 존재하지 않게 됩니다. 뉘앙스는 안전한 축소기와 위험한 축소기를 구분하는 것입니다: 사이 인라인 요소,공백은 단일 공간으로 렌더링되므로 완전히 삭제하는 도구는 내 client's 버튼을 이동시킨 도구입니다. Toolz.dev's minifier 는 무뚝뚝하지만 안전한 규칙으로 트랩을 회피합니다. - 공백의 모든 실행을 제거하는 대신 한 공간으로 축소합니다. 고독한 공간이 아무것도 아닌 것으로 렌더링하는 블록 수준 상자 사이에서 여전히 절감 효과를 얻습니다; 인라인 또는 인라인 블록 요소 사이에서 레이아웃이 기대했던 간격으로 렌더링되므로 아무 것도 이동하지 않습니다. 당신은 공격적인 미니피셔가 블록 태그 사이에서 짜낼 마지막 몇 바이트를 포기하고 그 대가로 4 픽셀 고스트를 결코 쫓지 않습니다.
민감한 요소의 보존
<pre> 문자 그대로 공백을 표시합니다. that's 전체 작업입니다. <textarea> 콘텐츠는 모든 개행이 중요한 사용자 대상 기본 텍스트입니다. <script> 그리고 <style> 블록은 자신의 공백 규칙을 가진 자신의 언어를 가지고 있습니다. 신뢰할 수있는 HTML 축소기는 불투명 영역으로 이들을 취급: 여는 태그와 닫는 태그 사이의 모든 바이트 - 바이트를 통과. 이것은 내가 어떤 축소기를 평가할 때 테스트하는 첫 번째 일입니다 - a 에 코드 샘플을 포함하는 페이지를 붙여 넣습니다 <pre> 들여쓰기를 차단하고 확인합니다. survives.does't 인 경우 해당 도구는 다시는 프로덕션 마크업을 건드리지 않습니다.
내부 태그 정리
태그 사이의 텍스트 너머에는 그 안에 다시 얻을 수 있는 바이트가 있습니다: 축소기는 공백 실행을 축소합니다 사이 단일 공간에 속하며 닫히기 직전에 공백을 삭제합니다 >. 고의적으로 하지 않는 것은 속성 따옴표를 벗기는 것입니다. HTML spec 은 좁은 경우에 인용되지 않은 값을 허용하지만,절약은 바이트 또는 두 개이며,생산 마크업을 디버깅할 때의 가독성 비용은 실제이며,diff 도구는 인용된 속성을 훨씬 더 우아하게 처리합니다. 나는 내 자신의 작업에서 속성 따옴표를 유지하고 I'm 도구가 동의하는 것을 기쁘게 생각합니다 - 보수적인 선택은 위험의 아무것도와 거의 모든 값을 캡처합니다.
크기 보고 전/후
도구는 입력 및 출력 크기를보고,그리고 - 내가 CSS 에 대해 만드는 동일한 인수 - 델타는 진단이다. 일반적인 HTML minification 저장 10–25%: 덜 CSS 보다,때문에 마크업은 비례적으로 적은 공백과 더 많은 내용을 가지고있다. 페이지가 40%를 축소하면,그것은 주석이나 들여쓰기에 익사했다,that's 벌금. 4%를 축소하는 경우,이미 minified 또는 it's 대부분 텍스트 콘텐츠 - 및 콘텐츠 무거운 page's 최적화 예산은 마크업이 아닌 이미지와 글꼴에 속한다. 숫자는 당신이 실제로 성능 작업의 대부분입니다 잘못된 것을 최적화하는 중지합니다.
완전한 클라이언트 측
마크업은 브라우저에서 처리되며 절대 업로드되지 않습니다. HTML 은 프론트 엔드 트리오 중 최소 "secret" - it's 문자 그대로 게시됨 -이지만 사전 릴리스 페이지,내부 관리자 템플릿 및 예고되지 않은 제품 이름이있는 이메일 캠페인은 모두 출시 일 전에 타사 서버를 둘러 봐야하는 HTML 입니다't 클라이언트 측 처리는 질문을 논란의 여지가있게하며 보너스로 업로드 시간 초과없이 큰 문서를 처리합니다.
HTML Minifier 를 사용하는 방법
1단계: 마크업을 받으세요
그것의 근원에서 HTML 을 베끼십시오 - 정체되는 파일,template's 렌더링된 산출,이메일 builder's 수출,또는 준비 페이지에 근원을 보십시오 렌더링 서로 다를 때 템플릿을 통해 출력: 템플릿 언어가 HTML 이 아니기 때문에 Blade 또는 JSX 템플릿 파일을 직접 축소하면 템플릿 구문이 망가집니다. 먼저 렌더링하고 결과를 축소합니다.
2단계: 축소기에 붙여넣습니다
열다 HTML 미니파이어 그리고 붙여넣기. 출력이 즉시 나타납니다. 문서가 잘못된 형식인 경우 - 닫히지 않은 태그, 잘못 중첩된 요소 - 축소하면 기형을 수정하는 대신 보존할 수 있습니다; 축소기는 유효성 검사기가 아니며 가비지는 더 작게 가비지 아웃 상태로 유지됩니다.
3단계: 보호 지역을 확인하세요
발송하기 전에, 당신의 산출을 검사하십시오 <pre> 블록,텍스트 영역,인라인 스크립트,그리고 그들이 온전한 통해 온 것을 확인. 삼십초. HTML 은 일부 지역은 공백-신성하고 다른 사람은 aren't 세 가지 중 유일한 것이기 때문에,이것은 CSS 와 JS 축소 don't 필요 HTML 특정 단계입니다.
4단계: 렌더링을 확인합니다
축소된 버전을 불러오고 살펴보세요 - 특히 탐색 메뉴,버튼 행,태그 목록,나란히 앉아 있는 인라인 또는 인라인 블록 요소에서 빌드된 모든 항목에서 볼 수 있습니다. 공백 종속 레이아웃이 숨겨져 있는 That's 간격이 변경된 경우 내구성 있는 수정 사항은 축소기가 아닌 CSS 에 있습니다: 구성 요소를 flexbox 로 전환합니다 gap간격을 명백하게 하고 마크업 공백에 영원히 면역이 되는. minifier did't 는 당신의 배치를 끊습니다; 그것은 배치가 사고에 짐 방위 이었다는 것을 계시했습니다.
5단계: 소스를 배포하고 유지합니다
축소된 파일을 발송하십시오; 읽을 수 있는 소스를 편집하는 것으로 유지하십시오. 모든 빌드 아티팩트와 동일한 단방향 규칙. 모든 종류의 빌드 단계 또는 캐싱 레이어가 있는 사이트의 경우 이 수동 프로세스를 파이프라인으로 승격하여 자동으로 수행됩니다. 브라우저 도구는 don't가 있는 사이트와 다른 사람's 파이프라인의 작업을 검사하기 위한 것입니다.
기술 심층 분석: HTML 공백은 다른 공백과 다릅니다
HTML을 자신있게 축소하려면 하나의 정신 모델이 필요합니다: 브라우저가 정상적인 흐름에서 공백을 처리하는 방법. 모든 브라우저가 구현하는 HTML 렌더링 동작에서 압축된 규칙:
- 공백 문자(공백, 탭, 개행) 실행이 단일 공백으로 축소됩니다.
- 그 단 하나의 공간 렌더링 인라인 수준의 콘텐츠 사이에 위치할 때 - 텍스트,
<a>,<span>,<img>, 무엇이든display: inline또는inline-block. - 블록 레벨 상자 사이에서 공간은 눈에 보이는 것을 생성하지 않습니다.
- 내부
white-space: pre컨텍스트(<pre>또는 그런 스타일의 요소) 위의 어느 것도 적용되지 않습니다. 공백은 문자 그대로입니다.
규칙 2 는 HTML 축소의 전체 위험 표면입니다. <li>A</li> <li>B</li> 그리고 <li>A</li><li>B</li> 목록 항목이 블록 수준일 때 동일하게 렌더링하고 they're 인라인 블록일 때 하나의 4-ish-픽셀 공간만큼 다릅니다. 마크업 차이는 "just whitespace"; 렌더링 차이가 실제입니다. 이는 고전적인 인라인 블록 레이아웃 해킹이 존재했던 이유(상위 글꼴 크기 0, 음수 여백, 태그 간 주석)와 flexbox's인 이유이기도 합니다 gap 속성은 전체 장르를 끝냈다: 그것은 마크 업의 사고에서 명시적 스타일로 간격을 이동했다. minification 레이아웃을 변경하면 올바른 반응은 감사입니다 - 그것은 결국 어쨌든 당신을 물었을 취약성을 발견,아마도 더 나쁜 시간에 CMS 마이그레이션하는 동안.
HTML's 적당한 퍼센트가 주어졌을 때 왜 문서를 전혀 축소합니까? 폭포에 위치. HTML 문서는 요청 번호 1; 그것의 바이트 게이트 모든- 파서는 그것을 읽음으로써 스타일시트,스크립트 및 프리로드를 발견합니다. Time to First Byte plus document download and parse sit upstream of First Contentful Paint and Largest Contentful Paint,the Core Web Vitals 메트릭. There's a compounding 미묘함도: 브라우저는 패킷이 도착함에 따라 부분 문서에 대한 추측 구문 분석을 시작하므로 더 적은 수의 TCP 왕복 여행에 맞는 문서를 사용하면 리소스 검색을 더 빨리 시작할 수 있습니다. 60KB 문서에서 15KB 를 트리밍하는 것은 이미지를 트리밍하는 것보다 절대 절약이 적지만 대기 시간이 병렬화되는 대신 컴파운드되는 라인 전면에 저장됩니다.
축소 대 압축, HTML 버전. CSS 와 같은 관계: gzip 과 Brotli 는 전송을 축소하지만 브라우저는 모든 원본 바이트를 압축 해제하고 구문 분석합니다. 댓글과 공백은 매우 잘 압축됩니다 - 이것이 바로 they're 배송 비용이 저렴하고 여전히 삭제할 가치가있는 이유입니다. 삭제가 구문 분석 비용과 압축 사전의 점유율을 제거하는 유일한 것이기 때문입니다. 둘 다,항상 둘 다.
동적 사이트 버전. 워드프레스 캐싱 플러그인,Cloudflare's 자동 축소 (은퇴 전), 프레임워크 미들웨어 모두 HTML 축소 응답 시간에 빌드 시간이 아니라. 동일한 변환,동일한 위험,그리고 새로운 것: 온더플라이 미니파이어가 페이지 빌더's 마크업,타사 임베드,인라인 JSON-LD 블록을 만나고,사이트의 모든 페이지에서 한 번에 하나씩 확인 습관으로 그 기능들을 롤아웃합니다. 4 단계의 확인 습관으로,한 번에 하나의 템플릿을 어떻게 아는지 물어보세요.
마크업, 스타일, 스크립트, 이미지 등 더 광범위한 최적화 시퀀스의 경우 SEO 이미지 최적화 가이드 가장 무거운 층을 커버하고, 솔직히, 당신이 & # 39;re 분류하는 경우 마크 업 전에 이미지를 할. 그만큼 CSS 축소기 가이드 이 것의 동반자입니다: CSS 공백이 거의 렌더링되지 않기 때문에 안전 규칙이 더 간단한 스타일시트에 적용되는 동일한 분야입니다.
일반적인 사용 사례
정적 사이트 및 랜딩 페이지
손으로 만든 방문 페이지,문서 사이트,정적 마케팅 페이지는 완벽한 축소 후보입니다: 자동으로 수행할 수 있는 빌드 시스템이 없고,거의 변경되지 않는 마크업,캐시되지 않은 모든 바이트 수를 계산하게 하는 트래픽에 대한 나의 루틴은 렌더링,축소, 배포입니다. 브라우저 도구는 프로젝트가 정당화하기에는 너무 작은 파이프라인을 대체합니다. 방문 페이지는 또한 FCP 가 가장 상업적으로 중요한 부분이기도 합니다; 머물지 여부를 결정하는 방문자는 중요한 경로를 응시하고 있습니다.
이메일 템플릿
HTML 이메일은 minification 이 직접 돈을 벌 수있는 곳입니다: Gmail 은 102 KB 보다 큰 메시지를 클립,이메일의 하단을 숨김 - 포함,일반적으로, 당신의 구독 취소 링크 및 바닥 글 - 뒤에 "전체 메시지보기" 링크 거의 아무도 클릭하지. 이메일 템플릿은 자연에 의해 부풀어 (중첩 테이블,인라인 스타일,클라이언트 해결의 이십년), 그래서 20% 감소는 클립과하지 사이의 차이가 될 수 있습니다. 이메일 클라이언트 파서는 비표준 행동의 박물관이기 때문에 보내기 전에 모든 캠페인을 축소하고,나중에 미리보기 도구에서 테스트합니다.
워드 프레스 출력 최적화
당신이 워드 프레스를 실행하는 경우, HTML 축소는 일반적으로 손으로보다는 캐싱 또는 최적화 플러그인을 통해 도착 - 하지만 브라우저 도구는 당신이 방법입니다 감사 플러그인이 실제로 한 일. 캐시 된 페이지에서 소스를보고 미니 피어를 통해 붙여 넣기하고 there & # 39;s 저장해야 할 모든 것을 남겨 두는지 확인하십시오; 종종 보수적으로 구성된 플러그인은 테이블에 댓글과 공백을 남깁니다. 내 플러그인 개발 년에서 I & # 39;ll 은 공급 업체 측 메모를 추가합니다: 개발자,don & # 39;t 는 댓글 아웃 실험으로 가득 찬 템플릿을 발송합니다. 귀하의 의견은 평균적으로 미니 화 플러그인이 잘못 구성된 십만 사이트의 소스에 끝납니다.
임베디드 위젯 및 스니펫 페이로드
당신이 embeddable 위젯을 발송하는 경우에,당신의 대본에 의해 주사된 HTML 조각은 모든 embedding 위치의 각 방문자에 의해 다운로드된다 - 당신의 바이트,proxited someone else's 소통량. 조각 마크업을 극소화하는 (및 자산을 능률적으로 부호화; 그만큼 Base64 변환기 작은 이미지를 인라인 할 때 도움) 정중한 제 3 자가되는 테이블 말뚝입니다. 같은 논리는 CMS 블록 템플릿,브라우저 확장 콘텐츠,그리고 당신이 don't 소유 페이지에 주입 아무것도 커버.
반전: 축소된 마크업 읽기
모든 축소자와 마찬가지로 이 one's 역사용은 조용히 가장 빈번합니다: 다른 사람을 만들기's 축소된 페이지를 읽을 수 있게 합니다. 임베드 충돌을 디버깅하거나 "how does this site structure its schema markup," 소스 보기 hands you a single 300 KB line. 그것을 아름답게 하고,읽고, 답을 찾으세요. 댓글은 영원히 사라집니다 - minification is lossy for comments by design - 그러나 구조는 한 번의 클릭으로 다시 돌아오고,페이지의 두 버전을 비교할 때,the 텍스트 차이 도구 아름답게 표시된 마크업에서는 배포 간에 변경된 사항을 정확하게 보여줍니다.
HTML 최소화 제거 대 보존
| 요소/지역 | 도구가 하는 일 | 왜 |
|---|---|---|
평범한 댓글 <!-- --> |
제거되었습니다 | 렌더링 효과 제로; 순수한 페이로드 |
| 블록 요소 사이의 공백 | 한 칸으로 무너져내린 | 어쨌든 블록 사이에 아무것도 아닌 것으로 렌더링합니다 |
| 인라인/인라인-블록 요소 사이의 공백 | 한 칸으로 접혀진 (보관된) | 갭으로 렌더링 - 그래서 it's는 삭제되지 않고 보존됩니다 |
<pre> 그리고 <textarea> 콘텐츠 |
그대로 보존됨 | 화이트스페이스는 콘텐츠입니다 |
<script> 그리고 <style> 블록 |
그대로 보존됨 (별도로 축소) | 다른 언어, 다른 규칙 |
| 속성 따옴표 | 보관됨 | 삭제하는 것은 특별하지만 이 도구는 절대 삭제하지 않습니다 |
조건부 의견 <!--[if IE]> |
기본적으로 보존됩니다 | 레거시 마크업을 위한 저렴한 안전성 |
머리로이 테이블을 인쇄 하 고 HTML minification 무서운 중지: 행은 "always safe to strip"로 깨끗 하 게 분할 하 고 "는 그대로 보존 해야 합니다, " 그리고 흥미로운 엔지니어링은 인라인-공백 행에 살고, 여기서이 tool's 붕괴-에-하나-공간 규칙은 문제에서 당신을 유지 합니다. 그 행을 바로 얻을 도구-그리고 Toolz.dev HTML 미니파이어 는 - 전체적인 가동을 일과에 만드도록 건축됩니다. 이 단계를 포위하는 모두를 위해, the 코딩 도구 가이드 이웃을 덮는다.
자주 묻는 질문
HTML 축소기는 무엇을 합니까?
HTML 축소자는 브라우저가 doesn't 당신의 페이지를 렌더링할 필요가 있는 바이트를 제거합니다: 주석,태그 사이의 중복 공백,및 이동식 속성 따옴표와 같은 선택적 구문. 일반적인 페이지는 10–25%를 축소합니다. 올바르게 완료 it's 렌더링-보존 - 페이지는 동일하게 보이고 동작합니다 - 문서가 더 빠르게 다운로드되고 구문 분석되는 동안 HTML 은 모든 페이지 로드's 중요 경로의 첫 번째 리소스이기 때문에 중요합니다.
HTML을 축소하면 페이지 레이아웃이 깨질 수 있나요?
한 가지 구체적인 경우에는 그렇습니다: 레이아웃을 사용합니다 inline-block 요소는 태그 사이의 공백에 따라 달라질 수 있으며,이는 대략 한 문자의 너비를 보이는 공간으로 렌더링합니다. 이를 제거하면 이러한 간격이 닫히고 레이아웃이 이동합니다. 좋은 축소기는 인라인 컨텍스트를 보수적으로 처리하지만 견고한 수정 사항은 CSS 에 있습니다. flexbox 를 사용하여 gap 속성이므로 간격은 마크업 공백에 전혀 의존하지 않습니다.
HTML 축소가 pre 또는 textarea 태그 내부의 콘텐츠에 영향을 줍니까?
올바른 축소자는 해당 영역을 바이트당 바이트로 보존해서는 안 됩니다. <pre> 공백을 문자 그대로 렌더링합니다. 축소하면 코드 샘플과 ASCII 형식이 파괴됩니다 <textarea> 콘텐츠는 사용자가 볼 수 있는 기본 텍스트입니다. 이 보존은 모든 HTML 축소기에 대한 가장 빠른 품질 테스트입니다: 들여쓰기된 코드 블록이 있는 페이지를 실행하고 들여쓰기가 남아 있는지 확인하세요.
gzip 이 활성화되어 있다면 HTML minification 은 가치가 있습니까?
예. 압축은 전송을 축소하지만 브라우저는 원래 바이트로 압축을 풀고 코멘트와 공백이 포함된 모든 바이트를 구문 분석합니다. 축소된 바이트는 다운로드되지 않으며 구문 분석되지도 않습니다. HTML 문서는 페이지의 다른 모든 리소스를 검색하기 때문에 여기의 절약은 중요한 경로의 맨 앞에 위치하며 병렬화되지 않고 합성됩니다.
HTML을 축소하는 것이 SEO에 도움이 됩니까?
간접적으로,속도를 통해. 작은 문서는 First Contentful Paint 와 같은 첫 번째 렌더링 시간 측정 항목을 개선하고 가장 큰 Contentful Paint 에 기여하며 Core Web Vitals 는 Google's 페이지 경험 신호의 일부입니다. Minification won't 는 자체적으로 느린 사이트를 구출하고 Google 은 색인 생성을 위해 minified 및 unminified 마크업을 동일하게 읽습니다 - 이점은 순전히 성능 향상이며 이는 실제이지만 비례적입니다.
Gmail 클리핑을 방지하기 위해 이메일용 HTML을 어떻게 축소합니까?
Gmail 은 " 뒤에 접힌 부분 아래에 모든 것을 숨기는 102 KB 보다 큰 메시지를 클립합니다;전체 메시지보기" 링크 - 종종 바닥 글과 구독 취소 링크를 포함합니다. 를 통해 템플릿을 실행하십시오 HTML 미니파이어 보내기 전에; 테이블이 많은 이메일 마크업은 일상적으로 15 – 25% 를 축소하며, 이는 종종 클립과 완료의 차이입니다. 이메일 클라이언트 파서는 악명 높기 때문에 항상 이메일 미리보기 도구에서 축소 된 버전을 테스트하십시오.
다른 사람을 읽기 위해 HTML 을 unminify 할 수 있습니까's 페이지 소스?
예 - beautifying 는 반대로 실행되는 동일한 도구 범주이며,it's 틀림없이 더 일반적인 일상 사용. 축소 된 페이지 소스를 붙여 넣기하고 디버깅 임베드에 대한 들여 쓰기,읽기 가능한 마크 업을 다시 얻을,다른 site's 구조화 된 데이터를 연구,또는 캐싱 플러그인이 실제로 발송 무엇을 검토. 하나의 영구적 인 손실: 축소하는 동안 벗겨 코멘트는 사라지고 재구성 할 수 없습니다.
게시되지 않은 페이지를 온라인 HTML 축소기에 붙여넣는 것이 안전합니까?
클라이언트 측으로, 그렇습니다. 그만큼 Toolz.dev HTML 미니파이어 브라우저에서 마크업을 완전히 처리합니다 - 아무것도 업로드,로그 또는 저장되지 않으며 네트워크 탭에서 확인할 수 있습니다. 이는 사전 실행 페이지,내부 템플릿 및 예고되지 않은 제품 세부 정보가 포함된 이메일 캠페인에 중요합니다. thou should't visit third-party servers before you publish them yourself.
