Les référenceurs au régime : techniques pour comprimer son code

En effet, outre un contenu de haute qualité, l’utilisateur s’attend à une expérience optimale et notamment avec des contenus rapidement accessibles. La bonne nouvelle est que sur Internet, tout va plus vite que dans la vie réelle. Avec quelques lignes de code et de moindres astuces, les sites Web se compriment de 40 % à 70 %, voire plus dans des cas exceptionnels. Cet article vous fait part de la recette miracle.

Pourquoi comprimer un code ?

Pourquoi, à l’ère du streaming et autres, est-ce nécessaire de comprimer le code source de son site Web si celui-ci ne possède qu’une taille XS de quelques centaines de Ko en l’état non-comprimé ? La réponse est très simple : les pages Web qui se téléchargent plus vite offrent une meilleure expérience utilisateur, laquelle agit, à son tour, positivement sur le taux de conversion, la durée de séjour sur la page, le nombre de pages consultées par visiteur et le taux de rebond.

Tandis que les arguments mentionnés en dernier lieu apportent des avantages quant à l’évaluation de la page par l’algorithme Google, renforcé par la mise à jour Panda, un bon taux de conversion en e-commerce a un effet direct sur la réussite de l’entreprise.

À titre d’exemple, un retard du temps de chargement de 100 ms coûte au géant Amazon environ 1 % de son chiffre d’affaires. En extrapolant sur une base annuelle, on arriverait ainsi à des coûts d’opportunité s’élevant à près de 245 millions de dollars. Ces chiffres illustrent de façon saisissante l’influence que peut avoir la vitesse de chargement d’un site Web.

Il est aussi à noter qu’en mars 2018, la fibre ne recouvre que 25 % du territoire français. S’ajoute à cela le fait que la proportion des utilisateurs navigant sur Internet via le réseau mobile augmente considérablement. La couverture par 3G et 4G peut encore être considérablement accrue. Dans son article en anglais 13 Reasons Why You Should Pay Attention to Mobile Web Performance publié sur sixrevisions.com, Tammy Everts présente la façon superficielle dont est traité le sujet de la performance du web mobile. Et selon lui, chaque webmaster devrait en conséquence revoir sa manière de penser.

Il est possible d’améliorer considérablement le temps de chargement en comprimant, par exemple, la livraison des données au moyen de Gzip ou de Deflate. Ainsi, on réduit les coûts et la bande passante.

Quelles méthodes ?

Le concept de la compression consiste à transférer les données requises sous forme compactée au client pour réduire le temps de transfert. Les deux méthodes de compression les plus courantes sur le Web sont Gzip et Deflate. Lors du processus de compression, les chaînes similaires sont localisées à l’intérieur d’un document et remplacés avec le même espace réservé. Ainsi, les deux procédés conviennent parfaitement pour la compression des fichiers HTML, CSS et JavaScript, vu qu’ils contiennent souvent beaucoup de chaînes similaires et en général beaucoup d’espaces et de lignes vides. Les deux méthodes peuvent être appliquées voire activées avec relativement peu de moyens.

Le processus de compression : fonctionnement technique

Afin que les données puissent être transférées sous forme comprimées, le navigateur du client doit tout d’abord demander le transfert comprimé des données. Ceci s’effectue par une requête HTTP avec l’indication “Accept-Encoding: gzip, deflate“.

Illustration 1 : Diagramme sur la compression Gzip

Notons à cet égard qu’aussi bien une seule que plusieurs méthodes de compression peuvent être indiquées. Dans l’exemple, les données comprimées au gzip et au deflate sont acceptées. Il est important ici qu’il s’agisse d’une demande (en anglais request) et non d’une exigence (demand). Le serveur ne doit donc pas répondre obligatoirement avec des données comprimées. Si les données ne sont pas comprimées, elles seront alors simplement transférées sous forme non comprimée au client ayant fait la demande.

De nos jours, près de 90 % de tous les navigateurs supportent la compression. Normalement, il n’existe aucune influence sur le paramètre Accept-Encoding ou sur les méthodes de compression autorisées du navigateur. Soit le navigateur supporte la compression de données, soit il ne le fait pas.

Le serveur répond à la requête HTTP du client avec la réponse dite HTTP. Si le serveur supporte la compression, les données seront transférées sous forme comprimée au client. Dans l’en-tête de la réponse HTTP, le serveur signale par exemple “Content-Encoding: gzip“. Dans l’autre cas, la ressource demandée sera transmise au client à l’état non comprimé.

Comment activer la compression ?

La compression s’active par un fichier de configuration approprié en fonction du serveur.

Activation au moyen du fichier de configuration .htaccess

La compression gzip s’installe à l’aide du fichier de configuration .htaccess sur les serveurs Web compatibles avec le NCSA (par ex. Apache, le serveur web le plus répandu). Pour cela, il faut insérer le code suivant dans le fichier .htaccess :

<IfModule mod_deflate.c>
<FilesMatch “\\.(js|css|html|xml)$“>
SetOutputFilter DEFLATE 
</FilesMatch>
</IfModule>

Tout d’abord, on demande au moyen de “<IfModule mod_deflate.c>“ si le module d’extension mod_deflate est installé. Si c’est le cas, on détermine au moyen de “<FilesMatch”\\.(js|css|html|xml)$”>“ les types de fichier pour lesquels le filtre suivant doit être employé. Dans notre exemple, le filtre est employé pour les fichiers JavaScript, CSS, HTML et XML. Puis, on précise avec “SetOutputFilter DEFLATE“ que tous les fichiers qui correspondent au modèle indiqué auparavant seront livrés avec le filtre “DEFLATE“. Ensuite, on reclôt l’adaptation et la demande du module.

Théoriquement, ce filtre s’applique encore à d’autres types de fichier (p. ex. des fichiers image tels que .jpg, .gif ou .png). L’adaptation de fichier devrait alors d’effectuer comme suit :

<FilesMatch”\\.(js|css|html|xml|png|jpg|gif)$”>“

Toutefois, il faut noter ici que ces formats sont en général déjà comprimés et que les fichiers image perdent souvent de leur qualité à cause d’une nouvelle compression. Il est donc conseillé de comprimer les fichiers binaires comme les images avant le téléchargement et de renoncer à la compression au gzip. Des outils spéciaux tels que JPEGmini.com peuvent par exemple être utilisés à cet effet.

Activation au moyen de PHP

Celui qui n’a pas accès au fichier .htaccess de son serveur ou qui aimerait transférer uniquement des fichiers individuels comprimés au gzip, a la possibilité d’activer la compression en utilisant le code suivant :

<?php ob_start(“ob_gzhandler“); ?>

Cette fonction doit être placée de préférence avant la première émission du code HTML.

Exemple :

<?php ob_start(“ob_gzhandler“); ?>
<html>
<body>
<p>Il doit s’agir ici d’une page comprimée.</p>
</body>
</html>

Limites de la compression et conseils pratiques

Mais attention : il peut se passer aussi des erreurs lors de la compression ! Il est donc important de respecter les points suivants :

1. Lors de l’utilisation de Gzip via https, toute faille dans la sécurité peut être utilisée. Cela peut causer des problèmes pour les fichiers contenant des informations sensibles. Compresser les types de fichiers contenant des informations sensibles avec Gzip n’est donc pas recommandé.

2. Une compression ne doit être appliquée que sur des types de fichier ou sur des fichiers n’ayant pas déjà été comprimés. Les fichiers image sont en général déjà réduits et, pour cette raison, ne devraient plus être encore comprimés au gzip. En comprimant à nouveau, il peut se produire un effet contraire et on obtient une taille de fichier plus élevée ou le processus de compression occupe inutilement plus de mémoire.

3. Une compression ne doit être appliquée que pour des fichiers présentant une taille appropriée. Dans des fichiers de la taille de quelques octets, une compression peut entraîner que ce fichier soit plus volumineux que le fichier original.

4. Il faut veiller à ce que le niveau de compression ne soit pas trop élevé. Souvent, c’est à peine si on remarque une grande différence de taille entre les fichiers faiblement, normalement et fortement comprimés. Une compression moyenne ou forte nécessite toutefois bien plus de puissance de traitement.

5. Puisque des chaînes similaires ou répétitives sont remplacées durant le processus de compression, on réussit mieux sa compression en utilisant des variables et des désignations de classes (par ex. dans les fichiers CSS et HTML) que lorsque toutes les variables et classes sont nommées, offrant ainsi peu de potentiel de compression.

Autres mesures d’optimisation pour un code plus mince

Minifying et uglifying : suppression des signes inutiles

Afin de garder un code source simple et agréable, les développeurs travaillent normalement avec des sauts de ligne, des espaces, des retraits et autres signes qui renforcent la lisibilité du code source. Afin de mieux entretenir le code source ultérieurement, les constructions et sections particulièrement complexes sont fréquemment documentées à l’aide de commentaires.

Ce qui est extrêmement utile pour le développeur ne l’est pas nécessaire pour le collecteur du moteur de recherche et devrait, de ce fait, être supprimé. La réduction de signes inutiles est appelée « minifying » (qu’on pourrait traduire par « minification ») et aide à épargner de précieux octets. L’exemple suivant montre clairement, sur la base de la bibliothèque JavaScript libre jQuery, combien d’octets on arrive à épargner grâce à la minification.

Tandis que le fichier original du cadre dans la version 2.1.4 a une taille de près de 242 ko (jQuery 2.1.4.js (non comprimé)), la taille du fichier ayant été réduit des signes et commentaires inutiles ne mesure qu’environ 82 ko (jQuery 2.1.4.min.js (comprimé)). Ce n’est que par la minification – la réduction de signes inutiles – que la taille du fichier peut diminuer d’environ 66 %. Un résultat remarquable.

Illustration 2 : Code source avant et après la minification

La minification fonctionne aussi bien pour les fichiers HTML que pour CSS et JavaScript.Par ailleurs, le fichier jQuery réduit peut diminuer encore de 65 % lorsqu’on le comprime au gzip. De 242 ko au départ, on arrive à la taille fabuleuse de 29,5 ko.

Outils de réduction de ressources

Pour réduire le code CSS, on peut employer par exemple YUI Compressor ou cssmin.js. Il existe également quelques outils avec lesquels on peut réduire le code JavaScript. En ce sens, Google PageSpeed Insights conseille Closure Compiler, JSMin ou YUI Compressor.

Remarque : puisque les sauts de signes, espaces et commentaires employés sont très importants pour le développeur et pour un entretien rapide et facile, il est conseillé de prévoir les fichiers aussi bien à l’état original (avec les signes inutiles) qu’à l’état optimisé/réduit. Ainsi, le code s’entretient facilement et se télécharge nettement plus vite pour le collecteur.

Combiner les fichiers CSS et JavaScript

Il arrive souvent que plusieurs fichiers CSS et JavaScript soient téléchargés dans le header HTML d’un site Web. Chacun de ces appels constitue une demande HTTP qui doit être traitée par le navigateur. Notons à cet égard que les navigateurs modernes ne peuvent normalement traiter que des demandes du genre 2-8 HTTP du même domaine en même temps, toutes les autres demandes doivent attendre. Un tableau contenant les valeurs exactes de tous les navigateurs est disponible ici. Or, vu qu’un site Web peut nécessiter jusqu’à plusieurs centaines de requêtes HTTP, il se produit par conséquent un canal d’étranglement énorme. On peut l’éviter en combinant, par exemple, tous les fichiers CSS en un seul, ce qui constituera alors une seule requête HTTP. Ceci vaut également pour les fichiers JavaScript qui se téléchargent par le script <script>Element can be loaded. Encore une fois, assurez-vous que tous les fichiers JavaScript – si cela est techniquement possible – sont combinés en un seul fichier.

Il est important de noter qu’on a souvent besoin de différentes fonctions JavaScript et donc de fichiers JavaScript par type de page (ex : sous-page de magazine contre page de détail produit). Dans ce cas, il est judicieux de ne télécharger par type de page que les fichiers JavaScript et CSS dont on a vraiment besoin. Il pourrait être désavantageux, dans ce cas, de combiner tous les fichiers JavaScript en un seul.

En plus, utiliser des sous-domaines ou un réseau de diffusion de contenu (RDC) peut être raisonnable. Les scripts et ressources dont on n’a pas besoin tout de suite peuvent être téléchargés ultérieurement par AJAX.

Conclusion : un peu de technique pour une meilleure expérience utilisateur

Il est possible d’améliorer considérablement le temps de chargement en livrant les données au moyen de Gzip ou de Deflate. Les deux procédés conviennent parfaitement à la compression des fichiers HTML, CSS et JavaScript. En plus, la minification constitue une autre possibilité judicieuse de réduire le code.

Comme les robots des moteurs de recherche n’ont pas besoin des sauts de lignes, de retraits, etc. dans le code source, ces signes inutiles, tout en servant au développeur, peuvent être réduits. En outre, il existe des outils utiles qui réduisent les codes CSS et JavaScript. On peut aussi économiser en nombre d’octets. Pour empêcher qu’un site Web nécessite beaucoup de requêtes HTTP, on combine les fichiers CSS et JavaScript. Ensemble, ils ne forment plus qu’une seule requête HTTP, ce qui épargne pas mal de ressources supplémentaires.

On peut donc dire que même avec quelques lignes de code et de petites interventions sur le site Web, on peut réaliser un « amincissement » optimal du code. Puisque le temps de chargement d’un site Web constitue un important facteur SEO et de classement, chaque webmaster devrait se pencher sur ce thème. Car la compression du code garantit une expérience utilisateur améliorée qui agit positivement sur d’autres métriques comme le taux de conversion ou la durée de séjour. Cela représente un aspect crucial pour le succès total de l’entreprise et contribue à faire le bohneur des utilisateurs… et de Google.