HTML minifier

Illessz be HTML-t a kommentek és a fölösleges szóközök eltávolításához, valamint az inline CSS és JavaScript minifikálásához. A <pre> és <textarea> elemek tartalma pontosan úgy marad, ahogy írtad.

A böngésződben futNincs regisztrációNincs feltöltés

Minifikált kimenet

Hogyan használd: HTML minifier

  1. Illessz be egy HTML-dokumentumot vagy -részletet, vagy nyiss meg egy .html fájlt.
  2. Válaszd ki, mit távolítson el: kommenteket, szóközöket, és hogy az inline <style> és <script> blokkokat is minifikálja-e.
  3. Nézd meg a figyelmeztetések sorát: a szintaktikai hibás inline scriptet változatlanul hagyjuk, hogy ne törje el az oldalt.
  4. Másold ki a minifikált HTML-t, vagy töltsd le.

Mi kerül eltávolításra?

  • Kommentek: a <!-- … --> törlődik, kivéve az Internet Explorer feltételes kommentjeit és a <!--! kezdetű kommenteket.
  • Szóközök a blokkelemek között: az olyan tagek közötti sortörések és behúzások, mint a <div>, <li> vagy <head>, sosem jelennek meg, ezért teljesen kikerülnek.
  • Szóközsorozatok a szövegben: egyetlen szóközzé olvadnak össze, pontosan úgy, ahogy a böngésző amúgy is megjeleníti őket.
  • Szóközök a tageken belül: a <p class = "a"> ebből lesz: <p class="a">.

Mi marad meg?

Bizonyos helyeken a szóközöknek jelentése van, és a minifier ezeket tiszteletben tartja. A <pre> és a <textarea> tartalma bájtra pontosan megmarad. Az inline elemek közötti egyetlen szóköz, például a <b>bold</b> text esetében, megmarad, mert az eltávolítása összevonná a szavakat. Az attribútumértékek és az idézőjelek soha nem változnak.

Inline CSS és JavaScript

Az inline <style> blokkokat a CSSO, az inline <script> blokkokat a Terser optimalizálja, ugyanazok a motorok, amelyek a CSS minifier és a JavaScript minifier oldalon is dolgoznak. A JSON-LD és más JSON script blokkok tömörítve lesznek, az ismeretlen típusú scriptek (például sablonok) pedig érintetlenek maradnak.

Megéri minifikálni a HTML-t?

Szerveroldalon renderelt oldalaknál és statikus webhelyeknél a HTML-dokumentum az első, amit a böngésző letölt, így minden megspórolt bájt rövidíti az első megjelenítésig eltelt időt. Tömörítés előtt 10–25% megtakarítás gyakori, erősen behúzott sablonoknál és nagy inline scripteket tartalmazó oldalaknál még több.

Gyakran ismételt kérdések

Megváltozik az oldalam kinézete a HTML minifikálásától?
Nem. Csak azok a szóközök tűnnek el, amelyeket a böngésző amúgy is összevonna, a <pre>/<textarea> tartalom pedig érintetlen marad. Ha CSS-ben white-space: pre stílust használsz elemekre, kapcsold ki a Szóközök összevonása opciót.
Minifikálja az inline JavaScriptet és CSS-t?
Igen, ha az opciók be vannak kapcsolva. Ha egy inline blokkban szintaktikai hiba van, változatlanul marad, és figyelmeztetés jelenik meg, így az oldal sosem törik el.
Minifikálhatok sablonfájlokat, például Handlebars, Jinja vagy Blade sablonokat?
Általában igen, amíg a sablontagek szövegben vagy attribútumértékekben szerepelnek. Azokat a sablonokat, amelyek tagnevekbe vagy attribútumok közé tesznek logikát, érdemes kézzel is ellenőrizni.
Elküldjük valahova a HTML-emet?
Nem. Minden helyben, a böngésződben dolgozódik fel.

Kapcsolódó eszközök

CSS minifier Kisebb stíluslapok: rövidebb értékek, összevont szabályok. JavaScript minifier JS tömörítése és mangle Terserrel, méret- és gzip-statisztikával. HTML entitás kódoló / dekódoló HTML speciális karakterek escape-elése vagy &entities; dekódolása. URL kódolás / dekódolás Százalékos kódolás/dekódolás és URL query stringek elemzése.