développement Publié le 20.09.2018

Optimiser les performances d’un site web

Comptons ensemble : 1 seconde, 2 secondes, 3 secondes… 57 % de visiteurs viennent de quitter votre site si celui-ci ne s’est pas affiché.  Voilà qui attire votre attention. Ce chiffre peut représenter un manque à gagner non-négligeable lorsqu’il s’agit d’un site e-commerce. Mais alors comment éviter ces pertes de potentiels clients, comment optimiser les performances de votre site web ? Nous allons dans cet article, nous baser essentiellement sur l’aspect front de l’optimisation des performances d’un site.

 

Nos modes de consommations se sont digitalisés, cela par l’accessibilité à internet via nos ordinateurs puis nos smartphones. De plus en plus de personnes sont connectés et les tâches effectuées sur ces différents device sont multiples : transfert d’argent, achat en ligne, recherche d’information… Ces tâches sont effectuées de plus en plus sur mobiles. En France, 42% des Français préfèrent contre 38% utiliser leurs smartphones pour accéder à internet( et 7% sur tablette). L’action effectuée par l’utilisateur se doit d’être rapide. Les temps de latences sont les premières causes de taux de rebond sur les sites web. Ces derniers se doivent d’être performants sur ordinateur comme sur mobile, qui prend une place majeur, surtout dans l’e-commerce où à l’heure actuelle, plus de 85% des internautes achètent en ligne… L’exemple de la chaîne de magasins Walmart est frappant, ils ont remarqué que pour chaque seconde gagnée en temps de réponse sur leur site web, les conversions (visites qui mènent à un achat) augmentent de 2% et que pour 100ms de gagné, les revenus générés augmentent de 1%.

 

Qu’est-ce que la performance ?

Débutons par définir ce qu’est la performance d’un site web.

Nous parlons principalement de vitesse d’affichage mais aussi du comportement du site lors des périodes de forte affluence (risque de crash, timeout, temps de réponse plus longs). Les performances du site web découlent principalement du poids des fichiers dont il est composé, il s’agit des fichiers images, Javascript, CSS ainsi que toutes les ressources externes intégrées au site. Plus ces fichiers seront optimisés plus l’affichage du site se fera rapidement, des micro-secondes seront gagnées de fichier en fichier.

Il est important de noter que l’optimisation d’un site passe aussi par l’amélioration des performances du BackOffice, la mise en cache côté serveur des données de référence, l’optimisation des requêtes SQL qui permettent d’interroger le(s) base(s) de donnée(s) ou encore l’utilisation de fonctions asynchrones quand cela est possible permettrait d’atteindre cet objectif.

 

Le temps d’affichage – Analyse des performances d’un site web

Il n’y a pas de temps d’affichage “normal” ou habituel. Le sites les plus optimisés mettent en moyenne moins de 2 secondes à se charger. Pour être plus précis dans ces chiffres, prenons l’exemple de d’AirFrance (https://www.airfrance.fr ) et testons sa vitesse d’affichage avec l’outil Page Speed de google (https://developers.google.com/speed/pagespeed/insights/) : La page d’accueil d’Air France s’affiche en 0,8 seconde, écrit “ 0,8 FCP” , FCP( First Contentful Paint) correspondant au délai pour voir apparaître à l’écran du navigateur une première information : texte, image ou autre, puis vient le DCL (DOM Content Loaded) qui mesure le temps nécessaire pour lire et explorer le contenu HTML de la page. Le site d’Air France est comme l’indique l’outil, optimisé et se classe parmi les sites les plus rapides.

Il est aussi possible de passer par WebPageTest (https://www.webpagetest.org) pour analyser plus en détails les performances du site web. Ici, les éléments sont inspectés un par un, cela permet de déceler les fichiers à optimiser. Prenons la page d’accueil du site daveo.fr comme exemple.

3 Run (Tests) sont réalisés, tout en haut des informations nous sont communiqué : la date, le lieu du test et le navigateur utilisé pour le test (IE 11 qui est la 11è version d’Internet Explorer).

Les 6 petits carrés sont des moyennes des trois tests réalisés, ce sont des notes allant de A à F, A étant une bonne note, F mauvaise. A gauche, vous avez remarqué le D entouré de Rouge qui indique que le First Byte Time ( le temps de chargement du premier octet) est mauvais. Et Un X, à droite, qui indique qu’il n’y a pas de CDN (serveurs proxy géographiquement distribués qui coopèrent pour mettre à disposition des fichiers statiques en cache afin de réduire la charge sur le serveur “principal” et réduire le temps de réponse).

 

Puis vint un court récapitulatif des performances ( Performance Results). Juste en dessous, une partie qui nous sera très importante dans l’optimisation de notre site web: les tests.

Les tests sont effectués en trois courses (run). Si l’on clique sur le graphique, on peut y observer plusieurs informations :

On analyse rapidement les éléments “lent” à l’affichage, c’est-à-dire ceux qui mettent plus de temps que d’autres à s’afficher sur notre écran, ceci implique une consommation plus importante de la bande passante disponible.

Le temps d’affichage de chaque élément est analysé. Ici, nous avons cliqué sur un élément qui est à optimiser, un fichier png (une image donc) qui met beaucoup de temps à s’afficher, mais comment l’optimiser ?

 

Comment optimiser ces fichiers

L’optimisation de ces divers fichiers consistera principalement en la réduction du poids de chacun.

En ce qui concerne les images, il faut les compresser avant de les intégrer dans un site, certains outils permettent de réduire considérablement la taille d’une image sans perdre en qualité, l’outil Tinypng est tout indiqué. La taille de l’image peut être réduite de 70%, ce qui n’est pas négligeable et fait gagner quelques millisecondes ! Il est possible d’utiliser des sprites pour les images chargé en CSS, ce qui consiste à stocker plusieurs images en un fichier unique(les images sont positionnées les unes à côté des autres), et non pas une image par fichier.

Toujours dans une logique d’optimisation de bande passante, trois solutions doivent être mises en place:

1 – Minification et bundling des fichiers css et js: Il s’agit d’utiliser des outils qui permettront de réduire la taille de ces fichiers, en supprimant les caractères des sauts de ligne et en utilisant des noms de variables plus courts et ensuite les regrouper afin de diminuer le nombre d’appels vers le serveur. Le logiciel Bundler & Minifier est tout indiqué et se révèle simple d’utilisation.

2 – Activer la compression des fichiers côté serveur, par exemple: la compression gzip qui compresse des fichiers html et css.

https://www.alsacreations.com/article/lire/914-compression-pages-html-css-gzip-deflate.html

3 – Mettre en place une politique de mise en cache, il s’agit en effet d’un ensemble de règles mises en place dans la configuration du site qui permettent au client web de déterminer s’il doit stocker une ressource en cache et pour quelle durée

https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Cache-Control

https://developer.mozilla.org/fr/docs/Web/HTTP/Cache

L’utilisation de CDN peut être très efficace et accélérer le chargement de vos pages. La majorité des navigateurs limitent à 6 le nombre d’appels en parallèle vers un même serveur distant. La technique est donc de limiter et combiner les appels aux différents serveurs distants, certaines techniques comme le bundling qui consiste à réduire le nombre de requêtes http en fusionnant plusieurs scripts dans un seul fichier chargeable en même temps. Par exemple, si vous avez 1 fichier HTML, 5 fichiers CSS puis 5 fichiers javascript, ce qui donne 1+5+5= 11 fichiers, vous pourrez les “bundler” en trois fichiers, un html, un css puis un Javascript.  Le chargement des scripts tiers depuis des CDN peut s’avérer utiles, la plupart des librairies connues proposent ce type d’intégration comme Bootstrap, voici un lien qui peut vous être utiles -> https://www.bootstrapcdn.com.

 

D’autres petits “tips” permettent d’optimiser nos performances. Le simple fait de mettre à jour ses frameworks, d’utiliser des formats de police récents et optimisés tels que WOFF(Web Open Font Format) ou WOFF2 permettent d’optimiser nos performances. Mettre en place un système de cache côté serveur pour les données statiques est aussi une bonne option. Pour rappel, la mémoire cache enregistre temporairement des copies de données, afin de diminuer le temps d’accès lors d’une prochaine visite, exemple: le choix d’une langue sur un site web. Il est fort envisageable de définir une politique de cache control ainsi qu’une date d’expiration dans le header afin de ne pas stocker “trop” de données et inutilement.  

 

Conclusion

L’optimisation des performances d’un site web consiste principalement à augmenter sa vitesse d’affichage à l’écran. Pour améliorer l’affichage de notre site web, il faut procéder à une analyse du site pour voir quels sont les fichiers à optimiser. Une fois les fichiers “lents” repérés, il faut les optimiser, en réduisant le poids de chacun, qu’ils soient sous forme de textuelle ou en images. C’est le chemin obligatoire pour gagner plusieurs millisecondes sur chaque dossier, qui combiné vous feront gagner de précieuses secondes.

 

Voici quelques liens utiles pour analyser et optimiser vos fichiers.

Pour analyser

 

Les solutions :

 

Sources :

https://www.frenchweb.fr/infographie-chargement-de-sites-la-seconde-la-plus-chere-du-monde/88955

https://conversionxl.com/blog/11-low-hanging-fruits-for-increasing-website-speed-and-conversions/

http://elumynt.com/optimizing-website-speed-can-make-money/

https://blog.hubspot.com/marketing/page-load-time-conversion-rates

https://developers.google.com/web/fundamentals/performance/why-performance-matters/

https://docs.pushtechnology.com/cloud/latest/manual/html/designguide/solution/support/connection_limitations.html

Plus d'actualités
Les architectures Microservice
développement
05.07.2018

Les architectures Microservice