Aller au contenu

Minificateur HTML

Retirez espaces, commentaires et guillemets du HTML - avec un rapport avant/après dans votre navigateur.

Avant 220B → Après 162B (26% économisés)
<!DOCTYPE html><html><head><title>Hello</title></head><body><h1 class="greeting">Hello world</h1> <pre>
  this whitespace
  is preserved
    </pre> </body></html>

Collez du HTML, obtenez une version minifiée - avec compteur d'octets et pourcentage économisé. Commentaires et blancs retirés par défaut ; options pour retirer guillemets d'attributs et balises facultatives.

Comment l'utiliser

  1. Collez votre HTML

    Tout fragment HTML5 ou document complet.

  2. Choisissez l'agressivité

    Par défaut, blancs + commentaires. Mode agressif retire aussi guillemets redondants et balises facultatives.

  3. Copiez la sortie minifiée

    Tailles avant/après affichées à côté de la sortie.

Qu'est-ce que c'est ?

Un minificateur HTML gagne des octets en supprimant blancs et commentaires qui n'affectent pas le rendu. Les gains sont les plus gros sur du HTML écrit à la main avec une indentation généreuse ; la sortie générée par framework est en général déjà compacte. Économies typiques : 15-30 % sur le HTML brut avant gzip.

Quand l'utiliser

Inliner du HTML dans une réponse JSON ou un template d'email où chaque octet compte. Optimisation manuelle d'une page sur le chemin critique après un audit Lighthouse. Nettoyer un HTML exporté depuis un éditeur WYSIWYG qui a laissé un commentaire à chaque ligne.

Erreurs courantes

L'exécuter sur des templates Jinja / Handlebars / Vue - le minificateur ne comprend pas les balises de template, donc {{ stuff }} survit mais les blancs autour peuvent disparaître à des endroits indésirables. Supprimer des commentaires dont le pipeline de build a besoin (pragmas build-info, commentaires conditionnels IE). Et attendre de gros gains sur du contenu déjà gzippé - la minification HTML s'empile avec gzip, mais gzip fait l'essentiel.

FAQ

Préserve-t-il <pre>, <textarea> et <code> ?
Oui. Les blancs dans ces balises sont significatifs, donc laissés intacts. Idem pour les corps <script> et <style>.
La sortie reste-t-elle du HTML valide ?
Oui pour les options par défaut - on ne retire les blancs que là où ça ne peut pas changer le rendu. Avec « retirer les balises facultatives » activé, la sortie est plus compacte mais repose sur les règles d'éléments facultatifs HTML5, donc vérifiez que votre parseur est conforme HTML5.

Notez cet outil

Partagez votre expérience pour aider les autres.

Plus dans cette catégorie