Guide de préparation à l'évaluation

2.3.2 Optimisation de la taille d'encodage et de transfert

Après avoir supprimé le téléchargement des ressources inutiles, la meilleure chose à faire pour améliorer la vitesse de chargement d'une page est de réduire la taille totale de téléchargement. Pour ce faire, vous devez optimiser et compresser les ressources qu'il vous reste.

L'étape suivante consiste donc à compresser les ressources que vous n'avez pas supprimées et que le navigateur devra télécharger. En fonction du type de ressource (texte, image, police, etc.), différentes techniques sont à votre disposition : outils génériques à activer sur le serveur, optimisations liées au prétraitement de certains types de contenus, et optimisations spécifiques à des ressources pour lesquelles il faut faire appel au développeur.

Pour atteindre les meilleures performances, toutes ces techniques doivent être utilisées.

  • La compression est un processus qui consiste à encoder des informations afin de réduire le nombre de bits.
  • La suppression des données inutiles permet toujours d'obtenir de meilleurs résultats.
  • Il existe un grand nombre de techniques et d'algorithmes de compression.
  • Pour obtenir une compression optimale, vous devrez faire appel à plusieurs techniques.

La compression est un processus qui consiste à réduire la taille des données. Beaucoup de personnes ont contribué au développement d'algorithmes, de techniques et d'optimisations afin d'améliorer les taux de compression, la vitesse et la mémoire requise pour certains compresseurs. Nous n'allons pas entrer dans les détails de la compression des données dans cet article. Toutefois, il est important que vous ayez des connaissances solides sur le fonctionnement et les techniques de compression afin de pouvoir réduire la taille de certains éléments de votre page lorsque cela est nécessaire.

Pour expliquer les principes de bases de ces techniques, prenons l'exemple d'un format tout simple contenant un message sous forme de texte, et voyons comment l'optimiser.

# Ci-dessous se trouve un message secret, composé d'une série d'en-têtes dans

# un format valeur/clé, suivi d'une nouvelle ligne et du message chiffré.

format : secret-cipher

date : 25/08/2016

AAAZZBBBBEEEMMM EEETTTAAA

  1. Les messages peuvent contenir des annotations arbitraires indiquées par le préfixe "#". Ces annotations ne modifient en rien la signification ou le comportement du message.
  2. Les messages peuvent contenir des en-têtes, qui correspondent à des paires valeur/clé (séparées par ":") au début du message.
  3. Les messages contiennent des charges de texte.

Comment pouvez-vous réduire la taille du message ci-dessus qui contient pour le moment 200 caractères ?

  1. Le commentaire est intéressant, mais il ne modifie en rien la signification du message. Supprimez-le lors de l'envoi du message.
  2. Il existe de bonnes techniques pour encoder efficacement les en-têtes. Par exemple, si vous savez que tous les messages contiennent les éléments "format" et "date", vous pouvez les convertir en ID d'entier court que vous envoyez. Toutefois, comme l'exactitude de cette opération ne peut pas être assurée, nous la laisserons de côté pour le moment.
  3. La charge ne contient que du texte. Nous n'en connaissons pas vraiment la substance (il s'agit apparemment d'un "message secret"), mais nous pouvons nous rendre compte en regardant le texte qu'il contient beaucoup de redondances. Par conséquent, au lieu d'envoyer des lettres répétées, vous pouvez par exemple compter le nombre de lettres répétées et les encoder de manière plus efficace. Ainsi, "AAA" devient "3A", c'est-à-dire une séquence de trois A.

En appliquant ces techniques, le message prend la forme suivante :

format : secret-cipher

date : 25/08/2016

3A2Z4B3E3M 3E3T3A

Le nouveau message contient 56 caractères, ce qui veut dire que vous avez réussi à compresser le message original de 72 %.

C'est une belle réussite, mais en quoi cela peut-il vous aider à optimiser vos pages Web ? Nous n'allons pas essayer d'inventer nos propres algorithmes de compression, mais nous allons voir qu'il est possible d'utiliser exactement les mêmes techniques et les mêmes processus de réflexion pour optimiser les ressources de nos pages Web : prétraitement, optimisations spécifiques au contexte et algorithmes adaptés à différents contenus.

Minification : prétraitement et optimisations spécifiques au contexte

  • Les optimisations spécifiques au contenu peuvent réduire considérablement la taille des ressources fournies.
  • Il est préférable d'appliquer les optimisations spécifiques au contenu dans le cadre du cycle de version/build.

La meilleure manière de compresser des données inutiles ou redondantes est tout simplement de les supprimer. Mais nous ne pouvons pas simplement supprimer des données arbitraires. Par contre, dans certains contextes, lorsque nous disposons de connaissances spécifiques au contenu (format et propriétés des données), nous pouvons bien souvent réduire considérablement le volume de charge sans modifier la signification du message.

<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>…</div>
   <!-- awesome container content: END -->
   </script>
     awesomeAnalytics(); // beacon conversion metrics
   </script>
 </body>
</html>

Prenons l'exemple de page HTML simple ci-dessus, et les trois types de contenu qui la composent : balisage HTML, styles CSS et code JavaScript. Chacun de ces types de contenu dispose de ses propres règles qui définissent comment créer du contenu valide, comment ajouter des commentaires, etc. Comment pouvons-nous faire pour réduire la taille de cette page ?

  • Les commentaires dans le code sont très utiles aux développeurs, mais complètement inutiles pour le navigateur ! En supprimant les commentaires CSS (/* … */), HTML (<!-- … -->), et JavaScript (// …), il est possible de réduire considérablement la taille totale de la page.
  • Ici, un compresseur CSS "smart" s'apercevrait facilement que notre façon de définir des règles pour ".awesome-container" n'est pas efficace : il serait préférable de regrouper les deux déclarations en une seule. Cette opération ne modifierait en rien les autres styles et permettrait d'utiliser moins d'octets.
  • Les espaces superflues (espaces et tabulations) sont pratiques pour les développeurs de codes HTML, CSS et JavaScript, mais peuvent être entièrement supprimées à l'aide d'un autre compresseur.

<html><head><style>.awesome-container{font-size:120%;width: 50%}
</style></head><body><div>…</div><script>awesomeAnalytics();
</script></body></html>

Après avoir effectué toutes les étapes mentionnées ci-dessus, la page passe de 460 à 150 caractères. La compression a donc permis une réduction de 63 %. Il est vrai que la page n'est pas vraiment lisible, mais cela n'a aucune importance : vous pouvez conserver la page originale comme "version de développement", puis appliquer les opérations des étapes ci-dessus dès que vous êtes prêt à publier la page sur votre site Web.

Revenons un peu en arrière. L'exemple que nous avons utilisé précédemment illustre un point important : un compresseur à usage général (par exemple, conçu pour compresser du texte arbitraire) peut très bien compresser la page, mais il ne sera pas capable de supprimer les commentaires, regrouper les règles CSS, ni d'effectuer bien d'autres optimisations spécifiques au contenu. C'est la raison pour laquelle les opérations de prétraitement/minification/optimisation en fonction du contexte sont des outils très utiles.

Remarque : Preuve à l'appui, la version de développement non compressée de la bibliothèque JQuery fait environ 300 Ko à l'heure actuelle. Cette même bibliothèque minifiée (commentaires supprimés, etc.) est environ trois fois plus petite, c'est-à-dire à peu près 100 Ko.

Ces mêmes techniques peuvent être utilisées pour d'autres éléments que le texte. En effet, les images, les vidéos et autres types de contenu contiennent tous leurs propres formes de métadonnées et de charges. Par exemple, lorsqu'une photo est prise avec un appareil, elle intègre généralement un grand nombre d'informations supplémentaires : paramètres de l'appareil photo, emplacement, etc. Selon l'application que vous utilisez, ces données peuvent être importantes (par exemple, un site de partage de photos) ou complètement inutiles. C'est donc à vous d'évaluer si vous devez les supprimer ou non. Concrètement, ces métadonnées ajoutent des dizaines de kilo-octets à chaque image.

En résumé, pour améliorer l'efficacité de vos éléments, vous devez commencer par faire l'inventaire des différents types de contenu dont vous disposez, et réfléchir aux optimisations spécifiques que vous pouvez appliquer pour réduire leur taille. Une fois cette étape effectuée, automatisez ces optimisations en les ajoutant à votre build, puis lancez les processus pour vous assurer que les optimisations sont appliquées.

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?