La performance web d’un site, ou temps de réponse, est une préoccupation croissante: en tant qu’hébergeur web, nous sommes fréquemment interrogés sur cette question et nous relevons de plus en plus d’exigences sur ce sujet dans les appels d’offre.
Pourtant force est de constater que ce sujet est bien souvent négligé et nombre de sites présentent des temps d’affichage décourageants pour les internautes. Probablement parce que la première préoccupation est l’évolution du contenu et des fonctionnalités. Ensuite, bien souvent par manque d’expérience pour mener une telle démarche.
Le deuxième constat est que l’on commence en général par penser que c’est le serveur , ou l’infra, qui ne répond pas bien, alors que c’est finalement assez rarement le cas et qu’il faut une analyse plus globale. Voici donc un petit guide pour une démarche d’optimisation de la performance de son site web.
Mesurer la performance web d’un site
Cela peut paraitre évident mais le point de départ est faire un état des lieux et de suivre l’évolution de la performance.
Nous avions déjà décrit les méthodes de mesure de performance dans un article précédent, nous n’allons pas y revenir ici. En synthèse OUI faire une mesure régulière est possible et NON ce n’est ni très compliqué ni couteux. Un bon hébergeur web doit être capable de le mettre en place rapidement pour un coût mensuel modique.
On peut donc vérifier la performance dans l’absolu et en tendance dans la durée, mesurant ainsi les impacts des changements effectués en situation réelle. Si le résultat n’est pas satisfaisant, ou se dégrade, il faut passer à l’action, c’est dire analyser pour optimiser ensuite.
Analyser la performance web d’un site
Pour améliorer la performance web, il faut commencer par analyser pour identifier les zones à optimiser, voici quelques outils et méthodes :
Le Page Load Time ou PLT
Ce petit utilitaire installé sur votre navigateur va analyser le temps (en ms) pris par chaque séquence d’une requête web :
- DNS: temps de résolution DNS, il doit tendre vers 0, sinon il y a un problème sur votre serveur ou prestataire DNS.
- Connect: délai pour accrocher le port 80, doit aussi tendre vers 0.
- Request: temps de traitement de la requête sur le serveur, un temps long à ce niveau reflète un serveur sous-dimensionné ou une requête mal structurée.
- Response: temps pris pour renvoyer la réponse, idem doit être très court.
- DOM: temps de chargement de la page sur le poste de travail, en particulier du contenu.
Voici quelques exemples de mesure PLT, attention il est important faire la mesure en connaissant la situation du cache du poste , par exemple purger le cache pour avoir le résultat d’un internaute qui viendrait sur le site pour la première fois. La deuxième visite devrait toujours être considérablement plus rapide.
 |
 |
 |
A plus de 65%, le DOM, ou temps d’affichage de la page, représentera la très grande majorité du temps de chargement. Dans les exemples ci-dessus:
- le 1er a un très bon temps de réponse mais un temps de chargement par le navigateur est de près de 2s, ce qui est encore optimisable pour descendre le temps global à moins de 2s,
- le 2ème cas présente un temps de réponse serveur pour générer la page assez long, 0,5s, mais surtout un temps de chargement par le navigateur désastreux, là il y a vraiment matière à optimiser, près de 12s de chargement, l’internaute va se poser des questions ou s’en aller,
- Le 3ème cas présente un temps de traitement serveur de 3s pour générer la page, ce qui est anormalement long, le DOM est optimisable également mais le vrai gain est sur le temps serveur, car plus de 5s au total, c’est au dessus de la norme.
Le Waterfall ou cascade
On voit que le plus souvent c’est l’affichage par le navigateur qui prend le plus de temps. Dans ce cas, il faut commencer par analyser le Waterfall, ou cascade. Le Waterfall est une représentation graphique de l’enchainement dans le temps des opérations de chargement des éléments d’une page web par le navigateur, une illustration vaut mieux qu’une longue explication:
Premier constat, on voit sur les deux graphiques que le nouveau protocole HTTP/2 est beaucoup plus performant car il permet d’effectuer des traitements en parallèle au lieu de travailler en mode séquentiel. Utiliser un serveur Nginx qui gère bien le HHTP/2 permettra donc d’améliorer les temps de réponse.
Deuxième remarque, on va pouvoir analyser l’enchainement des opérations et détecter celles qui prennent le plus de temps. Quelques exemples d’action d’optimisation :
- la concaténation , pour traiter plusieurs opérations en une fois, et réduire le nombre de lignes,
- l’intégration des petites images dans le code,
- le Lazyloading, le chargement des premiers éléments visibles d’un page longue, le reste étant chargé lorsque l’on scroll vers le bas,
- la gestion de la taille des images, leur compression ou l’usage d’un CDN,
- la mise en cache,
- l’ordonnancement des opérations, c’est à dire l’ordre dans lequel elles s’enchainent, leur priorisation.
Enfin, ce qui est important est de vérifier que les vues suivantes, ou Repeat View, c’est à dire quand l’internaute revient sur le site, sont bien beaucoup plus courtes. Une Repeat View en très forte amélioration indique une bonne gestion des méthodes de cache du navigateur.
Bien souvent le gain sur l’affichage du navigateur vous permettront de réaliser des gains de 30 à 50% de temps d’affichage.
L’APM, Application Performance Management
Dans ce cas, on est face à une lenteur du « Request » du PLT, donc au niveau du serveur qui tarde à générer la page, et il faut analyser ce qui se passe comme nous l’avons fait avec le Waterfall sur le navigateur.
Votre hébergeur doit vous fournir des métriques de votre infrastructure (usage CPU, CPU load, charge RAM, trafic internet, statistiques de visites…) qui permettront d’analyser si l’infra elle-même n’est pas en cause. Cela peut arriver, mais en pratique, c’est très rarement le cas car les serveurs sont désormais très puissants et leur dimensionnement plutôt généreux. Il faut donc se tourner vers l’applicatif lui-même.
L’APM ou Application Performance Management est un logiciel qui va analyser l’ensemble des opérations de bout en bout de votre application , tracer les dépendances, détecter les étapes critiques , et identifier les dysfonctionnements. Parmi les solutions du marché, vous trouverez NewRelic, AppDynamics ou encore Dynatrace par exemple.
L’APM va vous permettre d’identifier des zones d’optimisation et les opérations qui prennent le plus de temps, les actions les plus récurrentes sont les suivantes:
- optimisation du code lui-même,
- meilleure gestion du cache applicatif,
- configuration des plug-ins applicatifs, par exemple de votre CMS,
- optimisation des requêtes sur la base de données,
- amélioration des conditions de fonctionnement de la base de données, la gestion des index est un grand classique,
- amélioration des performances de l’infra elle-même.
Ce travail peut et doit être mené en parallèle avec votre hébergeur/infogéreur et votre équipe de développement. Le temps à y consacrer est rarement très important mais il exige une forte expérience , de la méthode et des compétences pointues pour analyser les lenteurs et identifier les actions correctives qui elles sont souvent assez rapides à mettre en œuvre.
Si votre hébergeur n’est pas en mesure de vous accompagner sur ces sujets, c’est probablement que vous n’avez pas fait le bon choix ou que vous avez retenu un fournisseur Cloud ou IaaS qui se contente de vous fournir de la puissance serveur sans aller sur les couches applicatives.
L’optimiseur de performance FEO de Fasterize
Si vous avez peu de temps à consacrer à l’optimisation, parce que la sortie des nouveaux modules et nouvelles fonctionnalités reste prioritaire, vous pouvez faire appel à une solution logicielle qui va appliquer à votre site ou applicatif web un certain nombre de bonnes pratiques de Front End Optimization ou FEO. Avec le FEO, on va travailler le temps d’affichage sur le poste de travail car comme on l’a vu plus haut : à plus de 65%, le temps d’affichage de la page représentera la très grande majorité du temps de chargement.
Alfa-Safety a retenu la solution SaaS de la société Fasterize qui combine deux actions majeures :
- l’optimisation applicative: Fasterize va réduire le nombre de requêtes, alléger le contenu sans altérer le rendu pour l’internaute et changer l’ordre de réalisation des opérations pour améliorer le temps d’affichage perçu par l’internaute,
- un CDN externe: Fasterize déploie et se charge de configurer pour votre application un CDN externe au plus près de vos internautes pour améliorer les temps de chargement, accessoirement vous réduisez également la bande passante internet consommée en sortie de vos serveurs.
Fasterize est une solution en mode SaaS, il n’y a rien à installer, et le logiciel applique de lui-même des règles et optimisations que l’on peut consulter sur son tableau de bord. Le cas échéant on peut garder la main et en désactiver certaines.
Très simple à mettre en oeuvre, cette solution vous évite d’investir dans des compétences pointues ou de passer du temps à analyser et corriger. Son coût est faible et son ROI immédiat au regard du temps que vous pourriez passer à faire les analyses par vous mêmes. Par ailleurs, les évolutions de votre applicatif seront automatiquement prises en charge. Enfin, le service s’autofinance même en partie lui-même au travers du gain en bande passante.
Alfa-Safety propose régulièrement d’intégrer le service Fasterize dans ses contrats d’hébergement et infogérance.
Conclusion : il est simple d’agir sur sa web performance
On voit donc qu’il n’est pas compliqué ni forcément couteux d’agir sur sa web-performance: on peut très facilement et simplement la mesurer , en analyser les lenteurs et identifier les actions correctives tout en mettant en place des solutions d’optimisation continue comme Fasterize.
Même si l’infra serveurs est rarement en cause, votre hébergeur infogéreur doit être en mesure de vous accompagner sur ces sujets en collaborant étroitement avec vos équipes de développement, et vous proposer les solutions adaptées à votre budget et vos technologies. Des questions, un doute à lever ? Visitez notre page dédiée à la performance web et n’hésitez pas à nous contacter.
