Partager:
Comment fonctionne le HTML compressé et pourquoi vous pouvez en avoir besoin
Si vous exploitez un site Web, vous devez déjà savoir utiliser les formats d'image appropriés et optimiser vos images pour le Web. 10 outils gratuits pour les images de lot en ligne pour redimensionner, convertir et optimiser 10 outils gratuits pour les images de lot en ligne pour redimensionner, convertir et optimiser Vous avez besoin outils de retouche par lots lorsque vous avez beaucoup de photos à traiter et très peu de temps. Nous vous présentons les meilleurs réducteurs, optimiseurs ou convertisseurs de lots disponibles en ligne. Lire la suite . Pourtant, bien que la compression d'image soit 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 méthodes principales pour réduire les 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 sonnent similaires à la surface, mais sont en réalité 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. Aucun de ces éléments n'est requis en HTML - ils existent pour faciliter la lecture du fichier. Réduire ces détails peut réduire la taille du fichier sans rien affecter.
Exemple de page HTML:
Votre titre ici 
C'est un en-tête
Envoyez moi un mail à [email protected].
Ceci est un nouveau paragraphe!
Ceci est un nouveau paragraphe en gras et en italique.
Exemple de page HTML, minifiée:
Votre titre ici 
C'est un en-tête
Envoyez moi un mail à [email protected].
Ceci est un nouveau paragraphe!
Ceci est un nouveau paragraphe en gras et en italique.
Taille originale: 354. Taille réduite: 272. Économies: 82 (23,16%).
De nombreux développeurs Web et propriétaires de sites réservent la minification pour les 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 souvent que les fichiers JS et CSS, il était tout simplement trop fastidieux de les minimiser à chaque fois. 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 soit 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 Comment fonctionne la compression de fichier? Comment fonctionne la compression de fichier? On pourrait soutenir que la compression de fichiers est au cœur du fonctionnement du Web moderne, car elle nous permet de partager des fichiers dont le transfert prendrait trop de temps. Mais comment ça marche? Lire plus appelé DEFLATE.
L'algorithme recherche les occurrences de répétition de texte dans le fichier HTML, puis remplace ces occurrences de répétition par des références à une occurrence précédente. Chaque référence est simplement composée de deux chiffres: à quelle distance se trouve la référence et combien de caractères référençons-nous.
Considérons une chaîne de texte comme celle-ci (exemple tiré du site Web de GZIP):
Bla bla bla bla bla.L'algorithme reconnaît la répétition suivante:
Bla bla bla bla bla.La première occurrence est notre référence, alors laissez-le être:
Bla bla bla bla bla.La deuxième occurrence renvoie à la première occurrence, qui a cinq caractères de retard et 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 et é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 prochains caractères sont les trois premiers caractères de la référence, il est donc étendu de trois:
Blah b [5,18].Pensez maintenant à un fichier HTML typique et au nombre de répétitions qu'il contient. Presque tous les tags, tels que Le seul inconvénient est que le serveur Web nécessite un peu plus de processeur pour exécuter la compression chaque fois qu'une page est demandée. Mais puisque le processeur n’est plus un problème pour le moment, il est presque toujours préférable d’activer GZIP que de s’en passer, même si vous avez un hébergement Web d’entrée de gamme. pour vos besoins? Que ce soit pour un petit blog ou pour un site Web d'entreprise majeur, voici nos meilleures recommandations. Lire la suite . Il existe deux avantages principaux, qui sont tous deux cruciaux dans le paysage Web actuel caractérisé par une forte densité de mobiles.. En moyenne, un minifier HTML peut réduire la taille d'un fichier d'environ 3% avec les paramètres de base. Grâce aux paramètres avancés facultatifs, un fichier HTML peut être réduit de 3 à 7%, pour une réduction potentielle pouvant atteindre 10%. Cela se traduit directement par des temps de chargement de page plus rapides. Supposons que vous avez 10 fichiers, chacun étant réduit de 50 Ko à 45 Ko, pour un retrait total de 50 Ko. Et disons que votre site Web reçoit en moyenne 1 000 visiteurs par jour, chaque visite comptant en moyenne dix pages. La minification HTML à elle seule réduit votre utilisation de bande passante de 50 Mo par jour (1,5 Go par mois). Comme vous pouvez le constater, la minification HTML est utile en soi, en particulier à mesure que votre site grossit, que les fichiers grandissent et que le trafic augmente. Notez que les consignes de Google relatives à PageSpeed recommandent de minimiser le code HTML. Si vous êtes sceptique, laissez-vous convaincre du contraire.. Mais ce qui est bien 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 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 conservatrice, les fichiers HTML minifiés passeraient de 45 Ko à 13,5 Ko chacun, pour un retrait total de 365 Ko. Par rapport aux sites non minés / non compressés, la bande passante de votre site a été 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 que de télécharger 13,5 Ko contre 50 Ko par page.. Heureusement, aucune de ces méthodes n’est très difficile de nos jours et vous n’avez pas besoin de beaucoup de savoir-faire technique pour les installer.. Si vous utilisez un site WordPress, il vous suffit d'installer un plug-in et de 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 les deux des paramètres qui vous permettent d'activer la minification HTML et la compression GZIP, entre autres fonctionnalités permettant d'accélérer le chargement des pages et de réduire l'utilisation de la bande passante.. Si vous seulement vous voulez une minification, nous vous recommandons le plugin Minify HTML. C’est simple, supporte HTML / CSS / JS, et vous permet d’ajuster un peu la méthode de minification (par exemple, si vous voulez supprimer Si vos fichiers HTML sont statiques (c’est-à-dire qu’ils ne sont pas générés dynamiquement par un CMS ou une infrastructure Web), vous pouvez gérer deux ensembles de fichiers HTML: a “la source” set, qui n’est pas finie pour un montage facile, et un “minifié” set, que vous créez chaque fois que vous modifiez un fichier source. Pour minimiser, utilisez l'un de ces outils: Ceci est une technique viable si vous vous êtes éloigné des CMS tels que WordPress et que vous utilisez maintenant des générateurs de sites statiques. 7 raisons d'abandonner votre CMS et d'envisager un générateur de site statique 7 raisons d'abandonner votre CMS et d'envisager un générateur de site statique un site Web était difficile pour de nombreux utilisateurs. Les CMS comme WordPress ont changé cela, mais ils peuvent toujours être déroutants. Une autre alternative est un générateur de site statique. Lire la suite . La procédure d'activation de la compression GZIP peut varier selon le logiciel de serveur Web utilisé. Apache étant 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é Vous ne savez pas si la compression fonctionne sur votre site Web? Testez-le avec cet outil. Cet article a-t-il été utile? Maintenant que vous compressez et réduisez au minimum, vos pages Web devraient se charger plus rapidement et utiliser moins de bande passante. Si vous avez des questions, n'hésitez pas à les poser ci-dessous! En savoir plus sur: HTML, Développement Web., a une balise de fermeture correspondante, comme . En outre, de nombreuses étiquettes sont répétées, 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.Pourquoi devriez-vous compresser et minimiser
Charge de page plus rapide
Moins de bande passante utilisée
Compression + Minification
Comment compresser et réduire HTML
Plugins WordPress
http: et https: des URL).Minificateurs HTML statiques
Activer la compression GZIP
.htaccess dans le répertoire racine. Modifiez le fichier .htaccess pour définir les paramètres suivants: