Kuhusu zana hii
Uboreshaji wa HTML huondoa vibambo visivyo vya lazima kutoka chanzo cha ukurasa wa tovuti - nafasi nyeupe kati ya lebo, maoni, nukuu zisizohitajika, lebo za hiari za kufunga - ili kupunguza ukubwa wa faili bila kubadilisha jinsi ukurasa unavyofanya. Akiba ni ya wastani kwa kila ukurasa (kawaida 10-30%) lakini hujumuika katika maombi mengi, hasa kwa tovuti tuli au kurasa zinazotolewa bila mbano unaobadilika.
Kipenyo kidogo hiki huondoa nafasi nyeupe kati ya vipengee vya kiwango cha blok, hukunja utendakazi wa nafasi nyeupe ndani ya maandishi yasiyo ya maana, huondoa maoni ya HTML (isipokuwa maoni ya masharti ya IE), huondoa nukuu za sifa zisizohitajika inaporuhusiwa na kibainishi cha HTML5, na hutoa lebo za kufunga za hiari (</p>, </li>) ambapo vipimo vinaruhusu. Matokeo yake yanaonyesha sawa na chanzo katika kila kivinjari.
Minification ni muhimu zaidi inapooanishwa na gzip au Brotli compression katika ngazi ya seva. Mfinyazo tayari huondoa kiasi kikubwa cha upunguzaji wa akiba, lakini zote mbili kwa pamoja bado zinashinda mgandamizo pekee - hasa kwa tovuti zenye trafiki nyingi ambapo gharama za kipimo data ni muhimu.
Kwa nini Minify HTML
HTML ndogo hupakia haraka, hasa kwenye miunganisho ya polepole na mitandao ya simu. Uzito wa ukurasa huathiri moja kwa moja Core Web Vitals - Rangi Kubwa Zaidi ya Kuridhika na Wakati wa Kwanza Byte zote huboresha seva inaporudisha HTML kidogo ili kuchanganua. Kwa tovuti ambazo nafasi ya SEO inategemea alama za Core Web Vitals, uboreshaji ni uboreshaji unaoweza kupimika.
HTML iliyopunguzwa pia inapunguza gharama za kipimo data kwa kiwango. Tovuti inayotumia kurasa milioni moja kwa siku ikiwa na akiba ya KB 10 kwa kila ukurasa huokoa GB 10 za kuhama kila siku. Michanganyiko ya athari kwa tovuti tuli zinazotolewa kutoka kwa CDN ambazo hutozwa kwa uhamisho wa data.
Maelezo ya Kiufundi
Minifier huchakata tokeni ya HTML kwa tokeni. Nafasi nyeupe kati ya vipengele vya kiwango cha kuzuia (<div>, <p>, <ul>) imeondolewa kwa sababu haiathiri uwasilishaji. Nafasi nyeupe ndani ya miktadha ya ndani (<span>, <a>, maudhui ya maandishi) huhifadhiwa kwa sababu inaweza kuathiri uwasilishaji.
Maoni yameondolewa kwa chaguo-msingi lakini maoni ya masharti (<!--[if IE]>) yanahifadhiwa. Nukuu za sifa huondolewa ambapo kichanganuzi cha HTML5 kinaruhusu - thamani za sifa za neno moja bila nafasi au herufi maalum zinaweza kuacha manukuu.
Lebo za hiari za kufunga hupendekezwa kulingana na vibainishi vya HTML5: </p>, </li>, </td>, na vingine vichache vinaweza kuachwa vinapofuatwa na ndugu ambayo inaashiria ukaribu wao. Hili si la kawaida kusoma lakini HTML5 halali ambayo vivinjari huchanganua kwa kufanana.
Maswali yanayoulizwa mara kwa mara
- HTML minification inaondoa nini?
- Nafasi nyeupe isiyo ya lazima kati ya lebo, maoni ya HTML (<!-- -->), lebo za kufunga za hiari (</li>, </p>, </td>), thamani za sifa chaguo-msingi (aina = "maandishi" kwenye pembejeo), na thamani za sifa za boolean (disabled="disabled" → zimelemazwa).
- Je, minification inaweza kuvunja ukurasa wangu?
- Mara chache, lakini inawezekana ikiwa CSS yako inategemea nafasi nyeupe kati ya vipengee vya ndani au ikiwa JavaScript inatumia ulinganisho wa innerHTML. Jaribu matokeo yaliyopunguzwa kila wakati. Chombo hutumia mipangilio ya kihafidhina kwa chaguo-msingi.
- Je, nipunguze HTML ikiwa nitatumia mfumo kama Next.js?
- Mifumo mingi ya kisasa (Next.js, Nuxt, Angular) hupunguza HTML kiotomatiki katika miundo ya uzalishaji. Zana hii ni muhimu kwa faili tuli za HTML, violezo vya barua pepe, na miradi isiyo na mfumo wa kujenga.
- Je, hii inapunguza CSS ya ndani na JavaScript pia?
- Chombo hiki kinazingatia muundo wa HTML. Yaliyomo ndani ya <style> na <script> yanahifadhiwa kama ilivyo. Kwa hizo, tumia vichujio maalum vya CSS na JavaScript kwa matokeo bora.
- Je, ni salama kuondoa vitambulisho vya hiari vya kufunga?
- Ndio kwa HTML5 maalum, ingawa matokeo ni ngumu kusoma. Baadhi ya timu huzima mabadiliko haya kwa uwazi, na kukubali adhabu ya ukubwa kidogo.
- Je, HTML yangu imepakiwa kwenye seva?
- Hapana. Kipunguzaji kinafanya kazi katika kivinjari chako.
- Je, hii inalinganishwaje na html-minifier-terser?
- html-minifier-terser ni kipenyo kidogo cha HTML cha Node.js na hutoa matokeo ya fujo zaidi. Zana hii inashughulikia mabadiliko sawa kwa matumizi ya upande wa kivinjari bila usanidi wa muundo.
- Je, nipunguze kila mara au kwa kuchagua?
- Daima kwa uzalishaji. Kamwe kwa msimbo wa chanzo katika udhibiti wa toleo; HTML inayoweza kusomeka katika chanzo ni muhimu kwa matengenezo.