Ingyenes konverter

HTML Minifier

Csökkentse és tömörítse a HTML-kódot azonnal a böngészőben. Távolítsa el a megjegyzéseket, csukja össze a szóközöket, és csökkentse a fájlméretet. Ingyenes és privát.

Húzzon ide egy HTML-fájlt

Támogatja a .html és .htm fájlokat. Vagy illessze be a HTML-kódot fent.

Vagy

Az eszközről

A HTML kicsinyítés eltávolítja a szükségtelen karaktereket a weboldal forrásából – szóközt a címkék között, megjegyzéseket, redundáns idézőjeleket, opcionális zárócímkéket –, hogy csökkentse a fájlméretet anélkül, hogy megváltoztatná az oldal megjelenítési módját. Az oldalankénti megtakarítások szerények (általában 10–30%), de sok kéréssel együtt járnak, különösen a statikus webhelyek vagy a dinamikus tömörítés nélküli oldalak esetében.

Ez a kicsinyítő eltávolítja a szóközt a blokkszintű elemek között, összecsukja a nem jelentős szövegekben lévő szóközöket, kivonja a HTML-megjegyzéseket (kivéve az IE feltételes megjegyzéseit), eltávolítja a redundáns attribútum-idézőjeleket, ahol a HTML5 specifikációja lehetővé teszi, és kiküszöböli az opcionális zárócímkéket (</p>, </li>), ahol a specifikáció lehetővé teszi. Az eredmény minden böngészőben azonosan jelenik meg a forrással.

A kicsinyítés akkor a leghasznosabb, ha szerverszinten gzip vagy Brotli tömörítéssel párosul. A tömörítés már eleve eltávolítja a megtakarítások nagy részét, de a kettő együtt még mindig felülmúlja a tömörítést önmagában – különösen a nagy forgalmú webhelyeken, ahol a sávszélesség költsége számít.

Miért kicsinyítse le a HTML-t?

A kisebb HTML gyorsabban töltődik be, különösen lassabb kapcsolatokon és mobilhálózatokon. Az oldal súlya közvetlenül befolyásolja a Core Web Vitals értéket – a Legnagyobb Contentful Paint és a Time to First Byte egyaránt javul, amikor a szerver kevesebb HTML-kódot ad vissza elemzésre. Azoknál a webhelyeknél, ahol a keresőoptimalizálás rangsorolása a Core Web Vitals pontszámoktól függ, a minimalizálás mérhető fejlődést jelent.

A minimálisra csökkentett HTML a sávszélesség költségeit is csökkenti. A napi egymillió oldalt megjelenítő webhely oldalanként 10 KB megtakarítással napi 10 GB kilépést takarít meg. Az adatátvitellel számlázó CDN-ekből kiszolgált statikus helyek hatásvegyületei.

Használati útmutató

Illessze be a HTML-t, és szerezze be a kicsinyített verziót.

  1. HTML bevitel hozzáadása: Illessze be a HTML-forrást a beviteli területre, vagy dobjon egy .html fájlt. A minifier bármilyen érvényes HTML5 jelölést elfogad.
  2. Válasszon opciókat: Az alapértelmezett beállítások eltávolítják a megjegyzéseket és összecsukják a szóközöket; letilthatja az egyes átalakításokat, ha meg kell őriznie bizonyos elemeket (pl. megjegyzések megőrzése a dokumentációhoz).
  3. Minimalizálás: A minifier végigmegy a HTML-tokenfolyamon, alkalmazva minden engedélyezett átalakítást. A kimenet funkcionálisan azonos HTML, csökkentett mérettel.
  4. Másolás vagy letöltés: Az eredményt használja kiszolgált HTML-ként. A telepítés előtt ellenőrizze, hogy az oldal megfelelően jelenik meg a célböngészőben.

Gyakori használati esetek

Műszaki részletek

A minifier a HTML-jogkivonatot tokenenként dolgozza fel. A blokkszintű elemek (<div>, <p>, <ul>) közötti szóköz eltávolítva, mert nincs hatással a megjelenítésre. A szövegközi kontextusokban (<span>, <a>, szöveges tartalom) a szóköz megmarad, mert befolyásolhatja a megjelenítést.

A megjegyzések alapértelmezés szerint törlődnek, de a feltételes megjegyzések (<!--[ha IE]>) megmaradnak. Az attribútum idézőjeleit a rendszer eltávolítja ott, ahol a HTML5 elemző lehetővé teszi – az egyszavas attribútumértékek szóközök vagy speciális karakterek nélkül elhagyhatják az idézőjeleket.

Az opcionális záró címkék a HTML5 specifikációi szerint kikerülnek: </p>, </li>, </td>, és néhány másik kihagyható, ha egy testvér követi őket, ami a bezárásukra utal. Ez szokatlan olvasmány, de érvényes HTML5, amelyet a böngészők azonos módon értelmeznek.

Legjobb gyakorlatok

Gyakran ismételt kérdések

Mit távolít el a HTML kicsinyítés?
Felesleges szóköz a címkék, a HTML megjegyzések (<!-- -->), az opcionális záró címkék (</li>, </p>, </td>), az alapértelmezett attribútumértékek (type="text" on input) és a logikai attribútumértékek (disabled="disabled" → disabled) között.
Megtörheti az oldalam a minimalizálás?
Ritkán, de lehetséges, ha a CSS szóközökre támaszkodik a soron belüli elemek között, vagy ha a JavaScript belső HTML-összehasonlításokat használ. Mindig tesztelje a minimális kimenetet. Az eszköz alapértelmezés szerint konzervatív beállításokat használ.
Csökkentenem kell a HTML-t, ha olyan keretrendszert használok, mint a Next.js?
A legtöbb modern keretrendszer (Next.js, Nuxt, Angular) automatikusan kicsinyíti a HTML-t az éles összeállításokban. Ez az eszköz statikus HTML-fájlokhoz, e-mail sablonokhoz és összeállítási rendszer nélküli projektekhez hasznos.
Ez csökkenti a beépített CSS-t és a JavaScriptet is?
Ez az eszköz a HTML szerkezetére összpontosít. A soron belüli <stílus> és <script> tartalma a jelenlegi állapotában megmarad. Ezekhez használjon dedikált CSS- és JavaScript-minifirátorokat az optimális eredmény érdekében.
Biztonságos-e az opcionális zárócímkék eltávolítása?
Igen a HTML5 specifikációi szerint, bár az eredmény nehezebben olvasható. Néhány csapat az egyértelműség kedvéért letiltja ezt az átalakítást, elfogadva az enyhe büntetés mértékét.
Fel van töltve a HTML-em egy szerverre?
Nem. A minifier a böngészőjében fut.
Miben hasonlít ez a html-minifier-terserhez?
A html-minifier-terser a kanonikus Node.js HTML-minifier, és valamivel agresszívebb eredményeket produkál. Ez az eszköz ugyanazokat az átalakításokat fedi le a böngészőoldali használathoz, build-beállítás nélkül.
Mindig vagy szelektíven csökkentsem?
Mindig gyártásra. Soha a forráskódhoz a verziókezelésben; A forrásban olvasható HTML elengedhetetlen a karbantartáshoz.