Ghid pentru Formatator de cod
Ce elimină și ce păstrează Formatator de cod de la XGM când minifică HTML, CSS și JavaScript sau formatează XML, plus spațiile care pot schimba un layout.
Ce face minificarea HTML
HTML-ul scris de oameni și de șabloane conține indentare, treceri la rând nou și comentarii de care browserele nu au nevoie. Minificarea le elimină pentru a reduce numărul de octeți trimiși prin rețea. Structura și conținutul paginii rămân aceleași. Singurul lucru care dispare este formatarea care ținea codul lizibil pentru ochiul omenesc; etichetele, atributele și textul văzut de vizitator rămân neatinse. Arborele DOM construit de browser la analiza documentului este și el identic, așa că scripturile și regulile de stil lucrează mai departe cu aceeași structură.
<!-- product card -->
<div class="card">
<h2> Shoes </h2>
<p>
Size 42
</p>
</div>
<div class="card"><h2> Shoes </h2><p> Size 42 </p></div>Cum minificați HTML cu Formatator de cod
- Deschideți Formatator de cod și lipiți HTML-ul dumneavoastră.
- Citiți ieșirea minificată și economia de dimensiune.
- Copiați rezultatul sau descărcați-l pentru build-ul ori șablonul dumneavoastră.
- Deschideți pagina cu HTML-ul minificat și verificați că layoutul arată la fel.
Apăsați Încarcă exemplu ca să vedeți o pagină mică, cu un comentariu, cu indentare și cu un bloc pre, care arată ce se elimină și ce se păstrează.
Minificarea rulează în browserul dumneavoastră. Pentru site-urile de producție, minificați ca parte din procesul de build, astfel încât fiecare publicare să fie minificată automat. Folosiți acest instrument pentru fragmente ocazionale, pentru șabloane de e-mail sau ca să vedeți ce ar schimba un minificator. Fiind un pas manual, el ajută mai ales în faza de verificare și de experimentare, nu în fluxul obișnuit de livrare.
Formatarea și minificarea XML
Modul XML al instrumentului Formatator de cod analizează intrarea cu parserul XML al browserului, așa că documentele greșit formate sunt raportate cu mesajul de eroare al parserului, în loc să fie reformatate în tăcere. Formatează indentează elementele cu două sau patru spații pe nivel; Minifică elimină spațiile dintre elemente și renunță la comentarii. Secțiunile CDATA și instrucțiunile de procesare, precum declarația XML, sunt păstrate.
La formatare, textul din interiorul elementelor este curățat de spațiile de la început și de la final. Asta este sigur pentru fișiere de configurare și pentru fluxuri precum rapoartele agregate DMARC, dar nu și pentru formatele XML în care spațiile dinaintea textului au un sens; pentru acelea păstrați documentul original. Ca și minificatoarele, modul XML rulează în întregime în browserul dumneavoastră, iar documentul nu ajunge pe niciun server. Instrumentul verifică doar dacă documentul este bine format; nu îl validează față de un DTD sau de o schemă XSD.
Minificare față de compresie
Serverele web și rețelele CDN comprimă răspunsurile text cu gzip sau Brotli, ceea ce elimină foarte eficient tiparele repetate, inclusiv cea mai mare parte a spațiilor pe care le-ar scoate minificarea. Economia suplimentară obținută prin minificarea unui HTML deja comprimat este de obicei modestă. Minificarea tot ajută puțin și ajută vizibil mai mult pentru paginile care nu sunt comprimate deloc, precum unele mesaje HTML de e-mail. De aceea este mai potrivit să priviți minificarea ca pe o îmbunătățire mică adăugată peste compresie, nu ca pe un înlocuitor al ei.
| Versiune | Dimensiune relativă |
|---|---|
| HTML original | 100% |
| Minificat | Aproximativ 80–90% |
| Original, comprimat cu gzip | Aproximativ 20–25% |
| Minificat și comprimat | Puțin mai puțin decât doar comprimat |
Verificați dacă pe site-ul dumneavoastră compresia este activă: răspunsul ar trebui să conțină Content-Encoding: gzip sau br. Verificare antete HTTP listează toate antetele de răspuns, inclusiv pe acesta. Dacă antetul lipsește cu totul, activarea compresiei în configurația serverului aduce mult mai mulți octeți economisiți decât minificarea HTML-ului.
gzip on;
gzip_types text/html text/css application/javascript application/json image/svg+xml;
gzip_min_length 1024;Când contează spațiile
La randare, HTML restrânge șirurile de spații la unul singur, dar nu le elimină întotdeauna. Un spațiu dintre două elemente inline, precum două legături sau o etichetă și un câmp de intrare, se vede pe ecran. Eliminarea spațiilor dintre etichete poate lipi cuvintele unul de altul sau poate șterge micile distanțe dintre butoane. Diferența este adesea de câțiva pixeli, dar sare în ochi la legături așezate una lângă alta sau la insigne.
| Marcaj | Risc |
|---|---|
<a>Home</a> <a>About</a> | Legăturile se pot lipi când spațiul dintre etichete dispare |
| Butoane inline-block separate prin treceri la rând nou | Mica distanță dintre ele dispare |
<pre> și <textarea> | Păstrate de minificator; minificatoarele scrise de mână le strică des |
<script> inline cu șabloane de șir | Păstrat de minificator; spațiul din interiorul șirurilor are un sens |
| Noduri de text cu spații duble puse intenționat | Restrânse la un singur spațiu (browserele arată oricum unul, în afară de pre) |
Minificatorul restrânge agresiv spațiile dintre etichete, tocmai de aceea contează verificarea vizuală. Dacă o distanță dispare, adăugați spațierea în CSS, de exemplu cu gap sau cu margini, în loc să vă bazați pe spațiile din marcaj. Asta face layoutul mai previzibil și ajută aceeași componentă să arate corect și atunci când este folosită în alt șablon.
Minificarea într-un flux de build
Păstrați HTML lizibil în fișierele sursă și în șabloane și minificați doar rezultatul care ajunge publicat. Editarea manuală a HTML-ului minificat duce ușor la greșeli, iar diferențele dintre fișiere minificate sunt ilizibile la revizuirea codului. Majoritatea generatoarelor de site-uri statice și a framework-urilor au un pas sau un plugin de minificare care rulează la build-ul de producție. Astfel minificarea devine un pas automat pe care nimeni nu îl poate uita, iar istoricul din control de versiuni rămâne plin de fișiere sursă lizibile.
- Scrieți și revizuiți șabloanele într-o formă lizibilă.
- Construiți site-ul; minificatorul rulează pe fișierele HTML generate.
- Rulați testele vizuale sau end-to-end pe ieșirea minificată, nu doar pe build-urile de dezvoltare.
- Publicați și confirmați antetele de compresie pe site-ul live.
- Păstrați source map-urile sau artefactul de build neminificat, pentru depanare la nevoie.
Aplicațiile randate pe server pot minifica răspunsurile într-un middleware, dar asta costă timp de procesor la fiecare cerere. Punerea în cache a ieșirii randate și minificate sau minificarea șabloanelor la build evită repetarea aceleiași munci. Sub trafic mare, diferența aceasta poate conta mult mai mult decât cele câteva sute de octeți economisiți.
HTML-ul de e-mail este un caz aparte. Mulți clienți de e-mail au ciudățenii proprii de randare, iar unii taie mesajele peste o anumită dimensiune, așa că minificarea poate împiedica trunchierea unui buletin lung. Testați versiunea minificată în clienții pe care îi folosesc chiar destinatarii dumneavoastră înainte de a trimite.
Ce nu schimbă minificatorul
Minificatorul XGM este conservator în mod deliberat. Nu elimină etichetele de închidere opționale, ghilimelele atributelor sau valorile implicite ale atributelor și nu rescrie CSS-ul ori JavaScript-ul inline. Aceste optimizări mai agresive economisesc câțiva octeți în plus, dar sunt și cele mai predispuse să strice un marcaj neobișnuit ori uneltele care analizează HTML-ul mai târziu. Siguranța că ieșirea este analizată la fel ca intrarea valorează mai mult decât încă o sută de octeți câștigați.
Dacă aveți nevoie de o minificare mai agresivă, folosiți o unealtă de build dedicată, cu o suită de teste pentru paginile dumneavoastră. Pentru verificări rapide, fragmente și șabloane, minificarea conservatoare menține riscul scăzut și elimină totuși cea mai mare parte a risipei. Instrumentul nu redenumește identificatori, nu unește reguli și nu scoate codul nefolosit; pentru asta aveți nevoie de un bundler.
CSS, JavaScript și unelte de build
Modul CSS și modul JavaScript tratează foile de stil și scripturile la fel: elimină comentariile și spațiile, dar nu redenumesc variabile și nu restructurează codul. Uneltele de build folosite de framework-uri merg de obicei mai departe, cu eliminarea codului mort și scurtarea numelor pentru JavaScript. Ambele moduri arată dimensiunea intrării și a ieșirii în octeți UTF-8, așa că vedeți imediat dacă economia merită măsurată.
Pentru un site precum https://www.example.com, ordinea impactului este de obicei aceasta: comprimați răspunsurile, puneți în cache resursele statice cu durate lungi, optimizați imaginile, reduceți JavaScript-ul și abia apoi minificați HTML-ul. Minificarea este ușoară, dar rareori este cel mai mare câștig de performanță.
Întrebări frecvente
HTML-ul minificat se afișează diferit?
Nu ar trebui, dar eliminarea spațiilor dintre elementele inline poate schimba mici distanțe sau poate lipi cuvinte. Verificați vizual rezultatul.
Sunt eliminate comentariile condiționale?
Nu. Comentariile care încep cu <!--[if sunt păstrate, pentru că au un sens pentru unii clienți de e-mail și pentru browserele vechi.
Se modifică conținutul script și style?
Nu. Conținutul blocurilor script și style, ca și cel din pre și textarea, este păstrat exact.
Cât economisește minificarea?
Adesea între 10 și 20 la sută din HTML-ul necomprimat. Cu gzip sau Brotli activat, economia suplimentară este mai mică.
Ar trebui să minific e-mailurile HTML?
Cu grijă. Unii clienți de e-mail au limite de dimensiune și minificarea ajută, dar testați în clienții care vă interesează, pentru că randarea e-mailului este sensibilă la schimbările de marcaj.
Se încarcă HTML-ul meu undeva?
Nu. Minificarea rulează în browserul dumneavoastră.
Ajută minificarea la SEO?
Cel mult indirect, prin pagini puțin mai rapide. Conținutul, structura și performanța generală contează mult mai mult.
Pot inversa minificarea?
Uneltele de formatare pot reindenta HTML-ul, dar comentariile eliminate sunt pierdute. Păstrați sursa originală și minificați în timpul build-ului.
Ar trebui să minific HTML pe un site care folosește un CDN?
Da, dacă face parte din build-ul dumneavoastră. Rețelele CDN comprimă răspunsurile, dar o intrare minificată produce totuși o ieșire comprimată puțin mai mică și o analiză puțin mai rapidă.
Elimină minificarea doctype-ul sau etichetele html?
Nu. Se elimină doar comentariile și spațiile. Structura documentului, atributele și conținutul text rămân așa cum sunt.
De ce mi s-a schimbat SVG-ul inline?
Spațiul dintre etichetele SVG este restrâns ca la orice alt marcaj. Textul din elementele SVG <text> poate pierde spațierea pusă intenționat; verificați astfel de grafice după minificare.