Moet ik HTML, CSS en JavaScript samen verkleinen?

Ja, ze worden meestal samen verkleind in een build-pijplijn omdat elk een ander activum richt. Deze tool vermindert de HTML-shell en laat opzettelijk inline en inhoud onaangeroerd, dus koppel het met een CSS-minifier voor stylesheets en een speciale JavaScript-minifier (zoals Terser) voor scripts. Het verkleinen van alle drie geeft de grootste totale bytereductie over een pagina.

Zal het verkleinen van mijn blokken of inline scripts breken?

heel weinig . Voordat een transformatie wordt uitgevoerd, wordt de volledige inhoud van , , en -elementen gemaskeerd en aan het einde teruggeplaatst. Codevoorbeelden houden elke regeleinde en ruimte, de standaardwaarden van TextArea zijn onaangeroerd en inline JavaScript of CSS wordt doorgegeven door byte-voor-byte in plaats van opnieuw te worden geminifieerd.

Hoeveel bespaart HTML-minificatie eigenlijk?

Typische server-gerenderde of door sjabloon gegenereerde pagina's verkleinen 10-25%, meestal door inkepingen en opmerkingen; diep geneste, zwaar ingesprongen markup kan meer dalen. Bovenop Gzip of Brotli zijn de draadbesparingen kleiner, maar het HTML-document is per definitie renderblokkerend, dus zelfs een paar kb van de eerste reactie is de moeite waard. De spaarbadge toont uw exacte cijfers.

Is het instorten van witruimte tussen tags veilig?

Deze tool vouwt runs van witruimte samen naar een enkele ruimte in plaats van ze te verwijderen, wat de conservatieve keuze is: HTML behandelt elke witruimterun als één ruimte bij het renderen, dus de visuele uitvoer is identiek. Het volledig verwijderen van intertag-witruimte (zoals agressieve minifiers dat kan) kan zichtbaar samenvoegen in inline-elementen - dat is precies de klasse van de bug die deze tool vermijdt.

Wat zijn voorwaardelijke opmerkingen en waarom ze houden?

Voorwaardelijke opmerkingen zoals ... zijn richtlijnen die legacy Internet Explorer heeft geparseerd om IE-specifieke markeringen te bevatten. Als u nog steeds zakelijke gebruikers op oude IE bedient of verouderde e-mailsjablonen onderhoudt, verandert het in stilte verwijderen van gedrag. De optie Bewaar blijven ze terwijl gewone opmerkingen worden verwijderd; schakel deze uit als u geen oude doelen heeft.

Verwijdert de minifier witruimte in attribuutwaarden?

heel weinig . De tagparser is citaatbewust, dus alles binnen enkele of dubbele aanhalingstekens - alt-tekst, titelattributen, inline json in data-attributen, srcset-lijsten - wordt gekopieerd door precies zoals geschreven. Alleen witruimte tussen attributen en rond tagsyntaxis wordt samengevouwen.

Kan ik een pagina die ik uit de productie heb opgeslagen on-minifiëren?

Ja - Plak het en klik op Verfraaien. Geneste tags krijgen de juiste inspringing, blokkadeelementen krijgen elk hun eigen regel en inline-elementen blijven in de tekststroom, zodat alinea's leesbaar blijven. Script- en stijlblokken behouden hun originele interne opmaak; als die ook worden verkleind, voer ze dan apart door een speciale JS- of CSS-verfraaier.

Moet ik in plaats daarvan HTML verkleinen tijdens het bouwen?

Voor productie-apps, ja - zet HTML-Minifier-Terser of de ingebouwde compressie van uw framework in de pijplijn, zodat het bij elke implementatie gebeurt. Deze tool is voor de gevallen die een pijplijn niet dekt: eenmalige bestemmingspagina's, e-mailsjablonen, CMS-fragmenten, controleren wat een Minify-pas zou besparen, of het verfraaien van markup die u niet hebt geschreven.

Behandelt het void-elementen zoals en correct?

Ja. De 14 HTML void-elementen (BR, IMG, INPUT, META, LINK, HR en de rest) worden herkend als op zichzelf staand, dus de verfraaier verhoogt nooit de inkeping na hen of verwacht een afsluitende tag. Zelfsluitende syntaxis in XML-stijl zoals wordt ook geaccepteerd en achtergelaten zoals geschreven.

Zal minification de manier waarop mijn pagina wordt weergegeven of beïnvloedt, veranderen of beïnvloeden door minification seo?

Rendering is ongewijzigd omdat alleen witruimte die de browser al negeert, is samengevouwen en opmerkingen toch onzichtbaar zijn voor gebruikers. Voor SEO is het effect neutraal-tot-positief: zoekmachines ontleden minuscuul HTML identiek, en de snellere documentlevering geeft pagina-ervaringssignalen zoals LCP. Gestructureerde gegevens in bevinden zich in een scripttag, zodat deze precies wordt bewaard.

Is mijn HTML ergens geüpload?

heel weinig Zowel minify als verfraaiing worden volledig in uw browser uitgevoerd - er wordt geen netwerkverzoek gedaan met uw markup, niets wordt gelogd of opgeslagen en de tool werkt offline na het laden. U kunt niet-uitgebrachte productpagina's of klantwerk plakken zonder dat u zich zorgen maakt over gegevensverwerking.

HTML-minifier & verfraaier

Verminder HTML-opmaak voor snellere pagina's laden of verfraai het voor leesbare, ingesprongen bron

Indent:

Minify optionsRemove commentsCollapse whitespaceKeep conditional comments

Input HTML

Output

Output will appear here...

Category:minify

Mode:Offline

Version:1.0.0

Access:Free

Wat is HTML-minifier en verfraaier?

HTML Minifier & Beautifier interface on Toolz.dev - Minify HTML markup for faster page loads or beautify it for readable, indented source

HTML-minifier & verfraaier comprimeert HTML-documenten door opmerkingen te verwijderen en de witruimte in te storten die uw sjablonen en redacteuren achterlaten - de inkeping, lege regels en volgspaties die browsers negeren, maar elke bezoeker downloadt nog steeds. Het HTML-document is de allereerste bron in elke paginabelasting; niets wordt weergegeven totdat het arriveert, dus bytes die hier worden bijgesneden, verplaatsen de eerste inhoudsvolle verf en tijd naar de eerste byte-aangrenzende statistieken directer dan bijna elk ander item. Server-gerenderde pagina's en sjabloonuitvoer verliezen routinematig 10-25% van hun grootte.

Het kritische detail in HTML-minificatie is weten wat u niet moet aanraken. Deze tool maskeert de inhoud van <pre>, <textarea>, <script> en <style> elementen voordat ze iets anders doen en herstelt ze daarna byte-voor-byte, dus codevoorbeelden behouden hun regeleinden, TextArea-standaarden behouden hun opmaak en Inline JavaScript en CSS worden nooit herschreven. Geciteerde attribuutwaarden worden exact bewaard, en dwz dwz voorwaardelijke opmerkingen kunnen worden bewaard, zelfs als gewone opmerkingen worden uitgestript - dezelfde discipline die een build-time-minifier zoals HTML-minifier-terser van toepassing is.

De verfraaier doet het omgekeerde: er is een geminifieerde of rommelige markering voor nodig en het herinent het opnieuw met nest-bewuste structuur, waarbij inline-elementen zoals <span>, <a> en <strong> vloeiend blijven met hun omringende tekst in plaats van elke tag op zijn eigen regel te exploderen. Alles draait 100% client-side in uw browser - uw markup wordt nooit geüpload of geregistreerd, dus geschraapte pagina's, CMS-export en eigen sjablonen zijn allemaal veilig om te plakken en de tool blijft offline werken.

Witruimte in HTML is niet altijd onbeduidend, daarom blijven PRE, TextArea, Script en Style precies zoals ze zijn. Door een ruimte in een voorblok in te storten, verandert wat de lezer ziet, en als u een ruimte in een script instort, kan dit veranderen wat het script doet.

Hoe HTML-minifier en verfraaier te gebruiken?

Plak je HTML

Plaats een fragment, een componentsjabloon of een volledig document in het invoergebied. Zowel geformatteerde als reeds geminifieerde markup worden geaccepteerd.

Stel uw opties in

Voor verkleining, schakel de verwijdering van commentaar, instorting van de witruimte en het behoud van voorwaardelijke opmerkingen. Kies voor verfraaiing 2, 4 of 8 ruimte-inspringing.

Klik op verkleinen of verfraaien

Minify comprimeert de markup terwijl het <pre>, <textarea>, <script> en <style> inhoud beschermt. Verfraai de geneste tags opnieuw en houdt inline-elementen leesbaar. De spaarbadge toont exacte voor/na maten.

Kopiëren of downloaden

Kopieer het resultaat naar uw klembord of download het als een .html-bestand dat klaar is om te implementeren of te inspecteren.

Belangrijkste kenmerken

Beveiligde inhoudsblokken

<pre>, <textarea>, <script> en <style> Inhoud worden gemaskeerd en hersteld byte-for-byte - Codevoorbeelden en inline scripts worden nooit verminkt

Configureerbare vermindering

Onafhankelijke schakelaars voor verwijdering van commentaar, instorten van de witte ruimte en IE voorwaardelijke bewaring van opmerkingen

Attribuutveilige instorting

Witruimte binnen geciteerde attribuutwaarden blijft exact behouden, dus alt-tekst, gegevensattributen en inline JSON overleven intact

Structuurbewuste verfraaier

Inspringende blokelementen genestelden terwijl ze inline tags zoals <span> en <a> vloeien met hun tekst; void-tags hebben geen afsluitend paar nodig

Frequently Asked Questions

HTML-minificatie Hiermee verwijdert u de delen van een document dat een browser negeert bij het renderen - opmerkingen, inspringing, lege regels en trailing spaties - om het bestand te verkleinen zonder te wijzigen wat de pagina weergeeft. Omdat het HTML-document de eerste bron is in elke pagina die wordt geladen en niets wordt weergegeven totdat het arriveert, helpt het inkorten van de grootte van de tijd tot de eerste byte-aangrenzende statistieken en eerste inhoudelijke verf.