Home-theater-designers
Si vous exploitez un site Web, vous devez déjà savoir comment utiliser les bons formats d'image et optimisez 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 passerons en revue les deux principales méthodes de réduction des fichiers HTML, pourquoi les fichiers HTML doivent être réduits et comment procéder.
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 des caractères et des lignes inutiles dans le code source. Pensez à l'indentation, aux commentaires, aux lignes vides, etc. Aucun de ces éléments n'est requis en HTML - ils existent pour rendre le fichier plus facile à lire. Couper ces détails peut réduire la taille du fichier sans rien affecter.
Exemple de page HTML :
Your Title Here
Send me mail at support@yourcompany.com .
This is a new paragraph!
This is a new paragraph in bold and italics.
Format original : 354. Format minimisé : 272. Économies : 82 (23,16 %).
De nombreux développeurs Web et propriétaires de sites réservent la minification uniquement aux fichiers JS et CSS, 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 les réduire à 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 à 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 les 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 : jusqu'où remonte la référence et combien de caractères référençons-nous.
Considérez une chaîne de texte comme celle-ci (exemple tiré du site Web GZIP) :
Blah blah blah blah blah.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 comme suit :
Blah b{lah b}{lah b}{lah b}lah.La deuxième occurrence renvoie à 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 l'occurrence suivante 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 suffisamment 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 :
Blah 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 tout au long, telles que
,
,
![]()
,
, etc. Les attributs sont également répétés souvent, y compris
class,
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 plus vraiment un problème de nos jours, il est presque toujours préférable d'activer GZIP que de s'en passer, même si vous disposez d'un hébergement Web d'entrée de gamme.
Pourquoi vous devriez compresser et minifier
Il y a deux avantages principaux, qui sont tous deux cruciaux dans le paysage Web d'aujourd'hui, fortement mobile.
Chargements de pages 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 en option, un fichier HTML peut être réduit de 3 à 7 % supplémentaires, pour une réduction potentielle allant jusqu'à 10 %. Cela se traduit directement par des temps de chargement de page plus rapides.
Moins de bande passante utilisée
Supposons que vous ayez 10 fichiers, chacun réduit de 50 Ko à 45 Ko pour une réduction totale 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 votre utilisation de la bande passante de 50 Mo par jour (1,5 Go par mois).
Compression + Minification
Comme vous pouvez le constater, la minification HTML est utile en soi, d'autant plus que votre site s'agrandit, que les fichiers s'agrandissent et que le trafic augmente. Noter que Directives PageSpeed de Google recommande de minifier le HTML, donc si vous êtes sceptique, laissez-vous convaincre du contraire.
comment créer un compte bitmoji
Mais ce qui est génial avec l'optimisation HTML, c'est que vous n'avez pas à choisir la minification ou la compression. Vous pouvez faire les deux ! En fait, vous devrait 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 prudente, les fichiers HTML minifiés passeraient de 45 Ko à 13,5 Ko chacun, pour une réduction totale de 365 Ko. Par rapport au 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 considérablement 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 minifier du HTML
Heureusement, ni l'un ni l'autre n'est très difficile de nos jours, et vous n'avez pas besoin de beaucoup de savoir-faire technique pour les configurer.
Plugins WordPress
Si vous exécutez un site WordPress, tout ce que vous avez à faire est d'installer un plugin et vous pouvez 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, Cache le plus rapide de WP et Cache total W3 les deux ont 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 tu seul voulez minification, nous recommandons le Minifier le HTML brancher. C'est simple, prend en charge HTML/CSS/JS et vous permet de modifier un peu la méthode de minification (par exemple, supprimer ou non
http:et
https:à partir d'URL).
Minificateurs 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', qui n'est pas minifié pour une édition facile, et un ensemble 'minifié', que vous créez chaque fois que vous modifiez un fichier source.
Pour minifier, utilisez l'un de ces outils :
- Compresseur HTML
- Minificateur HTML
- Minificateur HTML (différent de celui ci-dessus)
Il s'agit d'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 verrons comment l'activer à l'aide de .htaccess.
Connectez-vous à votre serveur Web via FTP, puis créez un fichier appelé
.htaccessdans le répertoire racine. Modifiez le fichier .htaccess pour avoir les paramètres suivants :
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.*
SetOutputFilter DEFLATE
Vous ne savez pas si la compression fonctionne sur votre site Web ? Testez-le avec cet outil .
Pour une efficacité ultime, vous devez également Découvrez comment vérifier, nettoyer et optimiser votre CSS .
Partager Partager Tweeter E-mail Devriez-vous passer à Windows 11 immédiatement ?Windows 11 arrive bientôt, mais faut-il mettre à jour dès que possible ou attendre quelques semaines ? Découvrons-le.
Lire la suite Rubriques connexes- La programmation
- HTML
- Développement web
Joel Lee est le rédacteur en chef de MakeUseOf depuis 2018. Il est titulaire d'un B.S. en informatique et plus de neuf ans d'expérience professionnelle en rédaction et en édition.
Plus de Joel LeeAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner