Comment réduire sa bande passante sans rogner sur la partie visible ni l’expérience utilisateur ?

Je vais parler cette fois d’un problème qui touche les webmasters, dès que leur site commence à avoir un peu de trafic. J’imagine que beaucoup d’entre nous se sont déjà retrouvés dans la situation où l’on doit faire face à l’augmentation des ressources côté serveur, voire à la migration.
Soit on n’a plus assez d’espace disque disponible, mais généralement c’est plutôt du côté de la bande passante que ça coince. Mis bout à bout, le chargement des pages consomme trop de giga-octets de données, et l’hébergeur demande que l’on passe à la caisse.

Dans les cas les plus désagréables, l’accès à votre site peut être coupé et celui-ci, inaccessible pendant de longues minutes (voire heures) à une fréquence de répétition plus ou moins importante.
Les serveurs mutualisés ont tous leur limite de bande passante, et la location d’un serveur dédié est très onéreuse, d’autant qu’elle ne fait que décaler le problème.

La solution est donc de réduire l’exploitation à la source sans impact néfaste sur le trafic et donc, d’augmenter la vitesse d’affichage des pages, ce qui aura pour effet de limiter la perte de trafic liée à la lenteur de chargement.

Une petite équation toute simple (même pour moi, c’est dire) :
Bande passante d’une page = (HTML-CSS + scripts + médias) x (nombre de fois qu’une page est affichée)

L’objectif est donc de limiter le poids et l’exploitation de chacun des groupes d’éléments qui composent une page, et ce sans que cela change quoi que ce soit pour les visiteurs.

Réduire le poids du code

Il existe pas mal d’outils qui pourront vous aider à réduire le code. Mais il ne faut pas non plus tomber dans l’extrême inverse qui vise à compacter tellement le code qu’il en devient illisible. Lorsqu’il faudra y retourner, on aura l’air malin…
Je vous conseille de commencer par relire vous-même votre code, en particulier votre feuille de style (appelée sur toutes les pages), celui des pages les plus principales dans les appels (par exemple, la page « article ») et celui des scripts les plus souvent utilisés.
En plus d’assainir un peu votre code, vous tomberez probablement sur du code commenté absolument inutile, ou encore des fonctions qui utilisent des ressources pour rien, ou encore des parties mal codées. Ça ne fait jamais de mal de nettoyer un peu tout ça.

Ensuite, des outils comme YSlow (en coopération avec l’inévitable Firebug) vous permettront d’avoir une vision globale des choses qui coincent dans la vitesse de chargement de vos pages. Cela permet notamment de mettre en lumière ce que l’on n’a pas forcément vu lors d’un passage humain, ou de signaler des requêtes serveur à problème.

Je vous encourage aussi à tester Clean CSS qui, comme son nom l’indique, raccourcit les feuilles de style grâce à plusieurs niveaux de compression, ce qui vous permettra de choisir la réduction selon vos préférences. Sur Kanpai, le poids de la CSS a diminué de 40%, et je n’ai même pas poussé la compression au maximum.
Pour info, CSS shortener compile les styles des classes identiques, fusionne les attributs “background”, “font” et autres multiples, ou encore supprime les espaces.
Ca n’a l’air de rien, mais la CSS est chargée à chaque page affichée. Pensez-y !

Réduire le poids des médias

J’ai parlé du hotlink dans un précédent article et surtout de la façon de s’en prémunir pour ceux que ça intéresse.
Pour ma part, je considère qu’il s’agit d’un retranchement, mais qu’on peut économiser sa bande passante sans y avoir recours, car cela crée des contraintes de visibilité importantes.

Au niveau des images, je conseillerais d’optimiser leur poids, en particulier pour celles qui sont affichées sur toutes les pages (le logo, par exemple).
Mais c’est valable pour toutes les images du site, d’autant que pas mal d’outils permettent de le faire rapidement et facilement. The Gimp, par exemple, est gratuit et le fait très bien. On arrive à avoir de grandes et belles images pour quelques dizaines de Ko en jouant bien sur la compression.

Il en va de même pour l’audio et la vidéo.
Encodez correctement vos podcasts et vous n’aurez pas de sueur froide à les poster sur votre site.
Et pour vos vidéos, YouTube et/ou DailyMotion sont vos amis, d’autant que l’embed (l’importation sur votre site) est d’une facilité déconcertante, avec pas mal de liberté laissée dans les propriétés d’affichage.

L’idée étant, au final, de trouver un juste équilibre en l’affichage de ce que vous souhaitez sur vos pages, et un poids raisonnable qui corresponde au utilisateurs.