Si vous exploitez un site Web, vous devez déjà savoir comment utiliser les bons formats d'image et optimiser vos images pour le Web. Pourtant, alors que la compression d'images est une pratique bien connue, la compression HTML a tendance à être négligée, ce qui est dommage car les avantages en valent la peine.

Dans cet article, nous allons passer en revue les deux principales méthodes de réduction des fichiers HTML, pourquoi les fichiers HTML doivent être réduits et comment s'y prendre.

Compression vs minification

En ce qui concerne l'optimisation des fichiers HTML, il existe deux méthodes principales :compression et minification . Ils semblent similaires en surface, mais sont en fait deux techniques distinctes, alors ne les confondez pas.

Minification

Vous pouvez considérer la minification comme la suppression de caractères et de lignes inutiles dans le code source. Pensez à l'indentation, aux commentaires, aux lignes vides, etc. Rien de tout cela n'est requis en HTML - ils existent pour rendre le fichier plus facile à lire. La réduction de ces détails peut réduire la taille du fichier sans rien affecter.

Exemple de page HTML :

 
  
  
  
  
 

 
 
Ceci est un en-tête
 
 

Envoyez-moi un e-mail à [email protected]
.
 
 

Ceci est un nouveau paragraphe !
 
 

Ceci est un nouveau paragraphe en gras et en italique.
 
  
  

Exemple de page HTML, minifiée :

Ceci est un en-tête

Envoyez-moi un e-mail à [email protected]
.

Ceci est un nouveau paragraphe !

Ceci est un nouveau paragraphe en gras et en italique. 

Taille d'origine :354. Taille réduite :272. Économie :82 (23,16 %).

De nombreux développeurs Web et propriétaires de sites réservent la minification aux fichiers JS et CSS uniquement, mais cette pratique obsolète est une erreur. La minification HTML est également importante.

Dans les années 2000, les outils de minification étaient rares. Vous deviez réduire manuellement les fichiers à chaque fois que quelque chose changeait. Étant donné que les fichiers HTML changent plus fréquemment que les fichiers JS et CSS, il était tout simplement trop fastidieux de minifier à chaque fois à l'époque. De nos jours, c'est un point discutable.

Compression

Lorsque les utilisateurs visitent votre site Web, ils le font en utilisant le protocole HTTP. Le navigateur envoie une demande à votre serveur Web pour une page spécifique, votre serveur Web trouve la page, puis renvoie le contenu de cette page au navigateur du visiteur.

Mais comme le protocole HTTP prend en charge la compression, votre serveur Web peut compresser la page avant de l'envoyer au visiteur (en supposant que la compression est activée dans les paramètres de votre serveur), puis le navigateur du visiteur peut décompresser la page dans son état d'origine.

Le schéma de compression le plus courant est GZIP , qui est un format de fichier qui utilise un algorithme de compression sans perte appelé DEFLATE.

L'algorithme recherche des occurrences répétées de texte dans le fichier HTML, puis remplace ces occurrences répétées par des références à une occurrence précédente. Chaque référence est simplement constituée de deux nombres :à quelle distance remonte la référence et à combien de caractères faisons-nous référence.

Considérez une chaîne de texte comme celle-ci (exemple tiré du site Web de GZIP) :

Blah bla bla bla bla. 

L'algorithme reconnaît la répétition suivante :

B{lah b}{lah b}{lah b}{lah b}lah. 

La première occurrence est notre référence, alors laissez-la :

Blah b{lah b}{lah b}{lah b}lah. 

La deuxième occurrence fait référence à la première occurrence, qui est de cinq caractères de retard et de cinq caractères de long :

Blah b[5,5]{lah b}{lah b}lah. 

Mais dans ce cas, l'algorithme reconnaît que la prochaine occurrence est la même séquence de caractères, il étend donc la longueur de référence de cinq autres :

Blah b[5,10]{lah b}lah. 

Et encore :

Blah b[5,15]lah. 

Et l'algorithme est assez intelligent pour se rendre compte que les trois caractères suivants sont les trois premiers caractères de la référence, il s'étend donc par trois :

Blala b[5,18]. 

Pensez maintenant à un fichier HTML typique et au nombre de répétitions qu'il contient. Presque toutes les balises, telles que

, a une balise de fermeture correspondante, comme

. De plus, de nombreuses balises sont répétées partout, telles que

,

,

,

, etc. Les attributs sont également répétés souvent, y compris

classe 

,

href 

, et

src 

. Il est facile de comprendre pourquoi la compression GZIP est si efficace avec HTML.

Le seul inconvénient est que le serveur Web a besoin d'un peu plus de CPU pour exécuter la compression à chaque fois qu'une page est demandée. Mais comme le processeur n'est pas vraiment un problème de nos jours, il est presque toujours préférable d'activer GZIP plutôt que de s'en passer, même si vous avez un hébergement Web d'entrée de gamme.

Pourquoi vous devriez compresser et réduire

Il y a deux avantages principaux, qui sont tous deux cruciaux dans le paysage Web actuel très mobile.

Chargements de page plus rapides

En moyenne, un minificateur HTML peut réduire la taille d'un fichier d'environ 3 % avec des paramètres de base. Avec des paramètres avancés facultatifs, un fichier HTML peut être réduit de 3 à 7 % supplémentaires, pour une réduction potentielle pouvant aller jusqu'à 10 %. Cela se traduit directement par des temps de chargement de page plus rapides.

Moins de bande passante utilisée

Disons que vous avez 10 fichiers, chacun réduit de 50 Ko à 45 Ko pour un rétrécissement total de 50 Ko. Et disons que votre site Web accueille en moyenne 1 000 visiteurs par jour, chaque visite représentant en moyenne dix pages. La minification HTML à elle seule réduit l'utilisation de votre bande passante de 50 Mo par jour (1,5 Go par mois).

Compression + Minification

Comme vous pouvez le voir, la minification HTML est utile en soi, d'autant plus que votre site grandit, que les fichiers grossissent et que le trafic augmente. Notez que les directives PageSpeed ​​de Google recommandent de réduire le code HTML, donc si vous êtes sceptique, laissez cela vous convaincre du contraire.

Mais ce qui est formidable avec l'optimisation HTML, c'est que vous n'avez pas à choisir entre la minification ou la compression. Vous pouvez faire les deux ! En fait, vous devriez faire les deux.

En moyenne, vous pouvez vous attendre à ce que la compression GZIP réduise un fichier HTML de 70 à 90 %. En utilisant l'exemple ci-dessus avec une estimation de compression conservatrice, les fichiers HTML minifiés passeraient de 45 Ko à 13,5 Ko chacun, pour un rétrécissement total de 365 Ko. Par rapport à non minifié/non compressé, la bande passante de votre site est désormais réduite de 365 Mo par jour (11 Go par mois).

Et en plus des économies de bande passante, chaque page se charge beaucoup plus rapidement car le navigateur de l'utilisateur final n'a besoin de télécharger que 13,5 Ko contre 50 Ko par page.

Comment compresser et réduire le code HTML

Heureusement, ni l'un ni l'autre ne sont très difficiles de nos jours, et vous n'avez pas besoin de beaucoup de savoir-faire technique pour les configurer.

Plugins WordPress

Si vous gérez un site WordPress, tout ce que vous avez à faire est d'installer un plugin et vous pourrez profiter des avantages de la compression et de la minification.

La plupart des plugins de mise en cache font plus que simplement mettre en cache des pages. Par exemple, WP Fastest Cache et W3 Total Cache ont tous deux des paramètres en un clic qui vous permettent d'activer la minification HTML et la compression GZIP, entre autres fonctionnalités qui accélèrent encore le chargement des pages et réduisent l'utilisation de la bande passante.

Si vous seulement voulez minification, nous vous recommandons le plugin Minify HTML. C'est simple, prend en charge HTML/CSS/JS et vous permet de modifier un peu la méthode de minification (par exemple, s'il faut supprimer

http : 

et

https : 

à partir des URL).

Miniificateurs HTML statiques

Si vos fichiers HTML sont statiques (c'est-à-dire qu'ils ne sont pas générés dynamiquement par un CMS ou un framework Web), vous pouvez conserver deux ensembles de fichiers HTML :un ensemble "source", non minifié pour faciliter l'édition, et un ensemble "minifié", que vous créez chaque fois que vous apportez une modification à un fichier source.

Pour minifier, utilisez l'un de ces outils :

• Compresseur HTML
• Minificateur HTML
• Minificateur HTML (différent de celui ci-dessus)

C'est une technique viable si vous vous êtes éloigné des CMS comme WordPress et que vous utilisez maintenant des générateurs de sites statiques.

Activer la compression GZIP

Les étapes pour activer la compression GZIP peuvent différer selon le logiciel de serveur Web que vous utilisez. Étant donné qu'Apache est l'option la plus populaire, nous expliquerons comment l'activer à l'aide de .htaccess.

Connectez-vous à votre serveur Web via FTP, puis créez un fichier appelé

.htaccess 

dans le répertoire racine. Modifiez le fichier .htaccess pour avoir les paramètres suivants :

 
 mod_gzip_on Oui 
 mod_gzip_dechunk Oui 
 fichier mod_gzip_item_include .(html?|txt|css|js|php|pl)$ 
 gestionnaire mod_gzip_item_include ^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.* 
  
  
 SetOutputFilter DEFLATE 
  

Vous ne savez pas si la compression fonctionne sur votre site Web ? Testez-le avec cet outil.

Pour une efficacité optimale, vous devez également apprendre à vérifier, nettoyer et optimiser votre CSS.

[]