Activez la compression de texte !

Vous vous lancez dans l’optimisation du temps de chargement de votre site et Google PageSpeed Insights ou LightHouse vous incite à activer la compression de vos textes ? L’agence de performance Web 36 Pixels vous donne les clés pour mettre en place cette solution et améliorer la vitesse de votre site Internet !

La bonne nouvelle, c’est que la compression des fichiers est très simple à mettre en place et en quelques lignes de code que vous pourrez recopier, vous arriverez à activer la compressions de l’ensemble des textes de votre site. Vous utilisez WordPress pour votre site, c’est encore plus facile. Alors suivez le guide. Voici ce que vous découvrirez dans cet article :

Pourquoi faut-compresser les textes de son site web ?

Quand vous consultez une page, le serveur qui héberge le site Internet que vous consultez, par exemple un site WordPress, vous envoie tous les fichiers nécessaires à son bon affichage. Et cela peut représenter un poids important.

Parmi ces fichiers, nous retrouvons le contenu de votre page, sous forme d’une fichier HTML, les fichiers qui vons servir à la mise en forme de votre site, les fichiers CSS, les fichiers qui vont gérer les interactions sur votre site, le fichiers JS, mais aussi toutes les images ou vidéos présentes dans la page et enfin les typographies utilisées.

Dans un monde idéal, le poids d’une page web ne devrait pas excéder 1mo. Mais si la page est longue, si elle n’est pas particulièrement optimisée, il est tout à fait possible que cette page dépasse le 2 ou 3mo, voir beaucoup beaucoup plus. Le temps de chargement du site est donc augmenté et votre site parait lent. De son côté, votre taux de rebond augmente significativement…

L’objectif de la compression est de diminuer la taille de l’ensemble des fichiers envoyés. Le serveur compresse les données juste avant l’envoi de celles-ci, et le navigateur les récupère, les décompresse et les utilise pour afficher votre page.

Quels sont les différents formats de compression des fichiers web ?

Google PageSpeed Insights vous propose 3 formats de compression pour votre site web, les formats Gzip, Deflate ou Brotli. Voici une petite présentation de ces différents formats :

  • La compression GZIP : elle est basée sur la répétition de code. Cette compression va donc trouver des lignes de code similaires et les remplacer temporairement par un code plus court, limitant ainsi la taille de vos fichiers. Cette méthode de compression est particulièrement efficace pour les fichiers HTML ou CSS qui utilisent très souvent la même succession de caractère.
  • La compression Deflate : très ancien format de compression comparativement à l’histoire de l’informatique (première version en 1950), la compression Deflate est à l’origine de nombreux algorithme de compression, notamment le GZIP ou le .png.
  • La compression Brotli, moins connu que la compression GZIP a été inventé par Google. L’entreprise affirme qu’elle permet un gain supplémentaire par rapport au GZIP de l’ordre de 15% pour le js et de 20% pour le CSS. La compression Brotli est aujourd’hui compatible avec l’équivalent de 92% des navigations sur Internet (source : CanIUse). Encore faut-il que le serveur qui héberge votre site web vous propose cette fonctionnalité. Dernière information tout de même, cette compression n’est pas efficace sur tous les type de fichiers.

Comment activer la compression de vos textes ?

La compression de vos fichiers se met en place au niveau serveur. La solution en place va donc dépendre du type de serveur utilisé. Si l’on devait essayer de répondre au plus grand nombre, on s’intéresserait surtout à la compression sur serveur Apache, représentant la plus grande majorité des hébergement aujourd’hui, du fait de son coût, mais aussi aux serveur NGINX, plus cher, mais qui représente un gain supérieur en matière de performance web.

Si vous utilisez apache, voici le code source à ajouter à votre fichier .htaccess, qui doit se trouver à la racine de votre serveur :

<IfModule mod_deflate.c>
 SetOutputFilter DEFLATE
 DeflateCompressionLevel 9
</IfModule>

<Location />
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/atom_xml
 AddOutputFilterByType DEFLATE application/x-javascript

 # Pour les proxies
 Header append Vary User-Agent env=!dont-vary
</Location>

Si vous utilisez Nginx, voici le code à ajouter à votre fichier nginx.conf pour mettre en place la compression GZIP :

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 4 32k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/x-font-ttf application/javascript font/eot font/opentype image/svg+xml image/x-icon text/plain;

Si vous êtes sur un serveur IIS, la mise en place de la compression n’est pas compliqué non plus, je vous laisse faire une recherche sur Internet car c’est moins notre domaine de prédilection.

La compression Brotoli, plus puissante, nécessite dans la majorité des cas d’avoir la main sur son serveur pour activer cette fonctionnalité. Réservés aux experts donc qui trouveront facilement le code sur Internet pour le mettre en place.

Activer la compression de texte GZIP sur WordPress.

La compression GZIP présentant de très bons retours et ayant un impact important sur le chargement de votre site, il existe une multitude de plugin pour la mettre en place. Sachez dans un premier temps que vous pouvez utiliser les méthodes présenter dans les paragraphes précédents.

Si vous souhaitez passer par des plugins WordPress pour activer la compression GZIP, en voici quelques uns :

La compression, une méthode simple et efficace.

Soyons clair entre nous, il existe une multitude de solutions pour améliorer la performance d’un site Internet et améliorer son temps de chargement. Parmi ces solutions, la mise en place de la compression des textes via l’utilisation de la compression GZIP est l’une des plus simple à mettre en oeuvre et qui présente l’un des meilleurs retours. Passer à côté de cette optimisation serait une erreur.

Alors retroussez-vous les manches, copiez les lignes de code que nous vous avons présenté ou téléchargez les plugins WordPress proposés et mettez en place cette compression pour accélérer facilement le temps de chargement de vos pages.

Vous ne pensez pas avoir les compétences techniques pour le faire ou souhaitez la mettre en place en toute sérénité, faites appel à l’agence 36 Pixels, spécialisée en performance web, et contactez-nous !

Articles liés