Comment améliorer les performances de votre site web ?

La performance et la vitesse de chargement des sites sont cruciales pour garantir une expérience utilisateur de qualité qui répond aux exigences des consommateurs. Les efforts déployés par les marques pour leurs stratégies d'acquisition ou pour l'optimisation des pages de leurs sites ne doivent pas être pénalisés par un problème de performance. 

Pour mettre en place les bonnes pratiques et savoir identifier les problèmes de performance sur votre site, nous avons interrogé Nicolas Hodin, Customer Success Engineer chez Fasterize. Nicolas exerce depuis plus de 10 ans dans le secteur E-commerce. Après plusieurs années en tant que développeur free-lance, il s'est spécialisé en performance web. 

En quoi l'optimisation de la performance des sites web est-elle cruciale pour les marques ? Qu'est-ce qu'un temps de chargement « trop » long et quel est le manque à gagner ?

Un site rapide, c’est indispensable pour une marque. C’est même la clé pour des utilisateurs satisfaits qui vont au bout du tunnel de conversion. Après avoir investi dans des campagnes d’acquisition et de fidélisation, il ne faut surtout pas tout gâcher avec une mauvaise expérience utilisateur !

La vitesse des sites est l’exigence UX principale pour les internautes. Avec le développement des usages mobiles et la possibilité d’avoir accès à des services et des produits partout, tout le temps, sur tous les devices, la fluidité de la navigation doit être au rendez-vous en toutes circonstances. Il faut savoir qu’en situation de mobilité, 85% des internautes s’attendent même à ce que les pages se chargent encore plus vite que sur desktop. C’est dire si la vitesse est centrale pour l’expérience en ligne. 

Si des pages rapides sont essentielles, ce serait difficile d’indiquer un temps de chargement idéal dans l’absolu, car la tolérance peut varier selon le contexte de navigation. Par exemple, des études ont montré que pour des sites comparatifs, si l’affichage d’une page de résultats est ralenti, les conversions sont meilleures car les utilisateurs ont l’impression que le moteur a véritablement travaillé pour chercher et comparer. De l’autre côté, comme l’indique une étude de Google : 53% des utilisateurs quittent une page si elle met plus de 3 secondes à se charger. 

Pour synthétiser : un site doit évidemment être le plus rapide possible, mais le contexte peut jouer sur la perception de vitesse et sur la capacité à maîtriser son impatience.

Au-delà du ressenti et de l’expérience, il y a aussi un réel enjeu business. La vitesse de chargement a un impact direct sur les taux de conversion. Nous l’observons chez nos clients, dont certains ont vu l’engagement et les taux de conversion décoller de près de 40% en améliorant la vitesse de chargement. 

Quelques millisecondes peuvent sembler anecdotiques dans l’absolu, mais les économiser peut contribuer à générer des résultats business conséquents.

Selon une étude de Deloitte Digital, 0,1 seconde de temps de chargement en moins, c’est potentiellement +8,4% de conversions dans le retail, +10,1% de conversions dans le voyage, et +8,6% de pages vues par session dans le luxe. 

Et de l’autre côté, nous avons aussi fait le calcul du manque à gagner pour des sites non optimisés, en observant près de 10 verticales retail E-commerce : il va de plusieurs dizaines de milliers d’euros à près de 5 millions par an… alors qu’il suffirait parfois de quelques centaines de millisecondes en moins sur le temps de chargement pour combler ce manque. 

Quelles sont aujourd'hui les principales difficultés rencontrées par les marques concernant l'optimisation de la performance de leurs sites web ? 

On peut se rendre compte d’un problème de lenteur en étant dans l'incapacité de diagnostiquer l’origine ; et quand bien même la cause serait identifiée, la corriger n’est pas toujours trivial. La plupart du temps, les principales difficultés que les marques rencontrent pour optimiser leur performance web sont le manque de ressources et de temps, voire le manque d’expertise.

En effet, la webperf est une expertise à part entière, et les techniques évoluent rapidement. Il faut donc être en mesure de suivre les nouvelles métriques, les nouveaux outils, et appliquer les bonnes pratiques en continu. 

Cela demande évidemment des ressources, du temps, du budget… Le trio classique. Une fois les corrections et les optimisations déployées, ce n’est pas fini, il faut les maintenir dans la durée. En cela, la webperf fonctionne exactement comme le SEO : on ne rend pas son site rapide une bonne fois pour toutes, c’est un travail de fond.

A tout cela s’ajoutent les effets de bord potentiels et les contraintes techniques et métier. Il faut savoir articuler les optimisations intelligemment les unes avec les autres, et les appliquer en restant en phase avec les besoins métier.

Je vais vous donner quelques exemples concrets : un site sans aucun JavaScript et sans aucune pub est potentiellement beaucoup plus rapide. Mais un média ne pourrait pas se passer de pub, et un site E-commerce ne pourrait pas se passer de fonctionnalités de personnalisation. 

Un autre exemple qui concerne tous les secteurs : les images occupent en moyenne 50% du poids total d’une page, et pour rendre les pages légères, il faut compresser les images. Mais pour la plupart des sites, ces images ont aussi un rôle informatif ou promotionnel, c’est pourquoi elles doivent conserver une très bonne qualité, pas question de les compresser au détriment de la qualité visuelle. 

Les optimisations webperf ne peuvent pas être appliquées sans considérer le contexte global.
C’est une affaire de compromis pour articuler les techniques d’optimisation entre elles, et les rendre compatibles avec le métier et le business. 

Toutes ces raisons font qu’il est généralement beaucoup plus intéressant de se reposer sur une solution d'optimisation qui permet de tout automatiser, pour appliquer les bonnes pratiques sans efforts, les articuler intelligemment, et surtout les maintenir efficacement dans la durée tout en soulageant les équipes techniques.

Les consommateurs sont à la recherche d'expériences fluides et dynamiques, ce qui incite les marques à développer de nouvelles fonctionnalités innovantes. Faut-il faire un choix entre performance et amélioration des sites web ?

Vitesse de chargement et qualité de l’expérience utilisateur vont de paire, et il est toujours possible de trouver un équilibre. Je citais l’exemple des publicités et de la personnalisation, et bien d’autres fonctionnalités à valeur ajoutée sont utiles, voire indispensables pour un site internet : tracking, chat, géolocalisation, tag manager, et tests A/B bien sûr ! Elles améliorent concrètement l’expérience client.

Plus il y en a, plus le site est lent ? Nous avons mené l’enquête, et nous avons remarqué que contre toute attente, ce n’est pas le nombre qui importe, c’est la façon dont ces scripts tiers sont implémentés.

Si un site est rapide, avec des pages légères et bien optimisées, il pourra facilement absorber le poids supplémentaire des scripts tiers. Il faut aussi veiller à prioriser et hiérarchiser ces scripts, car ils peuvent allonger jusqu’à 3 ou 4 fois la durée nécessaire pour accéder à certaines fonctionnalités. Tous n’ont donc pas besoin d’être chargés dès le début de l’affichage. Leur chargement, leur analyse et leur exécution par le navigateur ont parfois intérêt à être repoussés pour rendre la page interactive au plus tôt, afin d’améliorer l’expérience utilisateur.

Comment s’assurer que les stratégies d’A/B testing et de personnalisation des marques n’affectent pas les performances de leur site web ?

Il faut bien avoir présent à l’esprit qu’un test A/B et que la personnalisation sont essentiels pour optimiser les performances, mais ce n’est pas gratuit en termes de vitesse de chargement. Il faut donc en user à bon escient. Mais la bonne nouvelle est qu’il existe des techniques pour garder des pages réactives et maintenir la sensation de vitesse !

Tout d’abord, rappelons qu’un outil de test A/B ne doit pas se transformer en outil d’administration du frontend ni en tag manager ; et quand un test est fini, les scripts doivent être supprimés, sinon ils continuent à être appelés, et c’est du temps de chargement ajouté pour rien.

Sur le plan technique, si un script de test A/B modifie des éléments du DOM, ils doivent être exécutés le plus tôt possible sans être bloquants pour l’exécution et le chargement des autres ressources, grâce à des appels asynchrones. 

Enfin, pour économiser du temps de résolution DNS, l’hébergement du script qui assure la personnalisation peut être une bonne solution ; tout comme le fait de cacher les éléments de la page le temps d’appliquer la personnalisation, pour ne pas dégrader la première impression lors de l’affichage (notez que dans ce cas, il faut trouver un compromis avec les métriques Start Render, qui marque la fin de la page blanche, et le Largest Contentful Paint, qui indique le moment où le plus grand élément s’affiche sur la page).

Une dernière option intéressante en termes de webperf consiste à appliquer la personnalisation côté serveur. Avec une solution hybride, les équipes peuvent garder la souplesse et l'autonomie d'une solution client-side, et les équipes techniques peuvent implémenter les tests côté serveur. 

Quels sont les leviers à activer pour améliorer sa vitesse de chargement de manière significative, sur le long terme ? 

Pour résumer, l’amélioration de la vitesse de chargement passe par des pages légères, et donc, entre autres par :

• la compression des images (WebP / AVIF) et des ressources (Gzip / Brotli),
• un code minifié (JS, CSS, HTML),
• la concaténation des fichiers dans certains cas, 
• des appels priorisés des scripts,
• des ressources lazyloadées intelligemment,
• un nombre de requêtes réduit,
• la mise en place d’un système de délestage en cas de pic de trafic, pour soulager les serveurs…

Aujourd’hui, avec l’arrivée des Core Web Vitals de Google, il faut aussi être d’autant plus vigilant sur la vitesse d’affichage, la stabilité visuelle des éléments sur la page et l’interactivité. 3 indicateurs permettent d’évaluer ces critères déterminants pour la qualité de l'expérience utilisateur, et que Google intègre à son algorithme, respectivement : le Largest Contentful Paint (LCP), le Cumulative Layout Shift (CLS) et le First Input Delay( FID).

Il faut aussi veiller à optimiser sa stratégie de cache, et pour les sites internationaux, un Content Delivery Network (CDN) permet de rapprocher le contenu des utilisateurs pour gagner encore de précieuses millisecondes sur le chargement des pages.

Côté traitement des requêtes et transport des données, le passage aux protocoles HTTP/2 et HTTP/3 permet d’améliorer encore les performances grâce au multiplexage des requêtes.

Comme je l’évoquais, appliquer et maintenir toutes ces optimisations demande de l’expertise, du temps et des ressources. Certaines structures sont en mesure d’absorber cette charge en interne, parce que les équipes sont suffisamment formées et nombreuses pour faire du monitoring et de l’amélioration continue. 

Toutefois, le fait d’automatiser l’optimisation du frontend permet de gagner un temps précieux, d’être plus efficace, et de soulager les équipes techniques qui peuvent se consacrer à du développement et de l’innovation plutôt qu’à de la maintenance !