Juil 19

PERFORMANCE WEB : AMÉLIOREZ LA GESTION DE VOTRE BANDE PASSANTE

Vous disposez d’un site internet à fort trafic ou d’un serveur avec une faible bande passante ? Pas de panique, on vous donne quelques astuces pour réduire le flux entre le site et le navigateur du visiteur avec 3 méthodes.

 

TEMPS DE CONNEXION, LATENCE… COMMENT FAIRE LA DIFFÉRENCE ? 

Un navigateur Internet doit recevoir l’ensemble du code HTML (DOM) du serveur avant de pouvoir afficher le contenu. Pour chaque élément, contenu, image, vidéo etc., le navigateur se connecte au serveur grâce au protocole TCP/IP. C’est le temps de connexion.

À cela, il faut ajouter le temps de latence du serveur qui ne répondra pas toujours instantanément car il traite les demandes dans l’ordre d’arrivée. Ces temps sont irréductibles.

Sur une page HTML classique, 70% du temps d’affichage n’est pas le temps de téléchargement, mais le temps nécessaire à la connexion auquel s’ajoute le temps de latence. La meilleure des optimisations est donc de réduire le nombre de requêtes au serveur.

Il est temps maintenant de passer à la pratique et d’appliquer les bonnes méthodes !

SOLUTION 1 : UTILISER DES SYSTÈMES DE CACHE  

Les systèmes de cache évitent de recharger des éléments déjà téléchargés. Ceci permet des allers-retours serveur beaucoup plus rapides ou même de les éviter.

Par défaut, la balise HTTP Etag (entity tag) est activée, elle aide à ne pas télécharger deux fois les mêmes fichiers. Ce système n’évite pas les allers-retours client-serveur, mais de renvoyer le contenu des fichiers, et donc de trop consommer de bande passante et de limiter le traitement que doit effectuer le serveur.

SOLUTION 2 : RÉDUIRE LE NOMBRE DE FICHIERS  

Plusieurs options s’offrent à vous pour réduire le nombre de fichiers, on vous en propose deux :

  1. Limiter le nombre de fichier CSS et JS : Il est possible de regrouper les fichiers CSS ou JS en un seul. Plusieurs outils sont disponibles en ligne.
  2. Regrouper les images – Sprite : Vous pouvez appliquer la méthode « Sprite » : il s’agit ici de regrouper les images du thème qui sont couramment utilisées en une seule. L’avantage est de n’utiliser qu’un nombre réduit d’images. En revanche, il faudra, via une feuille de style, afficher l’image en background et la positionner.

SOLUTION 3 : RÉDUIRE LA TAILLE DES FICHIERS 

Rien de sorcier, voici deux options pour réduire la taille de vos fichiers :

Réduire la taille des images

Si vous avez des images qui ne font pas partie intégrante du thème, vous devez les réduire au maximum et éviter de charger des images trop grandes. Il est préférable de les réduire ou d’utiliser des mécanismes automatiques de mise à l’échelle.

Limiter le poids des fichiers

Deux moyens sont possibles :

  1. Compression Gzip : Les fichiers HTML, CSS et JavaScript sont des fichiers texte et donc particulièrement adaptés à une compression ZIP importante. Le temps nécessaire à cette décompression est négligeable pour le visiteur. En réduisant les flux envoyés aux utilisateurs, vous réaliserez une économie de bande passante.
  2. Minify : Une autre possibilité pour limiter le poids de vos fichiers CSS et JavaScript est de les minimiser. La minimisation supprime les retours à la ligne, les tabulations ainsi que les commentaires. La lecture de ces fichiers devient donc quasiment impossible, mais ce n’est pas un problème en production.

 

Pour aller plus loin dans votre démarche, consultez notre livre blanc