Réduisez la taille de votre site Web avec Gzip et dégonflez la compression
La vitesse de votre site Web est importante, car un site Web plus rapide réduira considérablement votre taux de rebond. La compression de vos fichiers côté serveur est un moyen simple de réduire la taille de votre site Web, ce qui accélère le chargement.
Sommaire
Encodage de contenu, expliqué
Chaque fois que vous essayez d'accéder à un site Web, votre navigateur envoie une demande GET au serveur, qui répond avec le code de la page Web. Cela fonctionne, mais l'envoi du code prend du temps, en particulier pour les utilisateurs mobiles sur des connexions lentes. Chaque kilo-octet compte.
Le HTML est très répétitif. Chaque
la balise a une balise de fermeture similaire, et c'est tout simplement du texte de toute façon. Cela signifie qu'il se comprime très facilement.
La plupart des navigateurs prennent en charge le HTML compressé, et ils vous diront s’ils le font avec un Accept-Encoding
en-tête dans la requête GET à votre serveur:
Accept-Encoding: gzip, deflate
Cela signifie que le client peut décompresser les fichiers compressés avec gzip
ou deflate
. Votre serveur peut écouter cet en-tête puis renvoyer un fichier HTML compressé avec gzip
avec l'en-tête:
Content-Encoding: gzip
Vous pouvez gérer toutes sortes de fichiers de manière similaire, y compris les réponses CSS, JavaScript, XML et JSON API. Tous sont du texte sous le capot, et tous peuvent être compressés.
Activer la compression dans Nginx
Heureusement, c'est un processus assez simple. Nginx a un encodage gzip intégré, il vous suffit de l'activer en ajoutant le code suivant au fichier de configuration, généralement situé à /etc/nginx/nginx.conf
:
gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript; # Disable for IE < 6 because there are some known problems gzip_disable "MSIE (1-6).(?!.*SV1)"; # Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6 gzip_vary on;
Cela active le module gzip et le configure pour compresser la plupart des fichiers texte.
Activation de la compression dans Apache
Pour Apache, vous devrez ouvrir le fichier de configuration Apache, généralement situé à l'un des emplacements suivants:
- /etc/apache2/httpd.conf
- /etc/apache2/apache2.conf
- /etc/httpd/httpd.conf
- /etc/httpd/conf/httpd.conf
Ensuite, assurez-vous que les lignes suivantes ne sont pas commentées pour activer le module de dégonflage:
LoadModule filter_module modules/mod_filter.so LoadModule deflate_module modules/mod_deflate.so
Enregistrez et rechargez Apache, et vous pouvez vérifier si le module est chargé avec:
apachectl -t -D DUMP_MODULES | grep deflate
Si c'est le cas, vous pouvez ouvrir la configuration de sauvegarde et activer l'encodage de contenu avec la directive AddOutputFilter:
SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript
Vérification de l'activation de la compression
Vous pouvez vérifier si votre serveur Web se comprime correctement à partir de ce test de compression en ligne ou en inspectant les en-têtes de réponse dans les outils de développement Chrome.
Comme vous pouvez le voir, la compression de howtogeek.com se traduit par une économie de 77%, à seulement 32 Ko.
Compression manuelle des images
Les images fonctionnent un peu différemment, car elles ne sont pas du texte et ne se compressent pas aussi facilement. Vous pouvez toujours compresser des images avec gzip, mais vous n’économiserez pas beaucoup d’espace.
Au lieu de cela, vous souhaiterez utiliser la compression JPEG traditionnelle. JPEG a un paramètre de qualité, et un JPEG réglé à 70% de qualité est presque impossible à distinguer d'un fichier de qualité à 100%, avec des économies d'espace considérables.
Vous pouvez le faire manuellement dans Photoshop ou un autre éditeur de texte, ou vous pouvez traiter un dossier entier d'images à la fois avec ImageMagick:
for f in *.jpg; do convert -quality 70 $f $f; done
Si vos images sont encore trop grandes, vous pouvez réduire davantage la qualité, mais 70% est une bonne note pour la compression générale. Assurez-vous que la résolution de vos images n'est pas non plus inutilement élevée.
La compression n'est qu'une partie de l'accélération de votre site Web. Vous pouvez lire notre guide pour accélérer un site Web lent pour en savoir plus.
★★★★★