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.
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.
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.