La pré-compression des assets est une technique d'optimisation essentielle pour améliorer les performances d'un site web. En compressant les fichiers avant qu'ils ne soient envoyés au navigateur de l'utilisateur, on réduit leur taille, ce qui accélère le temps de chargement des pages.
La minification consiste à réduire la taille des fichiers textuels en supprimant les espaces, les sauts de ligne et les commentaires inutiles, tout en conservant leur fonctionnalité. Ce processus permet d'optimiser le temps de chargement des pages web, car des fichiers plus légers se téléchargent plus rapidement. La minification peut se faire dès l'origine à la création du fichier: par exemple sur les fichiers HTML, il vaut mieux apprendre à créer des pages avec du code HTML sémantique optimisé léger et optimisé pour Google.
La minification peut également inclure des techniques de combinaison, où plusieurs fichiers peuvent être parfois regroupés en un seul. Cela réduit le nombre de requêtes HTTP nécessaires pour charger une page, ce qui est particulièrement bénéfique pour les performances globales du site web. Les outils de minification, tels que des pré-processeurs CSS ou des générateurs de build, automatisent souvent ce processus.
Il est important de noter que la minification doit être effectuée avec précaution. En effet, un fichier minifié peut rendre le code difficile à lire et à déboguer. Pour cette raison, il est conseillé de conserver une version non minifiée
du fichier pour le développement et d'utiliser la version minifiée uniquement en production.
La minification est une étape utile avant la pré-compression, les deux opérations étant complémentaires pour obtenir le fichier le plus compact possible.
Cela consiste à modifier la manière dont le serveur doit envoyer un fichier textuel, soit en spécifiant une nouvelle extension de fichier, soit en spécifiant l'extension existante. Au lieu d'envoyer le fichier non compréssé, le serveur va indique au navigateur que celui-ci est pré-compréssé, et qu'il faut donc le décompresser avant de l'utiliser.
AddEncoding gzip .ico AddType image/x-icon .ico
Cette instruction peut par exemple être ajoutée à un fichier .htaccess pour spécifier que l'extension .ico (d'un fichier favicon.ico) ne sera plus envoyée telle qu'elle, mais sera pré-compréssée statiquement, et qu'elle devra être décompréssée avant utilisation.
Dans cet exemple, l'encodage gzip a été ajoutée en instruction: le fichier devra donc être fournit dans son état compréssé par cet algorithme de compression. Vous pouvez par exemple utiliser zopfli avec cette instruction dans la commande:
zopfli -i1000 favicon.ico
Cela vous produira un fichier comprimé avec zopfli, à l'aide de 1000 itérations. Le fichier sera nommé automatiquement avec l'extension .gz, qu'il faudra renommer conformément à votre choix. Prenez l'habitude de toujours effectuer une sauvegarde. Dans notre exemple, voici le processus:
favicon.ico en le renommant favicon-sauvegarde.icofavicon.ico.gz en favicon.icoLe nouveau fichier favicon.ico est désormais compréssé, et devra être décompréssé avant utilisation. Il est donc tout à fait normal qu'il ne soit pas exploitable tel quel par des logiciels d'édition ou de visualisation.
Uploadez simplement votre ficher favicon.ico et .htaccess. Effectuez un contrôle avec un outil comme websniffer pour vérifier le contenu de la requête HTTP. Nous allons effectuer une analyse de cette URL:
| Nom | Valeur |
|---|---|
| Content-Length | 15086 |
| Content-Encoding | - |
| Nom | Valeur |
|---|---|
| Content-Length | 5244 |
| Content-Encoding | gzip |
Lorsque les données sont envoyées par le serveur, celui-ci précise que les données sont compréssées: le navigateur va donc décomprésser à la volée, tout en transparence pour l'utilisateur. Par exemple, si vous sollicitez cette URL, votre navigateur va télécharger le fichier favicon.ico, dont le poids est de 5244 octets sur le serveur.
Il va également le décompresser avant de l'interpréter et de le fournir: vous obtiendrez donc la version décompréssée de 15086 octets.
Si vous developpez en utilisant des ressources externes que vous n'avez pas vous même conçues, comme par exemple bootstrap.min.css ou jquery.min.js, il peut être intéressant de stocker localement ces fichiers sur votre propre serveur, et de les servir en version pré-compréssée.
| Nom | Original | Pré-Compression |
|---|---|---|
| Content-Length | 232803 | 28147 |
| Content-Encoding | - | gzip |
| Nom | Original | Pré-Compression |
|---|---|---|
| Content-Length | 87533 | 29268 |
| Content-Encoding | - | gzip |
Si vous n'êtes toujours pas convaincu(e), il va me suffire de produire une démonstration ludique pour vous convaincre. Vous allez télécharger le fichier test.avi de 578 octets. Vous allez recevoir, en quelques secondes, un fichier décompréssé de plus de 650 Mo.
Un fichier SVG est un format d'image vectoriel qui offre une grande flexibilité et une qualité d'affichage optimale, quel que soit le niveau de zoom. Il est largement utilisé pour la création d'éléments graphiques web et d'illustrations techniques nécessitant une grande précision et une capacité de redimensionnement sans perte. Ces fichiers sont également de type texte, et sont soumis à la compression.
| Type | Poids |
|---|---|
| SVG (minifié, mais non compréssé) | 11,5 Ko |
| PNG optimisé | 184 Ko |
| AVIF (avec pertes) | 29 Ko |
Les fichiers SVG ont plusieurs avantages dans le cas de représentations simples: les images étant vectorielles, vous pouvez les redimensionner pour agrandir ou diminer la définition sans aucune perte de qualité, à l'inverse des formats matriciels comme le JPEG, PNG, AVIF, etc. L'autre avantage est qu'ils sont fortement compressibles:
| Type | Poids |
|---|---|
| SVG (minifié, mais non compréssé) | 11,5 Ko |
| SVG minifié et compréssé | 3,87 Ko |
Là encore, si vous effectuez une requête vers le fichier SVG compréssé, celui-ci sera décompressé avant de vous être restitué (vous obtiendrez donc le fichier de 11,5 Ko). Il vous faudra utiliser un outil comme websniffer pour analyser la requête HTTP:
| Nom | SVG | SVG compréssé |
|---|---|---|
| Content-Length | 11847 | 3963 |
| Content-Encoding | - | gzip |
A proprement parler tous les fichiers qui n'utilisent pas de compression dans leur format. Tous les fichiers à base de textes comme:
La pré-compression des données de serveur web consiste à compresser les fichiers statiques (HTML, CSS, JavaScript, images, etc.) avant qu'ils ne soient envoyés au navigateur du client. Cette technique présente plusieurs avantages notables en termes d'optimisation des performances et de l'expérience utilisateur.
La pré-compression des données serveur web est une technique simple et efficace pour optimiser les performances des sites web, améliorer l'expérience utilisateur et réduire les coûts liés à l'hébergement et à la consommation de données.
