Apie šį įrankį
HTML sumažinimas pašalina nereikalingus simbolius iš tinklalapio šaltinio – tarpų tarp žymų, komentarų, perteklinių kabučių, pasirenkamų uždarymo žymų – kad sumažintų failo dydį nekeičiant puslapio atvaizdavimo. Sutaupoma nedidelė viename puslapyje (paprastai 10–30 %), tačiau sutaupoma daug užklausų, ypač statinėse svetainėse arba puslapiuose, teikiamuose be dinaminio glaudinimo.
Šis sumažintuvas pašalina tarpą tarp bloko lygio elementų, sutraukia tarpą nereikšmingame tekste, pašalina HTML komentarus (išskyrus IE sąlyginius komentarus), pašalina perteklines atributų kabutes, jei tai leidžia HTML5 specifikacijos, ir pašalina pasirenkamas uždarymo žymas (</p>, </li>), jei tai leidžia specifikacijos. Rezultatas pateikiamas identiškai šaltiniui kiekvienoje naršyklėje.
Sumažinimas yra naudingiausias, kai serverio lygiu suporuojamas su gzip arba Brotli glaudinimu. Suspaudimas jau pašalina daug sutaupymų sumažinimo, tačiau abu kartu vis tiek pranoksta vien tik suspaudimą – ypač didelio srauto svetainėse, kur svarbios pralaidumo išlaidos.
Kodėl reikia sumažinti HTML
Mažesnis HTML įkeliamas greičiau, ypač naudojant lėtesnius ryšius ir mobiliojo ryšio tinklus. Puslapio svoris tiesiogiai veikia pagrindinius žiniatinklio gyvybinius rodiklius – tiek didžiausias turinio dažymas, tiek laikas iki pirmojo baito pagerėja, kai serveris grąžina mažiau HTML analizuoti. Svetainėse, kuriose SEO reitingas priklauso nuo Core Web Vitals balų, sumažinimas yra išmatuojamas patobulinimas.
Sumažintas HTML taip pat sumažina pralaidumo sąnaudas. Svetainė, aptarnaujanti milijoną puslapių per dieną ir sutaupanti 10 KB kiekviename puslapyje, kasdien sutaupo 10 GB išėjimo. Statinių svetainių poveikio junginiai, aptarnaujami iš CDN, kurie atsiskaito perduodant duomenis.
Techninės detalės
Minifikatorius apdoroja HTML prieigos raktą po to. Tarpai tarp bloko lygio elementų (<div>, <p>, <ul>) pašalinami, nes tai neturi įtakos atvaizdavimui. Tarpas įterptųjų kontekstų viduje (<span>, <a>, teksto turinys) išsaugomas, nes gali turėti įtakos atvaizdavimui.
Pagal numatytuosius nustatymus komentarai pašalinami, tačiau sąlyginiai komentarai (<!--[jei IE]>) išsaugomi. Atributų kabutės pašalinamos ten, kur leidžia HTML5 analizatorius – vieno žodžio atributų vertės be tarpų ar specialiųjų simbolių gali praleisti kabutes.
Pasirenkamos uždarymo žymos pašalinamos pagal HTML5 specifikacijas: </p>, </li>, </td>, o kai kurios kitos gali būti praleistos, kai po jų yra brolis ir sesuo, nurodantis jų uždarumą. Tai neįprasta skaityti, bet galiojantis HTML5, kurį naršyklės analizuoja vienodai.
Dažnai užduodami klausimai
- Ką pašalina HTML sumažinimas?
- Nereikalingi tarpai tarp žymų, HTML komentarai (<!-- -->), pasirenkamos uždarymo žymos (</li>, </p>, </td>), numatytosios atributų reikšmės (type="text" įvesties) ir loginės atributų reikšmės (disabled="disabled" → išjungta).
- Ar sumažinimas gali sugadinti mano puslapį?
- Retai, bet įmanoma, jei jūsų CSS remiasi tarpais tarp įterptųjų elementų arba jei „JavaScript“ naudoja vidinius HTML palyginimus. Visada patikrinkite sumažintą išvestį. Pagal numatytuosius nustatymus įrankis naudoja konservatyvius nustatymus.
- Ar turėčiau sumažinti HTML, jei naudoju tokią sistemą kaip Next.js?
- Dauguma šiuolaikinių sistemų (Next.js, Nuxt, Angular) automatiškai sumažina HTML gamybinėse versijose. Šis įrankis naudingas statiniams HTML failams, el. pašto šablonams ir projektams be kūrimo sistemos.
- Ar tai taip pat sumažina tiesioginį CSS ir JavaScript?
- Šis įrankis skirtas HTML struktūrai. Inline <style> ir <script> turinys išsaugomas toks, koks yra. Norėdami gauti optimalių rezultatų, naudokite tam skirtus CSS ir JavaScript minifierius.
- Ar saugu pašalinti pasirenkamas uždarymo žymas?
- Taip pagal HTML5 specifikacijas, nors rezultatą sunkiau perskaityti. Kai kurios komandos išjungia šią transformaciją, kad būtų aiškumo, sutikdamos su nedidele dydžio bauda.
- Ar mano HTML įkeltas į serverį?
- Ne. Minifier veikia jūsų naršyklėje.
- Kaip tai palyginti su html-minifier-terser?
- html-minifier-terser yra kanoninis Node.js HTML minifieras ir duoda šiek tiek agresyvesnius rezultatus. Šis įrankis apima tas pačias transformacijas, skirtas naudoti naršyklėje be kūrimo sąrankos.
- Ar turėčiau mažinti visada ar pasirinktinai?
- Visada gamybai. Niekada šaltinio kodo versijos valdymui; skaitomas HTML šaltinyje yra būtinas priežiūrai.