HTML-pienentäjä (HTML Minifier)

Liitä HTML poistaaksesi kommentit ja turhan tyhjätilan sekä pienentääksesi upotetun CSS:n ja JavaScriptin. Tagien <pre> ja <textarea> sisältö jätetään täsmälleen ennalleen.

Toimii selaimessaEi rekisteröitymistäMitään ei lähetetä

Pienennetty tulos

Näin käytät työkalua: HTML-pienentäjä

  1. Liitä HTML-dokumentti tai -katkelma, tai avaa .html-tiedosto.
  2. Valitse, mitä poistetaan: kommentit, tyhjätila ja pienennetäänkö myös upotetut <style>- ja <script>-lohkot.
  3. Tarkista varoitusrivi: syntaksivirheellinen upotettu skripti jätetään ennalleen sen sijaan, että se rikkoisi sivusi.
  4. Kopioi pienennetty HTML tai lataa se.

Mitä poistetaan?

  • Kommentit: <!-- … --> poistetaan, paitsi Internet Explorerin ehdolliset kommentit ja merkillä <!--! alkavat kommentit.
  • Tyhjätila lohkoelementtien välissä: rivinvaihdot ja sisennykset tagien kuten <div>, <li> tai <head> välissä eivät koskaan näy, joten ne poistetaan kokonaan.
  • Peräkkäiset välilyönnit tekstissä: ne tiivistetään yhdeksi välilyönniksi, juuri kuten selain ne muutenkin näyttää.
  • Tyhjätila tagien sisällä: <p class = "a"> muuttuu muotoon <p class="a">.

Mitä säilytetään?

Tyhjätilalla on merkitystä tietyissä kohdissa, ja pienentäjä kunnioittaa niitä. <pre>- ja <textarea>-elementtien sisältö säilyy tavulleen. Yksittäinen välilyönti inline-elementtien välissä, kuten <b>bold</b> text, säilytetään, koska sen poistaminen yhdistäisi sanat. Attribuuttiarvoja ja lainausmerkkejä ei koskaan muuteta.

Upotettu CSS ja JavaScript

Upotetut <style>-lohkot optimoidaan CSSO:lla ja upotetut <script>-lohkot Terserillä, samoilla moottoreilla kuin CSS-pienentäjä- ja JavaScript-pienentäjä-sivuilla. JSON-LD- ja muut JSON-skriptilohkot tiivistetään, ja tuntemattoman tyyppiset skriptit (esimerkiksi templatet) jätetään rauhaan.

Kannattaako HTML:ää pienentää?

Palvelimella renderöidyillä sivuilla ja staattisilla sivustoilla HTML-dokumentti on ensimmäinen asia, jonka selain lataa, joten jokainen säästetty tavu lyhentää aikaa ensimmäiseen renderöintiin. 10–25 %:n säästöt ennen pakkausta ovat tavallisia, ja enemmän runsaasti sisennetyissä templateissa ja sivuilla, joilla on suuria upotettuja skriptejä.

Usein kysytyt kysymykset

Muuttaako HTML:n pienentäminen sivuni ulkoasua?
Ei. Vain tyhjätila, jonka selain muutenkin tiivistäisi, poistetaan, eikä <pre>/<textarea>-sisältöön kosketa. Jos tyylittelet elementtejä CSS:n white-space: pre -määrityksellä, kytke Tiivistä tyhjätila pois.
Pienentääkö se upotetun JavaScriptin ja CSS:n?
Kyllä, kun asetukset ovat päällä. Jos upotetussa lohkossa on syntaksivirhe, se jätetään ennalleen ja näytetään varoitus, joten sivu ei koskaan rikkoudu.
Voinko pienentää template-tiedostoja, kuten Handlebars, Jinja tai Blade?
Yleensä kyllä, kunhan template-tagit ovat tekstissä tai attribuuttiarvoissa. Templatet, jotka sijoittavat logiikkaa tagien nimiin tai attribuuttien väliin, voivat vaatia käsin tarkistuksen.
Lähetetäänkö HTML:äni jonnekin?
Ei. Kaikki käsitellään paikallisesti selaimessasi.

Aiheeseen liittyvät työkalut

CSS-pienentäjä Pienennä tyylitiedostoja: lyhennä arvot ja yhdistä säännöt. JavaScript-pienentäjä Pakkaa ja lyhennä JS Terserillä, koko- ja gzip-tilastoin. HTML-entiteettien koodaus / purku Escapeta HTML-erikoismerkit tai pura &entiteetit;. URL-koodaus / -purku Prosenttikoodaa/pura tekstiä ja jäsennä URL:n kyselymerkkijonot.