Bezmaksas pārveidotājs

HTML Minifikators

Samaziniet un saspiediet HTML kodu uzreiz savā pārlūkprogrammā. Noņemiet komentārus, sakļaujiet atstarpes un samaziniet faila lielumu. Bezmaksas un privāts.

Velciet un nometiet HTML failu šeit

Atbalsta .html un .htm failus. Vai ielīmējiet savu HTML iepriekš.

Or

Par šo rīku

HTML samazināšana no tīmekļa lapas avota noņem nevajadzīgās rakstzīmes — atstarpes starp tagiem, komentāriem, liekām pēdiņām, izvēles beigu tagus — lai samazinātu faila lielumu, nemainot lapas renderēšanas veidu. Ietaupījumi vienā lapā ir nelieli (parasti 10–30%), taču tie ir saistīti ar daudziem pieprasījumiem, īpaši statiskām vietnēm vai lapām, kas tiek rādītas bez dinamiskas saspiešanas.

Šis minifikators noņem atstarpes starp bloka līmeņa elementiem, sakļauj atstarpes nenozīmīgā tekstā, noņem HTML komentārus (izņemot IE nosacījumu komentārus), noņem liekās atribūtu pēdiņas, ja to atļauj HTML5 specifikācija, un izslēdz izvēles beigu tagus (</p>, </li>), ja to atļauj specifikācija. Rezultāts tiek renderēts identiski avotam katrā pārlūkprogrammā.

Samazināšana ir visnoderīgākā, ja tā ir savienota pārī ar gzip vai Brotli saspiešanu servera līmenī. Saspiešana jau novērš lielu daļu ietaupījumu, ko rada samazinājums, taču abi kopā joprojām pārspēj saspiešanu atsevišķi — īpaši lielas satiksmes vietnēs, kur joslas platuma izmaksas ir svarīgas.

Kāpēc samazināt HTML

Mazāks HTML tiek ielādēts ātrāk, īpaši lēnākiem savienojumiem un mobilajiem tīkliem. Lapas svars tieši ietekmē galvenās tīmekļa Vitals — gan lielākā saturiskā krāsa, gan laiks līdz pirmajam baitam uzlabojas, kad serveris parsēšanai atgriež mazāk HTML. Vietnēs, kurās SEO ranžēšana ir atkarīga no Core Web Vitals rādītājiem, samazināšana ir izmērāms uzlabojums.

Samazināts HTML arī samazina joslas platuma izmaksas. Vietne, kas apkalpo miljonu lapu dienā, ietaupot 10 KB katrā lapā, katru dienu ietaupa 10 GB izejas. Ietekmes savienojumi statiskām vietnēm, kas tiek nodrošināti no CDN, kas maksā, izmantojot datu pārsūtīšanu.

Kā lietot

Ielīmējiet HTML, iegūstiet samazināto versiju.

  1. Pievienojiet HTML ievadi: Ielīmējiet HTML avotu ievades apgabalā vai nometiet .html failu. Minifikators pieņem jebkuru derīgu HTML5 marķējumu.
  2. Izvēlieties opcijas: Noklusējumi noņem komentārus un sakļauj atstarpes; varat atspējot atsevišķas transformācijas, ja nepieciešams saglabāt konkrētus elementus (piemēram, saglabāt komentārus dokumentācijai).
  3. Samazināt: Minifikators izmanto HTML marķiera straumi, piemērojot katru iespējoto transformāciju. Izvade ir funkcionāli identiska HTML ar samazinātu izmēru.
  4. Kopēt vai lejupielādēt: Izmantojiet rezultātu kā pasniegto HTML. Pirms izvietošanas pārliecinieties, ka lapa tiek pareizi renderēta mērķa pārlūkprogrammās.

Bieži lietojami gadījumi

Tehniskās detaļas

Minifikators apstrādā HTML pilnvaru pa vienam. Atstarpes starp bloka līmeņa elementiem (<div>, <p>, <ul>) ir noņemtas, jo tas neietekmē renderēšanu. Atstarpes iekļautajos kontekstos (<span>, <a>, teksta saturs) tiek saglabātas, jo tas var ietekmēt renderēšanu.

Pēc noklusējuma komentāri tiek noņemti, bet nosacījuma komentāri (<!--[ja IE]>) tiek saglabāti. Atribūtu pēdiņas tiek noņemtas, ja to atļauj HTML5 parsētājs — viena vārda atribūtu vērtības bez atstarpēm vai īpašām rakstzīmēm var izlaist pēdiņas.

Izvēles beigu tagi ir izslēgti atbilstoši HTML5 specifikācijām: </p>, </li>, </td> un dažus citus var izlaist, ja tiem seko brālis un māsa, kas norāda uz to tuvumu. Tas ir neparasti lasāms, bet derīgs HTML5, ko pārlūkprogrammas parsē identiski.

Labākā prakse

Bieži uzdotie jautājumi

Ko noņem HTML samazināšana?
Nevajadzīga atstarpe starp tagiem, HTML komentāri (<!-- -->), izvēles beigu tagi (</li>, </p>, </td>), noklusējuma atribūtu vērtības (type="text" ievadē) un Būla atribūtu vērtības (disabled="disabled" → atspējots).
Vai mazināšana var sabojāt manu lapu?
Reti, bet iespējams, ja jūsu CSS paļaujas uz atstarpes starp iekļautajiem elementiem vai ja JavaScript izmanto iekšējo HTML salīdzinājumu. Vienmēr pārbaudiet samazināto izvadi. Rīks pēc noklusējuma izmanto konservatīvus iestatījumus.
Vai man vajadzētu samazināt HTML, ja izmantoju tādu sistēmu kā Next.js?
Lielākā daļa mūsdienu ietvaru (Next.js, Nuxt, Angular) automātiski samazina HTML ražošanas būvējumos. Šis rīks ir noderīgs statiskiem HTML failiem, e-pasta veidnēm un projektiem bez izveides sistēmas.
Vai tas samazina arī iekļauto CSS un JavaScript?
Šis rīks koncentrējas uz HTML struktūru. Iekļautais <style> un <script> saturs tiek saglabāts tāds, kāds ir. Lai iegūtu optimālus rezultātus, izmantojiet īpašus CSS un JavaScript minifikatorus.
Vai izvēles aizvēršanas tagus ir droši noņemt?
Jā atbilstoši HTML5 specifikācijām, lai gan rezultātu ir grūtāk nolasīt. Dažas komandas skaidrības labad atspējo šo transformāciju, pieņemot nelielu sodu.
Vai mans HTML ir augšupielādēts serverī?
Nē. Minētais darbojas jūsu pārlūkprogrammā.
Kā to var salīdzināt ar html-minifier-terser?
html-minifier-terser ir kanoniskais Node.js HTML minifikators, un tas rada nedaudz agresīvākus rezultātus. Šis rīks aptver tās pašas transformācijas pārlūkprogrammas lietošanai bez būvējuma iestatīšanas.
Vai man vajadzētu samazināt vienmēr vai selektīvi?
Vienmēr ražošanai. Nekad avota kodam versiju kontrolē; Lasāms HTML avotā ir būtisks uzturēšanai.