Si vous gérez un site web, vous optimisez sans doute vos images. Pourtant, la compression HTML reste souvent négligée, alors qu'elle offre des gains significatifs en performance.
Dans cet article, expert en optimisation web, nous explorons les deux méthodes principales pour réduire la taille des fichiers HTML : minification et compression. Découvrez pourquoi les appliquer et comment les implémenter efficacement.
Pour optimiser les fichiers HTML, deux techniques s'imposent : la minification et la compression. Distinctes, elles se complètent parfaitement.
La minification supprime les caractères superflus : indentations, commentaires, lignes vides. Ces éléments facilitent la lecture du code, mais alourdissent le fichier sans impact fonctionnel.
Exemple de page HTML standard :
<html>
<head>
<title>Votre titre ici</title>
</head>
<body>
<div><img src="nuages.jpg"></div>
<h1>Ceci est un en-tête</h1>
<p>
Envoyez-moi un e-mail à <a href="mailto:support@yourcompany.com">support@yourcompany.com</a>.
</p>
<p>Ceci est un nouveau paragraphe !</p>
<p><strong><em>Ceci est un nouveau paragraphe en gras et en italique.</em></strong></p>
</body>
</html>Version minifiée :
<title>Votre titre ici</title><div><img src="nuages.jpg"></div><h1>Ceci est un en-tête</h1><p>Envoyez-moi un e-mail à <a href="mailto:support@yourcompany.com">support@yourcompany.com</a>.</p><p>Ceci est un nouveau paragraphe !</p><p><strong><em>Ceci est un nouveau paragraphe en gras et en italique.</em></strong></p>Taille originale : 354 octets. Minifiée : 272 octets. Économie : 82 octets (23,16 %).
Beaucoup limitent la minification aux JS et CSS, mais elle est essentielle pour le HTML. Autrefois manuelle et fastidieuse, elle est aujourd'hui automatisée.
Via HTTP, le serveur compresse la page (GZIP majoritairement) avant envoi. Le navigateur décompresse. GZIP utilise DEFLATE, un algorithme sans perte repérant les répétitions.
Exemple (inspiré de gzip.org) : "Blah bla bla bla bla." devient compacté en référencant les motifs répétés, comme "B{lah b}[5,15]lah."
Le HTML regorge de répétitions : balises (<body></body>, <p>, <div>), attributs (class, href, src). GZIP excelle ici.
Inconvénient mineur : surcoût CPU serveur, négligeable aujourd'hui même en hébergement basique.
Avantages clés en ère mobile :
Minification : 3-10 % de réduction. Temps de chargement directements impactés.
Exemple : 10 fichiers de 50 Ko → 45 Ko. 1 000 visites/jour (10 pages) : 50 Mo/jour économisés (1,5 Go/mois).
Google PageSpeed recommande la minification HTML. Associez-la à GZIP : 70-90 % de réduction. Exemple : 50 Ko → 13,5 Ko/fichier. Économies : 365 Mo/jour (11 Go/mois). Pages ultra-rapides !
Simple et accessible.
WP Fastest Cache ou W3 Total Cache : activez minification HTML et GZIP en un clic. Pour minification seule : Minify HTML (HTML/CSS/JS).
Maintenez fichiers source (lisible) et minifiés. Outils : Compresseur HTML, Minifier HTML.
Ajoutez dans .htaccess (racine site) :
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
<FilesMatch "\\.(html?|txt|css|js|php|pl)$">
SetOutputFilter DEFLATE
</FilesMatch>Vérifiez avec cet outil. Complétez par optimisation CSS.
[]