Publicité

Si vous gérez un site Web, vous devez déjà savoir comment utiliser les bons formats d'image et optimisez vos images pour le web 10 outils gratuits d'images en ligne pour redimensionner, convertir et optimiserVous avez besoin d'outils d'édition par lots lorsque vous avez beaucoup de photos à traiter et très peu de temps. Nous vous présentons les meilleurs resizers, optimiseurs ou convertisseurs par lots disponibles en ligne. Lire la suite . Pourtant, alors que la compression d'image 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 pour cela: 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. Aucun de ces éléments n'est requis en HTML - ils existent pour faciliter la lecture du fichier. Le rognage de ces détails peut réduire la taille du fichier sans affecter quoi que ce soit.

Exemple de page HTML:

Ceci est un en-tête
Envoyez-moi un mail à [email protected].
Ceci est un nouveau paragraphe!
Il s'agit d'un nouveau paragraphe en gras et en italique.

Exemple de page HTML, minifiée:

Ceci est un en-tête
Envoyez-moi un mail à [email protected].
Ceci est un nouveau paragraphe!
Il s'agit d'un nouveau paragraphe en gras et en italique.

Taille d'origine: 354. Taille réduite: 272. Économies: 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 les minimiser à 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 recherche 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 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 Comment fonctionne la compression de fichiers?Comment fonctionne la compression de fichiers? Apprenez les bases de la compression de fichiers et la différence entre la compression avec perte et la compression sans perte. Lire la suite 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 deux nombres: à quelle distance est 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 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-la être:

Bla bla bla bla bla.

La deuxième occurrence renvoie à la première occurrence, qui a cinq caractères derrière et cinq caractères:

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 de trois:

Blah b [5,18].

Pensez maintenant à un fichier HTML typique et à la quantité de répétition qui s'y trouve. Presque toutes les balises, telles que, a une balise de fermeture correspondante, comme. En outre, de nombreuses balises sont répétées tout au long, telles que, , ,, etc. Les attributs sont également répétés souvent, notamment 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 CPU n'est plus 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 avez un hébergement web d'entrée de gamme Les meilleurs services d'hébergement Web: partagés, VPS et dédiésVous recherchez le meilleur service d'hébergement Web pour vos besoins? Voici nos meilleures recommandations pour votre blog ou site Web. Lire la suite .

Pourquoi vous devriez compresser et réduire

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

Chargements de page plus rapides

En moyenne, un minifieur HTML peut réduire la taille d'un fichier d'environ 3% avec les paramètres de base. Avec les paramètres avancés facultatifs, 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 disposez de 10 fichiers, chacun réduit de 50 Ko à 45 Ko pour une réduction totale de 50 Ko. Et disons que votre site Web dessert en moyenne 1 000 visiteurs par jour, chaque visite faisant 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 voir, la minification HTML est utile en elle-même, d'autant plus que votre site grandit, que les fichiers grossissent et que le trafic augmente. Notez que Consignes Google PageSpeed recommandez de réduire le HTML, donc si vous êtes sceptique, laissez-vous convaincre du contraire.

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 de 70 à 90% un fichier HTML. 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 à non réduit / 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 que de télécharger 13,5 Ko contre 50 Ko par page.

Comment compresser et réduire le 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, WP Fastest Cache 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 davantage le chargement des pages et réduisent l'utilisation de la bande passante.

Si vous seulement voulez une minification, nous recommandons Réduire le HTML brancher. Il 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: des 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 une infrastructure Web), vous pouvez gérer 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 apportez une modification à un fichier source.

Pour réduire, utilisez l'un de ces outils:

• HTMLCompressor
• HTML Minifier
• HTML Minifier (différent de celui ci-dessus)

Il s'agit d'une technique viable si vous vous êtes éloigné des CMS comme WordPress et utilisez maintenant générateurs de sites statiques 7 raisons d'abandonner votre CMS et d'envisager un générateur de site statiquePendant de nombreuses années, la publication d'un site Web a été difficile pour de nombreux utilisateurs. Les CMS comme WordPress ont changé cela, mais ils peuvent toujours prêter à confusion. Une autre alternative est un générateur de site statique. Lire la suite .

Activer la compression GZIP

Les étapes pour activer la compression GZIP peuvent différer selon le logiciel de serveur Web que vous utilisez. Apache étant 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é .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) $ 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 ^ Encodage de contenu:. * 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 11 outils utiles pour vérifier, nettoyer et optimiser les fichiers CSSVous souhaitez améliorer votre code CSS? Ces vérificateurs et optimiseurs CSS aideront à améliorer le code CSS, la syntaxe et à réduire vos pages Web. Lire la suite .