Minificateur HTML

Qu'est-ce que la minification HTML ?

La minification HTML est le processus de réduction de la taille d'un document HTML sans modifier la façon dont le navigateur le restitue. Un minificateur HTML supprime les caractères qui n'existent que pour la lisibilité des développeurs : les espaces entre les balises, les commentaires, les balises fermantes optionnelles et les valeurs d'attributs redondantes. Le résultat est fonctionnellement identique à la source, mais plus petit en octets, ce qui signifie des téléchargements plus rapides et un temps d'affichage initial réduit pour les utilisateurs.

Les navigateurs analysent le HTML en un arbre DOM et ignorent la plupart des espaces au cours de ce processus. Une suite d'espaces et de sauts de ligne entre deux balises div n'a aucun effet visuel sur la page rendue. Les commentaires sont également ignorés par l'analyseur. La minification tire parti de ces règles en supprimant ce que l'analyseur aurait de toute façon écarté, afin que ces données n'aient jamais à transiter sur le réseau.

Les gains de la minification HTML varient selon le document. Les gabarits très commentés, les pages générées côté serveur avec une indentation profonde et les sorties de CMS avec des styles en ligne voient souvent une réduction de taille de 15 à 30 % grâce à la minification seule. Pour les petits documents, les économies absolues sont modestes, mais sur les sites à fort trafic, même quelques kilo-octets par chargement de page représentent des économies de bande passante significatives sur des millions de requêtes.

Pourquoi utiliser ce minificateur HTML ?

Collez votre HTML et obtenez instantanément le résultat minifié. Pas d'outils de build à installer, pas de fichiers de configuration, pas de comptes à créer.

Cas d'usage du minificateur HTML

Ce que la minification HTML supprime

Un minificateur HTML complet applique plusieurs transformations au-delà de la simple suppression des espaces. Le tableau ci-dessous liste les techniques les plus courantes, classées de la plus sûre (toujours sans perte) à la plus agressive (peut causer des problèmes dans certains cas si appliquée sans discernement).

Minification vs. compression Gzip

Les développeurs se demandent parfois si la minification est encore nécessaire lorsque le serveur applique déjà la compression Gzip ou Brotli. La réponse courte : oui, et elles fonctionnent mieux ensemble.

La minification réduit les données que Gzip doit traiter, ce qui donne un résultat compressé plus petit. Les recommandations PageSpeed de Google préconisent d'appliquer les deux. Sur une page typique, la minification économise 15 à 25 % de la taille brute et Gzip compresse ensuite le résultat de 60 à 80 % supplémentaires. Combinées, la taille totale transférée peut descendre à 10-20 % du document original non minifié et non compressé.

Exemples de code

Voici des exemples fonctionnels de minification HTML dans quatre environnements. Chaque exemple supprime les commentaires et réduit les espaces.

import { minify } from 'html-minifier-terser'

const html = `
  <div class="card">
    <!-- user profile -->
    <p>  Hello, world!  </p>
  </div>
`

const result = await minify(html, {
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeEmptyAttributes: true,
})
// → '<div class="card"><p>Hello, world!</p></div>'

import htmlmin

html = """
<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>
"""

result = htmlmin.minify(html, remove_comments=True, remove_empty_space=True)
# → '<div class="card"><p>Hello, world!</p></div>'

package main

import (
    "fmt"
    "github.com/tdewolff/minify/v2"
    "github.com/tdewolff/minify/v2/html"
)

func main() {
    m := minify.New()
    m.AddFunc("text/html", html.Minify)

    input := `<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>`

    result, _ := m.String("text/html", input)
    fmt.Println(result)
    // → <div class=card><p>Hello, world!</div>
}

# Install globally
npm install -g html-minifier-terser

# Minify a file
html-minifier-terser --collapse-whitespace --remove-comments input.html -o output.html

# Pipe from stdin
cat index.html | html-minifier-terser --collapse-whitespace --remove-comments

# With all common optimizations
html-minifier-terser \
  --collapse-whitespace \
  --remove-comments \
  --remove-redundant-attributes \
  --remove-empty-attributes \
  --minify-css true \
  --minify-js true \
  input.html -o output.min.html

Questions fréquentes