O tem orodju
Minifikacija HTML odstrani nepotrebne znake iz vira spletne strani – presledke med oznakami, komentarje, odvečne narekovaje, izbirne zaključne oznake – za zmanjšanje velikosti datoteke brez spreminjanja načina upodabljanja strani. Prihranki so skromni na stran (običajno 10–30 %), vendar so povezani s številnimi zahtevami, zlasti za statična spletna mesta ali strani, ki se prikazujejo brez dinamičnega stiskanja.
Ta minifikator odstrani presledke med elementi na ravni bloka, strne nize presledkov znotraj nepomembnega besedila, odstrani komentarje HTML (razen pogojnih komentarjev IE), odstrani odvečne narekovaje atributov, kjer to dovoljuje specifikacija HTML5, in odstrani izbirne zaključne oznake (</p>, </li>), kjer specifikacija dovoljuje. Rezultat se v vsakem brskalniku upodobi enako kot vir.
Minifikacija je najbolj uporabna, če je povezana s stiskanjem gzip ali Brotli na ravni strežnika. Stiskanje že odstrani velik del prihrankov, ki jih ustvari zmanjševanje, vendar oboje skupaj še vedno premaga samo stiskanje – zlasti za mesta z velikim prometom, kjer so stroški pasovne širine pomembni.
Zakaj zmanjšati HTML
Manjši HTML se naloži hitreje, zlasti pri počasnejših povezavah in mobilnih omrežjih. Teža strani neposredno vpliva na osnovne spletne kazalnike – Largest Contentful Paint in Time to First Byte se izboljšata, ko strežnik vrne manj HTML-ja za razčlenjevanje. Za spletna mesta, kjer je uvrstitev SEO odvisna od rezultatov Core Web Vitals, je minifikacija merljiva izboljšava.
Minificirani HTML prav tako zmanjša stroške pasovne širine v velikem obsegu. Spletno mesto, ki streže milijon strani na dan z 10 KB prihranka na stran, prihrani 10 GB izhoda dnevno. Vplivne spojine za statična spletna mesta, ki jih strežejo CDN-ji, ki obračunavajo s prenosom podatkov.
Tehnične podrobnosti
Minifier obdeluje HTML žeton za žetonom. Prazen prostor med elementi na ravni bloka (<div>, <p>, <ul>) je odstranjen, ker ne vpliva na upodabljanje. Prazen prostor znotraj vgrajenih kontekstov (<span>, <a>, besedilna vsebina) se ohrani, ker lahko vpliva na upodabljanje.
Komentarji so privzeto odstranjeni, vendar se pogojni komentarji (<!--[if IE]>) ohranijo. Narekovaji atributov so odstranjeni, kjer to omogoča razčlenjevalnik HTML5 – enobesedne vrednosti atributov brez presledkov ali posebnih znakov lahko izpustijo narekovaje.
Izbirne zaključne oznake so izključene v skladu s specifikacijo HTML5: </p>, </li>, </td> in nekaj drugih je mogoče izpustiti, če jim sledijo sorodne oznake, ki pomenijo njihovo zapiranje. To je nenavadno za branje, vendar veljaven HTML5, ki ga brskalniki enako razčlenijo.
Pogosta vprašanja
- Kaj odstrani minifikacija HTML?
- Nepotreben presledek med oznakami, komentarji HTML (<!-- -->), neobveznimi zapiralnimi oznakami (</li>, </p>, </td>), privzetimi vrednostmi atributov (type="text" pri vnosih) in logičnimi vrednostmi atributov (disabled="disabled" → onemogočeno).
- Ali lahko pomanjševanje pokvari mojo stran?
- Redko, a možno, če se vaš CSS zanaša na presledke med elementi v vrstici ali če JavaScript uporablja primerjave innerHTML. Vedno preizkusite pomanjšani izhod. Orodje privzeto uporablja konzervativne nastavitve.
- Ali naj zmanjšam HTML, če uporabljam ogrodje, kot je Next.js?
- Večina sodobnih ogrodij (Next.js, Nuxt, Angular) samodejno zmanjša HTML v produkcijskih zgradbah. To orodje je uporabno za statične datoteke HTML, e-poštne predloge in projekte brez sistema gradnje.
- Ali to zmanjšuje tudi vgrajeni CSS in JavaScript?
- To orodje se osredotoča na strukturo HTML. Vsebina <style> in <script> v vrstici je ohranjena, kakršna je. Za te uporabite namenske minifikatorje CSS in JavaScript za optimalne rezultate.
- Ali je izbirne zaključne oznake varno odstraniti?
- Da po specifikaciji HTML5, čeprav je rezultat težje berljiv. Nekatere ekipe onemogočijo to transformacijo zaradi jasnosti in sprejmejo majhno kazen velikosti.
- Ali je moj HTML naložen na strežnik?
- Ne. Minifikator se izvaja v vašem brskalniku.
- Kakšno je to v primerjavi s html-minifier-terser?
- html-minifier-terser je kanonični minifier HTML Node.js in daje nekoliko bolj agresivne rezultate. To orodje pokriva enake transformacije za uporabo na strani brskalnika brez nastavitve gradnje.
- Ali naj zmanjšam vedno ali selektivno?
- Vedno za proizvodnjo. Nikoli za izvorno kodo v nadzoru različic; berljiv HTML v viru je bistvenega pomena za vzdrževanje.