Comment augmenter la vitesse d'affichage d'une page web ?

Optimisation des performances du serveur

Publié le 01/02/2014 :

La vitesse d'affichage des pages ou le temps de réponse est l'un des critères les plus importants qui détermine la qualité de votre site Internet. C'est un critère primordial, non seulement pour l'ergonomie des pages du site, mais aussi, pour son bon positionnement  dans les résultats des moteurs de recherche.
Voici quelques facteurs qui vous permettront d'augmenter la vitesse d'affichage de vos pages web :

• Utilisation du cache
• Allègement des fichiers permettant de construire vos pages web
• Optimisation du code source côté serveur
• Répartition des charges

Accélération des pages web par le cache

J'ai écrit un article précédent parlant de l'utilisation du cache . Le cache a pour but d'effectuer une "photographie" de l'affichage d'une page web en fonction de la requête exécutée enclenché par un Internaute qui accède à une adresse Internet. Ainsi, chaque résultat d'affichage (le cache) du contenu de la page est associé à une requête spécifique exécutée par un internaute. L'utilisation du cache n'est possible que si les requêtes utilisés sont répétitifs et identiques (Il y a de grandes chances que cela soit le cas dans la plupart des sites) et si les contenus changent peut souvent. Ainsi en stockant les résultats d'affichage dans le cache, ce dernier peut l'utiliser pour afficher une page web en cas demande d'un autre internaute . Cela permet d'économiser non seulement les exécutions répétitives qui sollicitent des processeurs de manière important mais aussi d'épargner au maximum l'utilisation de la base de données pour générer une nouvelle page web . Par cette méthode, le serveur est "soulagé" et préserve ses performances même en cas de fort trafic .

Diminution du poids et du nombre de fichiers sur le serveur web

En cas de consultation d'une adresse Internet le visiteur fait charger une page web sur son navigateur. Lorsqu'un navigateur charge une page web, il fait télécharge plusieurs fichiers à la fois d'un site Internet. Il y a bien entendu les fichiers html (ou php, htm ...), javascript (.js), feuille de style (css), les fichiers images (.gif, jpg, png ...). L'idéal serait que la page web chargée fasse appel un petit nombre de fichiers pour limiter la durée de chargement de vos pages web dans la navigateurs. Que faut-il faire pour diminuer le poids total des fichiers utilisés par la page web ?

• Essayer dans la mesure du possible de "fusionner" les fichiers Javascript de façon à ce que la page html chargée puisse faire appel à un petit nombre de fichiers. l'idéal serai de faire appel à un fichier, mais dans la pratique ce n'est pas toujours l'idéal surtout si un développeur est amené à effectuer de la maintenance . De plus, les sites d'aujourd'hui utilisent des fichiers bibliothèque de Javascript comme JQuery. Pour les fichiers de feuille de style, on effectuera la même opération que les fichiers Javascript . 
• Effectuer des "minifications" aussi bien pour les fichiers javascript que les fichiers de feuilles de style . La minification consiste à diminuer les espaces entre les lignes de codes contenu dans ces fichiers et donc à gagner des octets au niveau du chargement. Ainsi grâce à cette minification, les lignes de codes sont compressés aussi bien pour le code javascript que pour le code CSS (Feuille de style) . Il existe des logiciels permettant d'effectuer cette opération .
• Activer la compression de vos fichiers sur le serveur web. Ce dispositif permet de compresser les fichiers lors de leurs transfert sur le navigateur client au moment du chargement d'une page web. Ainsi, il permet de diminuer le temps de chargement des pages . Chez la plupart  des hébergeurs la compression des fichiers par le serveur est activé par défaut, y compris pour les hébergements mutualisés. La compression ne fonctionne que sur les fichiers html, css et javascript (js) . Elle n'a pas d'effet sur les images (fichiers .jpg, .gif, .png ...).
• Concernant la gestion du poids des fichiers images, réduire la qualité d'affichage des images et/ou les dimensions des images jusqu'à une limite où des déformations apparaissent afin de préserver un minimum qualité visuelle. Cette opération permet de diminuer le poids des fichiers images .

Optimisation du code source

Le fait d'optimiser le code source peut faire diminuer le temps de réponse du serveur web. Les manière dont les codes SQL (Structured Query Language) ont été écrit peuvent être à l'origine de la lenteur de la réponse du serveur. Essayer de repérer les requêtes SQL qui se répètent très souvent ou qui ont un durée d'exécution démesurée. Tout d'abord la requête SQL est une commande permettant d'interroger une base de données dans le but de lire des données (consultation d'un catalogue par exemple), d'effectuer des mises à jours (Ajout, modification ou suppression de données). Dans le cas des requête qui prennent du temps à exécuter, si vous avez construit des tables SQL de votre base de données (Que cela soit MySQL, PosgreSQL, MS SQL Server ... ) à partir des modèles de données, essayer de "dénormaliser" au niveau de la structure des tables, c'est à dire à éliminer les jointures inutiles dans les tables en déplaçant les champs servant de clés étrangères vers la table où vous allez récupérer les données avant de les afficher sur votre page web . Généralement c'est au niveau des connexions à la base de données qu'il peut y avoir des temps de latences . Une des solutions consiste à développer un programme permettant de limiter les connexion à la base de données lors de l'exécution de la page à envoyer vers le navigateur du client . C'est la gestion du cache . Ceci peut être utilisé à condition que les requêtes exécutés soient les mêmes (c'est à dire répétitives), et que les informations ne changent pas trop souvent.

Répartition des charges ou loadbalancing

La répartition des charges ou l'équilibrage des charges consiste à utiliser une solution matérielle et/ou logicielle pour répartir les requêtes des internautes (demande de pages) vers chacun des serveurs de façon équitable. Ces serveurs recevant ces requêtes forment ensemble une grappe de serveurs (une ferme de serveurs). Le plus souvent, cette opération se fait par l'intermédiaire d'un appareil nommé le répartiteur (ou équilibreur) de charges . Cela permet ainsi d'accueillir plus de connexions de la part des internautes, en les divisant par le nombre de serveurs. Il joue le rôle de distribution des requêtes en les partageant pour chacun des serveur web de la grappe ou de la ferme . 

Cette distribution des connexions des internautes (charges) effectuée est déterminée par un algorithme . L'algorithme utilisé en général par défaut pour répartir les charges pour les serveur, s'appelle l'algorithme de "Round Robin" (Tourniquet en anglais) . Il permet de partager les connexions des internautes de façon égales, par exemple nous pouvons avoir une ferme de 3 serveurs dans une baie informatique. S'il y a 100 internautes qui s'y connectent, il y aura 2 serveurs qui reçoivent chacun 33 connexions des internautes et 34 connexions qui vont sur le 3ème serveur par l'intermédiaire du répartiteur de charges . Concernant le mode de distribution des connexions aux serveurs par le répartiteur de charges via la méthode de "Round Robin"; sachant que nous avons 3 serveurs web, les distributions des connexions se passeront de la façon suivante : une première connexion de la part d'un internaute est reçue par le premier serveur web, la 2ème connexion de la part d'un autre internaute est reçue par le 2ème serveur, la 3ème connexion est reçue par le 3ème serveur, la 4ème connexion est reçue par le premier serveur, la 5ème connexions par le 2ème serveur et ainsi de suite ... 

Au fur et à mesure qu'une connexion apparaît, une rotation est faite pour que chacun des serveurs puisse recevoir à son tour une connexion de plus . Ainsi, les serveurs ayant chacun moins de connexions à traiter, sont plus disponible à traiter une autre connexion, ce qui évite les accumulations de requêtes en attentes et augmente la vitesse de réponse pour les internautes . 

Il existe un autre type d'algorithme de répartition ou d'équilibrage des charges similaire à l'algorithme dite "Round Robin", cet  algorithme est paramétré via un logiciel du répartiteur de charges. Il peut distribuer plus de connexions des utilisateurs vers un serveur qu'un autre . Ceci est pratique si nous disposons d'une ferme de serveurs web de différentes puissances en terme de processeur et/ou de mémoire vive . Ainsi, les serveurs plus puissants pourront recevoir plus de connexions des utilisateurs que les serveurs moins puissants. Si nous reprenons l'exemple de nos 3 serveurs web traitant les 100 connexions des internautes, le répartiteur de charges distribuera 50 connexions au serveur le plus puissant des 3, 30 connexions utilisateur pour le serveur moyennement puissant et 20 connexions utilisateur au serveur le moins puissant des 3. Il est à noter que cette solution de répartition des charges n'est possible que si vous avez la capacité d'héberger vous même votre site Internet. Au niveau de l'hébergement mutualisée cette solution n'est pas possible.

Il existe d'autres méthodes à explorer pour améliorer le temps de réponse de son site web cela va de l'utilisation d'un serveur web Nginx, la mise à jour de son serveur au niveau matériel (ajout de barrettes de mémoire, processeurs ), mais aussi l'optimisation du code côté serveur qui peut avoir un impacte non négligeable sur les performances du serveur . J'y reviendrai sur les différentes techniques d'optimisations de serveurs lors des prochaines publications des articles.

Modifié le 08/06/2014