HTML-minifier

Kleinere HTML, snellere pagina's

HTML die door mensen is geschreven (of door paginabouwers is gegenereerd) zit vol inspringingen, regeleinden en opmerkingen. Browsers hebben daar niets aan. De HTML-minifier haalt overbodige tekens weg terwijl de pagina precies hetzelfde blijft werken, en toont het aantal HTML-tekens vooraf en het aantal geminificeerde HTML-tekens achteraf, zodat je ziet hoeveel je hebt bespaard.

Kleinere HTML wordt sneller gedownload, vooral op mobiele netwerken, en het is het eerste bestand dat de browser nodig heeft voordat hij iets kan weergeven.

Minificeer een kopie voor productie en houd je originele, leesbare bron om te bewerken.

Zo gebruik je de HTML-minifier

1. Plak je HTML-code.
2. Verstuur om te minificeren.
3. Vergelijk het aantal tekens.
4. Kopieer de geminificeerde HTML en test de pagina voordat je hem live zet.

Voorbeelden

Een kleine pagina

Invoer:

<!DOCTYPE html>
<html>
  <head>
    <title> My page </title>
  </head>
  <body>
    <!-- main nav -->
    <p class="intro">
      Hello   <b>world</b>
    </p>
  </body>
</html>

Uitvoer:

<!DOCTYPE html><html><head><title>My page</title><body><p class=intro>Hello <b>world</b>

Witruimte en de opmerking zijn weg, de aanhalingstekens rond intro zijn weggelaten, en sluittags die HTML toestaat weg te laten (zoals </p>, </body> en </html>) zijn verwijderd. Browsers geven het precies hetzelfde weer.

Veelvoorkomend gebruik

• De grootte van statische HTML-pagina's en landingspagina's verkleinen.
• HTML-e-mailsjablonen comprimeren (sommige mailprogramma's knippen grote berichten af).
• HTML-fragmenten en widgets verkleinen die op andere sites worden ingesloten.
• Productiebuilds voorbereiden als je geen buildtool hebt.
• HTML-e-mailsjablonen verkleinen voor verzending, nadat je ze in de belangrijkste mailapps hebt getest.

Tips en goed om te weten

• Bewaar het originele, leesbare bestand. Geminificeerde code is lastig te bewerken.
• Witruimte binnen <pre> en <textarea> doet ertoe; controleer die delen na het minificeren.
• Gmail knipt e-mails van meer dan ongeveer 102 KB af, dus grote HTML-e-mails minificeren kan ze heel houden.
• Servercompressie (gzip of Brotli) werkt bovenop minificatie voor nog kleinere overdrachten.
• Minificeer ook je stijlen en scripts met de CSS-minifier en de JS-minifier.

Bijzondere gevallen en beperkingen

• Optionele sluittags worden verwijderd. Dat is geldige HTML, maar kan tools in de war brengen die verwachten dat elke tag gesloten is, zoals sommige e-mailbouwers of XML-parsers. Test voordat je de uitvoer daar gebruikt.
• Witruimte binnen <pre> en <textarea> blijft behouden, omdat die daar betekenis heeft.
• Templatetags (zoals {{ }} of ) kunnen worden aangepast. Minificeer de uiteindelijke gerenderde HTML, geen templates.
• Inline CSS en JavaScript worden ook geminificeerd, dus controleer of de pagina nog werkt.

Veelgestelde vragen

Wat doet HTML minificeren?

Het verwijdert tekens die browsers niet nodig hebben, zoals extra spaties, regeleinden en opmerkingen, waardoor het bestand kleiner wordt.

Kan minificeren mijn pagina breken?

Zelden, maar content waarin witruimte belangrijk is en inline scripts kunnen worden beïnvloed. Test altijd de geminificeerde versie.

Helpt geminificeerde HTML bij SEO?

Indirect. Snellere pagina's verbeteren de gebruikerservaring en de Core Web Vitals. Zoekmachines lezen geminificeerde HTML prima.

Hoeveel kleiner wordt mijn HTML?

Dat hangt af van hoeveel witruimte en opmerkingen erin zitten. Besparingen van 10–30% zijn gebruikelijk bij met de hand geschreven HTML.

Moet ik HTML minificeren die mijn CMS genereert?

Meestal doet een caching- of performanceplug-in dat al automatisch. Gebruik deze tool voor statische pagina's, templates die je al hebt gerenderd en HTML voor e-mails.

Gerelateerde tools

• CSS-minifier: Minificeer je CSS door alle overbodige tekens te verwijderen.
• JS-minifier: Minificeer je JS door alle overbodige tekens te verwijderen.
• HTML-tagverwijderaar: Verwijder eenvoudig alle HTML-tags uit een blok tekst.
• HTML-entityconverter: Codeer of decodeer HTML-entity's voor elke invoer.
• Tekstgrootte-calculator: Bekijk de grootte van een tekst in bytes (B), kilobytes (KB) of megabytes (MB).