RWEB 0078 Compresser les fichiers CSS, JavaScript, HTML et SVG

Description

Compresser les feuilles de style CSS, les bibliothèques JavaScript ainsi que les fichiers HTML pour limiter l’utilisation de la bande passante et améliorer les temps de chargement. L’algorithme GZIP est un standard de la compression coté serveur, il permet de compresser à la volée les ressources avant de les envoyer aux clients. Plus récemment, BROTLI a été popularisé avec des performances accrues, il est supporté par tous les navigateurs les plus répandus.

Exemple

Pour utiliser BROTLI dans Apache, il suffit d’ajouter la configuration suivante :

# compress html, text, xml, css, javascript
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript

# Or, compress certain file types in a specific directory:
<Directory "/your-directory">
    AddOutputFilterByType BROTLI_COMPRESS text/html
</Directory>

Le serveur web NGINX gère par défaut la compression GZIP mais uniquement pour les fichiers HTML. Pour l’activer sur les images et autres ressources se référer à cette page: https://www.digitalocean.com/community/tutorials/how-to-improve-website-performance-using-gzip-and-nginx-on-ubuntu-20-04

Pour installer et configurer brotli sur NGINX, voir https://github.com/google/ngx_brotli.

Principe de validation