Améliorer les performances de votre site Web

L'amélioration des performance d'un site Web consiste à améliorer le rendu visuel du site afin que l'utilisateur perçoive que les pages et les images se chargent rapidement afin qu'il n'est pas l'impression d'avoir à attendre.

Pour cela, nous aovns à travailler sur la rapidité du chargement et du traitement que ce soit de la page, des fichiers images et du javascript.

L'objectif est d'avoir le rendu visuel le plus rapide possible pour que l'utilisateur ait une impression de rapidité même si tout n'est pas déjà chargé.

Pour cela, nous avons à jouer sur plusieurs facteurs: temps de récupération des éléments depuis le serveur, taille des éléments, coût de traitement au niveau mémoire et CPU pour l'affichage et les interactions utilisateurs.

Voici les conseils pour améliorer la perception de votre site Web.

Sommaire

• Améliorer le rendu visuel lors du chargement
  
  • Allouer la zone d'affichage des images
  • Indiquer la couleur de fond des images
  • Charger les fichiers CSS avant la page
  • Charger les fichiers Javascript après la page
  • Externaliser le code Javascript
• Optimiser les requêtes
• Utiliser le cache du navigateur
• Content Delivery Network (CDN)
• Paralléliser les téléchargements
• Diminuer la complexité du site
• Simplifier le document HTML
• Minimiser les styles CSS
• Alléger le code Javascript
• Avoir du code Javascript performant
• Diminuer la taille des éléments
• Compresser
• Diminuer la taille des images
• Dimensionner les images
• Diminuer la taille des fichiers Javascript, HTML et CSS
• Nettoyer et supprimer les éléments inutiles
• Diminuer le nombre d'éléments
• Regrouper les fichiers Javascript en un seul
• Sprite : regrouper les images en une seule
• Supprimer les erreurs
• Passer la validation W3C
• Corriger les erreurs Javascript et CSS
• Optimiser le serveur
• Serveur Apache
• Serveur nginx
• Serveur J2ee

Améliorer le rendu visuel lors du chargement

Le rendu visuel du chargement de la page à l'utilisateur doit être la plus fluide et la plus rapide possible.

Allouer la zone d'affichage des images

Nous indiquons au navigateur la taille des images en hauteur et en largeur afin qu'il connaisse leur taille avant d'avoir terminé de les charger. Le navigateur alloue l’espace qui sera prise par ces images dans la page.

Ainsi, au fur et à mesure que les images apparaissent, nous n'avons pas l'effet d'agencement et de déplacement des éléments lors du chargement de la page.

L'utilisateur voit la structure finale de la page afin que celle-ci ne soit complètement chargée et lui permet de commencer à lire la page même si toutes les images n'ont pas finies d'être chargées.

Indiquer la couleur de fond des images

En ajoutant une couleur de fond aux zones qui vont contenir les images, les apparitions des images vont moins détourner l'attention de l'utilisateur qui a déjà commencé à lire la page.

En effet, l’apparition d'une image foncée sur un fond de couleur foncée est moins visible que si elle apparaissait sur un fond blanc.

Ainsi, les couleurs de fond des zones correspondent aux couleurs de fond des images qui y seront présentes.

Charger les fichiers CSS avant la page

La déclaration des fichiers CSS utilisés dans la page doit être faite dans l'en-tête de la page afin que les fichiers CSS soient chargés le plus tôt possiible. Pour cela, la balise <link> est à utiliser.

De plus, la page ne doit pas contenir de code CSS afin que le navigateur n'ait pas de traitement supplémentaires lors du chargement de la page.

Charger les fichiers Javascript après la page

Quand le navigateur charge un fichier javascript dans le header de la page, il stoppe le chargement du reste de la page pendant le chargement et l’interprétation de ce fichier javascript. 

Pour éviter de perdre ce temps, il est conseillé de mettre le chargement des fichiers Javascript en fin de page, juste avant la balise « </body> ».

De même, pour le code Javascript situé dans le contenu de la page HTML, le navigateur marque également une pause.  Ce code est à déplacer en fin de page. Cependant ce code ne doit pas rester dans la page et doit être externalisé dans un fichier Javascript séparé, voir ci-dessous :

Externaliser le code Javascript

Le code Javascript ne doit pas être situé dans le contenu de la page HTML afin de ne pas alourdir le traitement de la page par le navigateur.

Tout le code Javascript doit être situé dans un fichier Javascript séparé qui pourra ainsi être minifié, compressé et mis dans le cache du navigateur.

Optimiser les requêtes

Utiliser le cache du navigateur

 Les navigateurs disposent d'un cache qui permet de stocker localement les derniers fichiers récupérés sur un site Web. Ainsi le navigateur ne charge pas deux fois la même image ou le même fichier. ceci permet d'économiser de la bande passante.

Il faut de plus indiquer combien de temps le fichier reste en cache afin d'éviter que le navigateur ne fasse une requête au serveur pour savoir s'il y a une mise à jour.

Pour cela, nous ajoutons dans l'en-tête de la page HTML Expires et Cache-Control pour indiquer la durée de vie du fichier dans le cache du navigateur.

Au niveau du serveur Apache, le mod_expires permet d'indiquer la durée de vie d'un ensemble de fichiers à l'aide du fichier .htaccess.

Il est ainsi possible d'indiquer qu'un fichier CSS sera conservé pendant un an et le navigateur ne questionnera plus le serveur pour savoir s'il y a une mise à jour de ce fichier.

Cependant, dans le cas d'une réelle mise à jour, nous avons à renommer le fichier CSS afin que le navigateur aille récupérer ce nouveau fichier CSS au lieu d'utiliser l'ancien qu'il a encore en cache.

L'utilisation du cache du navigateur est primordial pour accélérer l'affichage des pages lorsque l'utilisateur navigue dans un même site.

Content Delivery Network (CDN)

Le CDN consiste à avoir un serveur supplémentaire contenant les fichiers du site et qui est géographiquement plus proche de l'utilisateur afin que celui-ci accède plus rapidement aux fichiers.

Un utilisateur situé en France visite un site situé aux Etats-Unis. Normalement, tous les fichiers vont transiter entre le serveur des Etats-Unis et l'utilisateur situé en France. Hors, à Paris, un serveur contient une copie des fichiers du site américain. Grâce au CDN, les fichiers seront récupérés sur le serveur de Paris au lieu du serveur des Etats-Unis.

Ceci permet de diminuer la distance et donc le temps de récupération des fichiers.

Des sociétés sont spécialisées dans le CDN avec des serveurs de cache pour les entreprises. Il s'agit de leur fournir les fichiers à mettre en cache et il n'y a ensuite plus rien à faire. Par exemple, la société Incapsula propose une offre gratuite qui permet de faire un essai.

Paralléliser les téléchargements

Par défaut, le navigateur limite le téléchargement en parallèle de plusieurs fichiers sur le serveur d'un même nom de domaine. Par exemple, IE7 limite à 2 le nombre de fichiers téléchargés en parallèle sur les serveurs d'un même nom de domaine.

Ainsi, le fait de placer les fichiers sur des noms de domaine séparés permet d'augmenter le nombre de fichiers téléchargés en même temps.

Ceci correspond au cas du CDN (voir ci, où le serveur local a un nom de domaine différent. Le navigateur va ainsi télécharger 4 fichiers en parallèle au lieu de 2 car il va récupérer 2 fichiers sur le serveur au Etats-Unis et 2 fichiers sur le serveur en France.

Récupérer les fichiers sur des noms de domaines différents permet une parallélisation plus importante de la récupération des fichiers.

Diminuer la complexité du site

Plus la page, les styles CSS et le code javascript sont complexes, plus le navigateur sera sollicité pour traiter les informations pour effectuer le rendu de la page.

C'est pourquoi il est important de diminuer la complexité des pages pour en accélérer leur affichage.

Simplifier le document HTML

Le nombre d'éléments dans la structure DOM de la page a un impact sur les ressources nécessaires utilisées par le navigateur.

C'est pourquoi la structure de la page doit être la plus simple possible pour être traité rapidement par le navigateur. Ceci diminue le temps avant le début de l'affichage de la page par le navigateur.

Minimiser les styles CSS

Les nouveaux styles CSS permettent d'afficher de nouveaux effets graphiques sympathiques, comme les effets d'arrondi, d'ombres, de dégradés. Cependant cela nécessite les ressources graphiques des navigateurs ce qui peut ralentir l'affichage de la page.

C'est pourquoi il est important de n'utiliser les effets CSS que lorsque cela est nécessaire et que cela apporte une vraie valeur ajoutée à la présentation de la page.

Réduire les effets CSS permet de réduire la charge nécessaire de traitement par le navigateur Web et d'accélérer l'affichage de la page.

Alléger le code Javascript

Les bibliothèques et de certaines fonctions Javascript doivent être incluses et utilisées avec précaution pour ne pas alourdir le traitement de la page.

Il faut veiller à n'inclure une librairie Javascript que si elle est vraiment utile. L'idéal est de n'inclure que les modules de la bibliothèque qui sont vraiment utilisés.

Avoir du code Javascript performant

Le code Javascript doit être optimisé pour alléger la mémoire du navigateur.

Il est nécessaire de connaître plusieurs bonnes pratiques dans ce domaine pour optimiser le code Javascript.

Par exemple, certaines fonctions Javascript, comme "eval()" sont à éviter. En effet, "eval()" redémarre le compilateur Javascript pour interpréter l'expression passée en paramètre. Ainsi il ne faut pas utiliser "eval()" pour interpréter du contenu JSON, mais utiliser des fonctions de bibliothèques dédiées, comme json2js.

Javascript a un fort impact sur les ressources nécessaires pour le navigateur.

Le fait de diminuer les traitements Javascript et d'avoir un code simple et léger accélère le rendu de la page.

Diminuer la taille des éléments

Le fait de diminuer la taille des éléments permet de gagner en bande passante et en temps de chargement.

Compresser

Compresser le contenu avec « mod_deflate », voir « gzip » : permet de réduire la taille des fichiers jusqu’à 90% et donc de réduire la bande passante, cependant nous avons en contrepartie une petite perte côté CPU.

La compression est gérée par tous les navigateurs et peut s'appliquer à tout type de contenu: pages HTML, images, fichiers javascript.

La compression nécessite également un traitement supplémentaire de la part du serveur.

Diminuer la taille des images

Le format des images (GIF, PNG, JPEG) impacte sur la qualité et la taille de l'image. Ainsi une image avec peu de couleur ou des couleurs transparentes aura comme format PNG qui permet d'embarquer uniquement les couleurs nécessaires. Le format JPEG sera utilisé pour une grande image avec beaucoup de couleurs différentes.

Réduire la taille des images permet de gagner en bande passante.

Dimensionner les images

Nous devons vérifier que la dimension de l'image correspond bien à sa dimension d'affichage dans la page. En effet, une image qui est réduite ou agrandie nécessite un traitement supplémentaire par le navigateur.

Faire correspondre la taille réelle de l'image avec sa taille affichée permet de gagner en traitement par le navigateur

Diminuer la taille des fichiers Javascript, HTML et CSS

Les fichiers Javascript complexes peuvent devenir volumineux et la technique consiste à avoir une version dite minifiée, c'est à dire sans espace et avec le moins de caractères possibles. On peut diviser par 5 la taille d’un fichier javascript.

De même, les pages HTML peuvent contenir des commentaires, ainsi que beaucoup de sauts de ligne et d'espace, en particulier si elles ont été générées par un framework PHP ou J2ee.

Il est également possible de minifier les fichiers CSS, en supprimant des sauts de lignes et les espaces. L'outil YUI Compressor permet de compresser les fichiers CSS.

Le fait de minifier les fichiers permet de réduire leur taille et de gagner en bande passante.

Nettoyer et supprimer les éléments inutiles

Le nettoyage consiste à supprimer les éléments inutiles dans les pages HTML, les fichiers Javascript et CSS.

Nous ne devons conserver que les éléments réellement utilisés pour l'affichage de la page.

Cette recommandation demande à investiguer le contenu et à supprimer en connaissance de cause.

Diminuer le nombre d'éléments 

En diminuant le nombre d'éléments à charger, nous diminuons le nombre de requêtes et gagnons ainsi du temps de chargement.

Regrouper les fichiers Javascript en un seul

Combiner pour avoir un seul fichier javascript au lieu de plusieurs, cela permet de ne mettre en cache qu’un seul fichier et améliore la parallélisation du chargement des fichiers

Sprite : regrouper les images en une seule

Cette technique consiste à regrouper plusieurs petites images en une seule image. Le style CSS indique quelle section de l'image afficher. Ainsi nous effectuons une seule requête au lieu de plusieurs petites requêtes.

Cette technique est par exemple utilisée par Google sur ses pages de recherche où les images des boutons de pagination "Gooooooogle" sont situées dans une seule et même image :

Pas besoin de code Javascript, il s'agit d'utiliser le comportement de base du CSS pour cibler la zone de l'image à afficher à l'aide des propriétés  CSS "background-position", "width" et "height".

Ceci permet de diminuer le nombre de requêtes pour les petites images.

Cependant, il faudra veiller à ne pas créer une trop grande image qui aurait comme conséquence d'alourdir son traitement par le navigateur.

Supprimer les erreurs

Passer la validation W3C

La validation W3C permet de détecter les erreurs à corriger dans le code HTML. La présence d'erreurs oblige le navigateur à les corriger par lui-même. Corriger ces erreurs permet de gagner en rapidité au niveau du chargement de la page.

Il faut d’abord se concentrer sur les erreurs les plus importantes comme par exemple la non fermeture de balises plutôt que de lister les liens sans attribut « alt »

Corriger les erreurs Javascript et CSS

Il faut que les codes Javascript et CSS n'aient pas d'erreur. Cela évite au navigateur d'avoir à gérer ces erreurs et de gagner du temps.

Pour cela il est nécessaire de coder proprement et de tester son code.

Optimiser le serveur

Le serveur doit également être optimisé pour fournir rapidement les ressources demandées.

Serveur Apache

Le serveur Apache est adapté pour délivrer rapidement le contenu d'un site Internet statique.

Serveur nginx

Le serveur nginx est un petit serveur léger qui permet de délivrer rapidement du contenu sans prendre trop de mémoire serveur.

Le serveur Apache peut être couplé avec le serveur nginx pour que ce dernier délivre plus rapidement le contenu statique. Pour cela, nous pouvons placer le serveur nginx en reverse-proxy sur le serveur Apache. Dans ce cas le reverse-proxy indique que certaines requêtes seront traitées directement par le serveur nginx et d'autres seront redirigées vers le serveur Apache.

Cette solution permet de faire face à une forte montée en charge du serveur.

Serveur J2ee

Il faut éviter de solliciter le serveur J2ee pour récupérer du contenu statique, comme des images ou des fichiers CSS qui ne bougent pas. Des traitements inutiles seraient alors effectués côté serveur J2ee pour fournir ces fichiers.

Pour éviter cela, il est possible de mettre en place un serveur Apache ou nginx chargé de délivrer ces ressources statiques. Le serveur d'application n'a ainsi plus à gérer les requêtes de récupération de ces fichiers.

Cela accélère la réponse du serveur qui fournit plus rapidement le contenu de ces fichiers.