HTML-minificator

De HTML-minificator is een gratis tool die overbodige tekens uit HTML verwijdert en een compactere versie teruggeeft, inclusief het aantal tekens voor en na de verwerking.

Wat doet HTML-minificatie?

HTML-minificatie verkleint een HTML-document door opmaak te verwijderen die niet nodig is om het aan een browser te leveren. Denk aan inspringingen, regeleinden en overbodige witruimte tussen elementen. Het doel is gelijkwaardige markup met minder tekens.

Minificatie wordt meestal uitgevoerd tijdens een productiebuild of vlak voordat statische HTML wordt gepubliceerd. Hierdoor kunnen minder gegevens worden overgedragen, al levert HTTP-compressie zoals Brotli of gzip doorgaans een aanvullende en vaak grotere besparing op. Beide technieken vullen elkaar aan: minificatie wijzigt de broncode, terwijl compressie bepaalt hoe die broncode wordt verzonden.

Bewaar de leesbare, niet-geminificeerde HTML-broncode in versiebeheer. Geminificeerde HTML is lastiger te beoordelen, vergelijken en debuggen, vooral wanneer een fout verwijst naar een regel en kolom in een document dat één lange regel is geworden.

Hoe gebruik ik de HTML-minificator?

Voer het brondocument in het veld HTML in en start de tool. De compacte broncode verschijnt bij Geminificeerde HTML, samen met HTML-tekens en Geminificeerde HTML-tekens.

1. Gebruik het volledige HTML-document of een zelfstandig fragment.
2. Voer de minificatie uit en controleer de teruggegeven markup.
3. Vergelijk de twee aantallen tekens om na te gaan of de bewerking een nuttige verkleining heeft opgeleverd.
4. Test het geminificeerde HTML-document en de weergave ervan in een browser voordat je een productiebestand vervangt.

De verwerking vindt plaats op de server. Je invoer wordt via HTTPS naar de server verzonden en niet opgeslagen. Dien geen vertrouwelijke broncode in als je organisatie vereist dat code uitsluitend lokaal wordt verwerkt.

De geminificeerde uitvoer lezen

Het resultaat toont de geminificeerde markup en het aantal tekens voor en na de verwerking. Een lagere waarde bij Geminificeerde HTML-tekens betekent dat er tekens zijn verwijderd, maar dit is niet hetzelfde als de bestandsgrootte van de download.

Voor de telling wordt rekening gehouden met tekenreeksen die uit meerdere bytes bestaan. Letters met accenten en niet-Latijnse schriften worden dus als tekens behandeld en niet simpelweg als afzonderlijke bytes geteld. Een zichtbaar symbool dat uit meerdere Unicode-codepunten bestaat, kan nog steeds voor meer dan één teken meetellen.

De teruggegeven velden bevatten geen validatierapport. Beschouw deze tool daarom niet als een HTML-validator. De tool kan compacte uitvoer teruggeven zonder te waarschuwen voor onjuist geneste elementen, dubbele ID's, ontbrekende verplichte eindtags of een attribuutwaarde met spaties die niet tussen aanhalingstekens staat. Een afsluitende komma is geen HTML-syntaxisfout, maar binnen ingesloten JSON of JavaScript kan zo'n komma er wel voor zorgen dat die inhoud niet werkt.

Voorbeelden en lastige invoer

Inspringingen rond gewone blokelementen zijn een eenvoudig doel voor minificatie.

Invoer, waarbij \n een regeleinde voorstelt <main>\n <p>Ready</p>\n</main>

Compacte vorm <main><p>Ready</p></main>

Witruimte in tekst vraagt om meer aandacht. De spatie tussen twee inline-elementen kan bijvoorbeeld zichtbaar zijn op de weergegeven pagina.

Invoer <span>Account</span> <span>settings</span>

Onveilige compacte vorm <span>Account</span><span>settings</span>

De tweede vorm kan worden weergegeven als "Accountsettings". Controleer inline-inhoud altijd en ga er niet van uit dat elke ruimte tussen tags kan worden verwijderd.

• Spaties en regeleinden binnen <pre>, <textarea> en vergelijkbare inhoud die gevoelig is voor witruimte kunnen betekenis hebben.
• Cijfers en leestekens in tekst of attribuutwaarden zijn documentinhoud, geen opmaak die kan worden weggegooid.
• Tekens met accenten en niet-Latijnse tekens zijn geldige HTML-tekst wanneer het document de juiste tekencodering gebruikt.
• Template-expressies, serverinstructies en voorwaardelijke opmerkingen kunnen regels volgen die een algemene HTML-minificator niet begrijpt.
• Bij lege HTML-invoer valt niets nuttigs te verkleinen. Gebruik voor een zeer lang HTML-document een herhaalbaar HTML-buildproces in plaats van handmatig kopiëren.

Wanneer is HTML minificeren de moeite waard?

HTML minificeren is zinvol wanneer een leesbaar bronbestand moet worden voorbereid voor productie en de uitvoer herhaaldelijk wordt aangeboden. Bij statische landingspagina's, documentatiebuilds en door de server gegenereerde templates kan minificatie deel uitmaken van de stappen vóór publicatie.

HTML die al geminificeerd is, opnieuw minificeren heeft meestal weinig nut, omdat een extra bewerking mogelijk nauwelijks of geen verkleining oplevert. JSON of HTML die alleen door een machine wordt gelezen netjes opmaken is evenmin nodig, tenzij iemand de inhoud moet debuggen. Voor HTML van derden zijn de ontwikkelaarstools van een browser of een formatter doorgaans nuttiger, omdat minificatie onbekende markup moeilijker te controleren maakt.

Gebruik HTML-minificatie niet om ongeldige of gebrekkige markup te herstellen. Als markup zich niet in alle browsers hetzelfde gedraagt, valideer en test dan eerst de leesbare broncode. Wanneer een pagina vanuit Markdown wordt gegenereerd, kan Markdown naar HTML de markup produceren vóór de laatste minificatiestap voor productie.

Veelgestelde vragen

Kan ik HTML met inline CSS of JavaScript minificeren?

Inline CSS en JavaScript volgen hun eigen grammaticaregels. Ga er daarom niet van uit dat een HTML-bewerking ook de inhoud daarvan optimaliseert. Gebruik waar nodig de CSS-minificator of JS minificator voor die gedeelten. Test daarna het samengestelde document, omdat ingesloten reeksen met sluittags invloed kunnen hebben op de verwerking van HTML.

Zorgt geminificeerde HTML voor een hogere positie in zoekmachines?

Minificatie maakt inhoud op zichzelf niet relevanter voor een zoekmachine. Het kan de overdrachtsgrootte verkleinen, maar ook caching, compressie, afbeeldingen, scripts en de reactietijd van de server beïnvloeden hoe snel een pagina wordt geleverd. Behoud koppen, metadata, gestructureerde gegevens en zichtbare inhoud wanneer je het productiebestand voorbereidt.

Kan ik Twig-, Blade- of andere HTML-templates minificeren?

Templatesyntaxis is geen gewone HTML en kan afhankelijk zijn van witruimte of scheidingstekens die een algemene minificator niet herkent. Het is veiliger om de gegenereerde uitvoer te minificeren, of een buildintegratie met ondersteuning voor templates te gebruiken en representatieve pagina's met tests af te dekken.

Waarom verschilt het aantal tekens van de bestandsgrootte?

Tekens en bytes zijn verschillende meeteenheden bij Unicode-coderingen zoals UTF-8. Veel ASCII-tekens nemen één byte in beslag, terwijl andere tekens meerdere bytes kunnen gebruiken. Bestanden kunnen ook een bytevolgordemarkering bevatten of regeleinden gebruiken die de grootte in bytes beïnvloeden.

Verwijdert minificatie HTML-opmerkingen veilig?

Opmerkingen kunnen vaak worden verwijderd, maar sommige bevatten buildinstructies, instructies voor server-side includes of compatibiliteitsmarkup. Ga er niet van uit dat elke opmerking overbodig is. Controleer de teruggegeven broncode en de weergegeven pagina als opmerkingen binnen je project een functionele betekenis hebben.

Laatste controles

Vergelijk de weergegeven pagina vóór en na de minificatie. Let daarbij vooral op witruimte tussen inline-elementen, vooraf opgemaakte tekst, formulieren en ingesloten scripts. Bewaar het leesbare origineel, valideer de markup afzonderlijk en publiceer de geminificeerde kopie pas wanneer de pagina naar verwachting werkt.