Outre l'élimination des téléchargements de ressources inutiles, la meilleure chose à faire pour améliorer la vitesse de chargement des pages consiste à réduire la taille globale de téléchargement en optimisant et en compressant les ressources restantes.
Principes de base de la compression des données
Une fois que vous avez configuré votre site Web pour éviter de télécharger des ressources inutilisées, l'étape suivante consiste à compresser toutes les ressources éligibles restantes que le navigateur doit télécharger. En fonction du type de ressource (texte, images, polices, etc.), vous avez le choix entre de nombreuses techniques différentes: outils génériques pouvant être activés sur le serveur Web, optimisations du prétraitement pour des types de contenus spécifiques et optimisations spécifiques à une ressource nécessitant une intervention du développeur.
Pour optimiser les performances, vous devez combiner toutes les techniques suivantes:
- La compression est le processus d’encodage des informations en utilisant moins de bits.
- L'élimination des données inutiles permet toujours d'obtenir les meilleurs résultats.
- Il existe de nombreuses techniques et algorithmes de compression différents.
- Diverses techniques sont nécessaires pour obtenir une compression optimale.
Le processus permettant de réduire la taille des données s'appelle la compression des données. De nombreuses personnes ont contribué à améliorer les taux de compression, la vitesse de compression et la mémoire requise par divers algorithmes de compression à l'aide d'algorithmes, de techniques et d'optimisations.
Une présentation complète de la compression des données dépasse largement le cadre de ce guide. Toutefois, il est important de comprendre, dans les grandes lignes, le fonctionnement de la compression et les techniques que vous pouvez utiliser pour réduire la taille des différents éléments requis par vos pages.
Pour illustrer les principes de base de ces techniques, examinons le processus d'optimisation d'un format de message texte simple, inventé uniquement pour cet exemple:
# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA
- Les messages peuvent contenir des annotations arbitraires (parfois appelées commentaires) indiquées par le préfixe "#". Elles n'affectent en rien la signification du message ni son comportement.
- Les messages peuvent contenir des headers, qui sont des paires clé/valeur (séparées par
":"dans l'exemple précédent) qui apparaissent au début du message. - Les messages comportent des charges utiles de texte.
Que pouvez-vous faire pour réduire la taille du message précédent, qui commence à 200 caractères ?
- Le commentaire est intéressant, mais il n'a aucune incidence sur la signification du message. Éliminez-le lors de la transmission du message.
- Il existe de bonnes techniques pour encoder les en-têtes de manière efficace. Par exemple, si vous savez que tous les messages contiennent les termes "format" et "date", vous pouvez les convertir en ID entiers courts et les envoyer simplement. Cependant, comme cela peut ne pas être vrai, il est préférable de le laisser tel quel pour le moment.
- La charge utile ne contient que du texte. Bien que nous ne sachions pas vraiment quel est son contenu (apparemment, il utilise un
"secret-cipher"), le simple fait de le regarder montre qu'il contient beaucoup de redondances. Par exemple, au lieu d'envoyer des lettres répétées, vous pouvez simplement compter le nombre de lettres répétées et les encoder plus efficacement. Par exemple,"AAA"devient"3A", ce qui représente une séquence de trois A.
La combinaison de ces techniques produit le résultat suivant:
format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A
Le nouveau message contient 56 caractères, ce qui signifie que vous avez compressé le message d'origine de 72%. C'est une réduction considérable !
Cet exemple montre comment les algorithmes de compression peuvent réduire efficacement la taille de transfert des ressources textuelles. En pratique, les algorithmes de compression sont beaucoup plus sophistiqués que l'exemple précédent et, sur le Web, ils peuvent être utilisés pour réduire considérablement les temps de téléchargement des ressources. Grâce à la compression des éléments textuels, une page Web peut passer moins de temps à charger des ressources, ce qui permet aux utilisateurs de voir les effets de ces ressources plus rapidement que sans compression.
Minification: prétraitement et optimisations spécifiques au contexte
La première technique abordée ici est la minification. Bien que la minimisation ne soit pas strictement un algorithme de compression, il s'agit d'un moyen de supprimer les caractères inutiles et redondants utilisés dans le code source afin de rendre les ressources plus lisibles pour les humains. Cependant, cette lisibilité n'est pas nécessaire pour maintenir la fonctionnalité de ce code source sur les sites Web de production et peut retarder le chargement des ressources sur le Web.
La minimisation est un type d'optimisation spécifique au contenu qui peut réduire considérablement la taille des ressources fournies. Il est préférable d'appliquer les optimisations dans le cadre de votre processus de compilation et de déploiement. Par exemple, les bundlers sont un type de logiciel couramment utilisé qui peut automatiquement minimiser des ressources juste avant le déploiement d'un nouveau code de production sur un site Web.
Le meilleur moyen de compresser les données redondantes ou inutiles est de les supprimer. Cependant, vous ne pouvez pas simplement supprimer des données arbitraires. Toutefois, dans certains contextes où nous avons des connaissances spécifiques au contenu du format de données et de ses propriétés, il est possible de réduire considérablement la taille de la charge utile sans affecter sa signification ou ses fonctionnalités réelles.
<html>
<head>
<style>
/* awesome-container is only used on the landing page */
.awesome-container {
font-size: 120%;
}
.awesome-container {
width: 50%;
}
</style>
</head>
<body>
<!-- awesome container content: START -->
<div>
This is my awesome container, and it is <em>so</em> awesome.
</div>
<!-- awesome container content: END -->
<script>
awesomeAnalytics(); // Beacon conversion metrics
</script>
</body>
</html>
Examinez l'extrait de code HTML précédent et les trois types de contenu différents qu'il contient:
- Balisage HTML
- Le code CSS permet de personnaliser la présentation d'une page.
- JavaScript pour alimenter des interactions et d'autres fonctionnalités de page avancées.
Chacun de ces types de contenus possède des règles différentes pour définir ce qui constitue un contenu valide, des règles différentes pour la spécification des commentaires, etc. Il reste toutefois une question à se poser : "comment réduire la taille de cette page ?".
- Les commentaires dans le code sont les meilleurs amis des développeurs, mais le navigateur n'en a pas besoin ! La suppression des commentaires CSS (
/* ... */), HTML (<!-- ... -->) et JavaScript (// ...) réduit la taille de transfert totale de la page et de ses sous-ressources. - Un compresseur CSS "intelligent" pourrait remarquer que nous utilisons un moyen inefficace de définir des règles pour
.awesome-containeret de réduire les deux déclarations en une seule sans affecter les autres styles, ce qui permet d'économiser plus d'octets. Sur un grand nombre de règles CSS, la suppression de ce type de redondance peut s'ajouter, mais il est possible qu'elle ne puisse pas être appliquée de manière agressive, car les sélecteurs sont souvent nécessairement dupliqués dans différents contextes, comme dans les requêtes média. - Les espaces et les onglets sont des fonctionnalités pratiques destinées aux développeurs en HTML, CSS et JavaScript. Un compresseur supplémentaire pourrait supprimer toutes les tabulations et les espaces. Contrairement à d'autres techniques de déduplication, ce type d'optimisation peut être appliqué de manière assez agressive, à condition que ces espaces ou onglets ne soient pas nécessaires pour la présentation de la page. Par exemple, vous pouvez conserver les espaces dans les exécutions de texte d'un document HTML, afin de garantir la lisibilité du contenu que les utilisateurs verront réellement.
<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>
Après avoir appliqué les étapes précédentes, la page passe de 516 à 204 caractères, ce qui représente une économie d'environ 60%. Certes, il n'est pas très lisible, mais il n'a pas besoin de l'être pour être utilisable. Les pratiques de développement modernes vous permettent également de séparer les versions lisibles et mises en forme de votre code source du code bien optimisé que vous envoyez en production. Combinés à des mappages sources, qui fournissent une représentation lisible de votre code de production transformé, vous pouvez résoudre plus facilement les bugs en production. Vous bénéficiez ainsi d'une bonne expérience de développement tout en optimisant les performances pour l'expérience utilisateur.
L'exemple précédent illustre un point important: un compresseur à usage général, par exemple conçu pour compresser du texte arbitraire, pourrait très bien compresser la page de l'exemple précédent, mais il ne saura jamais supprimer les commentaires, réduire les règles CSS ou des dizaines d'autres optimisations spécifiques au contenu. C'est pourquoi le prétraitement, la minimisation et d'autres optimisations contextuelles sont importants.
De même, les techniques décrites ci-dessus peuvent être étendues au-delà des éléments textuels. Les images, les vidéos et d'autres types de contenus contiennent tous leurs propres formes de métadonnées et diverses charges utiles. Par exemple, chaque fois que vous prenez une photo avec un appareil photo, son fichier contient généralement de nombreuses informations supplémentaires: paramètres de l'appareil photo, emplacement, etc. En fonction de votre application, ces données peuvent être critiques (par exemple, un site de partage de photos) ou complètement inutiles. Vous devez déterminer si cette suppression vaut la peine d'être supprimée. En pratique, ces métadonnées peuvent ajouter jusqu'à plusieurs dizaines de kilo-octets à chaque image.
En résumé, la première étape pour optimiser l'efficacité de vos éléments consiste à dresser un inventaire des différents types de contenu et à réfléchir aux types d'optimisations spécifiques au contenu que vous pouvez appliquer pour réduire leur taille. Ensuite, une fois que vous les aurez définies, automatisez ces optimisations en les ajoutant à vos étapes de compilation et de déploiement pour vous assurer qu'elles sont appliquées de manière cohérente pour chaque nouvelle version de production.
Compression de texte avec des algorithmes de compression
Pour réduire la taille des éléments textuels, l'étape suivante consiste à leur appliquer un algorithme de compression. Cela va encore plus loin en recherchant agressivement des modèles reproductibles dans les charges utiles textuelles avant de les envoyer à l'utilisateur, puis en les décompressant une fois qu'ils arrivent dans le navigateur. Cela se traduit par une réduction supplémentaire et significative de ces ressources, et des temps de téléchargement ultérieurs.
- gzip et Brotli sont des algorithmes de compression couramment utilisés qui offrent de meilleures performances sur des éléments textuels: CSS, JavaScript et HTML.
- Tous les navigateurs récents prennent en charge la compression gzip et Brotli et annonceront leur compatibilité dans l'en-tête de requête HTTP
Accept-Encoding. - Votre serveur doit être configuré pour permettre la compression. Les logiciels de serveur Web permettent souvent aux modules de compresser des ressources textuelles de cette manière par défaut.
- Vous pouvez ajuster gzip et Brotli pour améliorer les taux de compression en ajustant le niveau de compression. Pour gzip, les paramètres de compression sont compris entre 1 et 9, 9 étant le meilleur. Pour Brotli, cette plage est comprise entre 0 et 11, 11 étant la meilleure valeur. Toutefois, les paramètres de compression plus élevés nécessitent plus de temps. Pour les ressources compressées dynamiquement, c'est-à-dire au moment de la requête, les paramètres situés au milieu de la plage tendent à offrir le meilleur compromis entre taux de compression et vitesse. Cependant, la compression statique est possible, c'est-à-dire lorsque la réponse est compressée à l'avance, et peut donc utiliser les paramètres de compression les plus agressifs disponibles pour chaque algorithme de compression.
- Les réseaux de diffusion de contenu (CDN) offrent généralement la compression automatique des ressources éligibles. Les CDN peuvent également gérer la compression dynamique et statique à votre place, ce qui vous permet de vous préoccuper d'un aspect en moins de la compression.
gzip et Brotli sont des compresseurs courants qui peuvent être appliqués à n'importe quel flux d'octets. En arrière-plan, ils se souviennent de certains des contenus d'un fichier précédemment examinés, et tentent par la suite de rechercher et de remplacer efficacement les fragments de données en double.
En pratique, gzip et Brotli sont plus performants sur du contenu textuel, atteignant souvent 70 à 90% pour les fichiers plus volumineux. Toutefois, l'exécution de ces éléments d'algorithme déjà compressés à l'aide d'autres algorithmes (tels que la plupart des formats d'image qui utilisent des techniques de compression sans perte ou avec pertes) permet d'obtenir peu ou pas d'amélioration.
Tous les navigateurs récents indiquent la compatibilité avec gzip et Brotli dans l'en-tête de requête HTTP Accept-Encoding. Toutefois, il appartient au fournisseur d'hébergement de s'assurer que le serveur Web est correctement configuré pour diffuser la ressource compressée lorsque le client la demande.
| Fichier | Algorithm | Taille non compressée | Taille compressée | Taux de compression |
|---|---|---|---|---|
| angular-1.8.3.js | Brotli | 1 346 Kio | 256 Kio | 81 % |
| angular-1.8.3.js | gzip | 1 346 Kio | 329 Kio | 76% |
| angular-1.8.3.min.js | Brotli | 173 Kio | 53 Kio | 69% |
| angular-1.8.3.min.js | gzip | 173 Kio | 60 Kio | 65 % |
| Jquery 3.7.1.js | Brotli | 302 Kio | 69 Kio | 77% |
| Jquery 3.7.1.js | gzip | 302 Kio | 83 Kio | 73 % |
| jquery-3.7.1.min.js | Brotli | 85 Kio | 27 Kio | 68% |
| jquery-3.7.1.min.js | gzip | 85 Kio | 30 Kio | 65 % |
| lodash-4.17.21.js. | Brotli | 531 Kio | 73 Kio | 86 % |
| lodash-4.17.21.js. | gzip | 531 Kio | 94 Kio | 82 % |
| lodash-4.17.21.min.js. | Brotli | 71 Kio | 23 Kio | 68% |
| lodash-4.17.21.min.js. | gzip | 71 Kio | 25 Kio | 65 % |
Le tableau précédent montre les économies que la compression Brotli et gzip peuvent offrir pour quelques bibliothèques JavaScript bien connues. Les économies varient entre 65% et 86% en fonction du fichier et de l'algorithme. Pour référence, le niveau de compression maximal a été appliqué à chaque fichier à la fois pour Brotli et gzip. Dans la mesure du possible, préférez Brotli à gzip.
L'activation de la compression est l'une des optimisations les plus simples et les plus efficaces à implémenter. Si votre site Web n'en profite pas, vous passez à côté d'une opportunité importante d'améliorer les performances pour vos utilisateurs. Heureusement, de nombreux serveurs Web fournissent des configurations par défaut qui permettent cette optimisation importante. Les CDN en particulier sont très efficaces pour la mettre en œuvre de manière à équilibrer la vitesse et le ratio de compression.
Pour voir rapidement la compression en action, ouvrez les outils pour les développeurs Chrome, ouvrez le panneau Network (Réseau), chargez la page de votre choix et observez le bas du panneau "Network" (Réseau).
Comme sur l'image précédente, vous devriez voir une répartition des éléments suivants:
- Nombre de requêtes, qui correspond au nombre de ressources chargées pour la page.
- Taille de transfert de toutes les requêtes. Elle reflète l'efficacité de la compression appliquée à l'une des ressources de la page.
- La taille de la ressource de toutes les requêtes. Cette valeur reflète la taille des ressources de la page après leur décompression.
Effets sur les métriques Core Web Vitals
Il n'est pas possible de mesurer les améliorations des performances, sauf si des métriques les reflètent. L'initiative Core Web Vitals vise à créer des métriques reflétant l'expérience utilisateur réelle et à les mettre en évidence. À l'inverse, certaines métriques (telles que le simple temps de chargement de la page, par exemple) ne se traduisent pas clairement en termes de qualité de l'expérience utilisateur.
Lorsque vous appliquez les optimisations décrites dans ce guide aux ressources de votre site Web, les effets sur les métriques Core Web Vitals peuvent varier en fonction des ressources optimisées et des métriques concernées. Voici toutefois quelques situations dans lesquelles l'application de ces optimisations peut améliorer les Core Web Vitals de votre site Web:
- Les ressources HTML réduites et compressées peuvent améliorer le chargement de ce code HTML et la visibilité de ses sous-ressources, et donc leur chargement. Cela peut être utile pour le Largest Contentful Paint (LCP) d'une page. Bien que les indicateurs de ressource tels que
rel="preload"puissent être utilisés pour affecter la visibilité des ressources, en utiliser trop peut entraîner des problèmes de conflit de bande passante. En vous assurant que la réponse HTML à une requête de navigation est compressée, les ressources qu'elles contiennent peuvent être découvertes dès que possible par l'outil d'analyse de préchargement. - Certains candidats LCP peuvent également être chargés plus tôt grâce à la compression. Par exemple, le temps de chargement des ressources des images SVG candidates LCP peut être réduit via la compression basée sur du texte. Cela diffère des optimisations que vous apporteriez à d'autres types d'images, qui sont intrinsèquement compressés via d'autres méthodes de compression, telles que la compression avec pertes dans les images JPEG.
- De plus, les nœuds de texte peuvent également être des candidats LCP. La manière dont les techniques décrites dans ce guide varie selon que vous utilisez ou non une police Web pour le texte de vos pages Web. Si vous utilisez une police Web, les bonnes pratiques d'optimisation des polices Web s'appliquent. Toutefois, si vous n'utilisez pas de polices Web, mais plutôt des polices système qui s'affichent sans temps de chargement des ressources, la minimisation et la compression de votre CSS réduisent le temps de chargement, ce qui signifie que l'affichage des nœuds de texte LCP potentiels peut se produire plus rapidement.
Conclusion
La façon dont vous optimisez l'encodage et le transfert des éléments textuels est un concept de performances de référence, mais qui a un impact important. Veillez à faire tout votre possible pour vous assurer que les ressources éligibles à la minimisation et à la compression bénéficient de ces optimisations.
Plus important encore, assurez-vous que ces processus sont automatisés. À des fins de minimisation, utilisez un bundler pour appliquer la minimisation aux ressources éligibles. Assurez-vous que la configuration de votre serveur Web est compatible avec la compression, mais surtout, utilisez la compression la plus efficace disponible. Pour que cela soit aussi simple que possible, utilisez des CDN pour automatiser la compression. En effet, ils peuvent non seulement compresser les ressources, mais aussi le faire très rapidement.
En rassemblant ces concepts de performances de base dans l'architecture de votre site Web, vous pouvez vous assurer que vos efforts d'optimisation des performances sont sur de bonnes bases et que les optimisations ultérieures peuvent s'appuyer sur une base solide de bonnes pratiques de référence.