Blog & Stories

[Compte rendu] ADW #8 : Performance web, mesurer, optimiser pour mieux convertir

Pour le 8ème volet de la saison 3 des Ateliers du Web, nous avons eu le plaisir d’accueillir Damien Jubeau de DareBoost. Ce mardi, il était présent à la Cantine pour nous exposer son expertise unique et automatisée pour optimiser son site internet en 15 points clés. 

Damien Jubeau est CEO de DareBoost, outil en ligne d’analyse et de surveillance des sites Internet. Lors de son intervention à la Cantine, il a notamment répondu à ces différentes interrogations :

– Comment mesurer la vitesse d’un site web ?

– Quels sont les KPIs à suivre pour améliorer les performances d’un site internet et mieux convertir sur le web ?

Constats :

Qui n’a jamais ressenti de la frustration en observant la barre de chargement charger, charger, charger.. sans rien afficher. L’attente provoque de la frustration et un visiteur qui a la sensation d’attendre trop, c’est un client qui a de grandes chances de sortir de votre site internet. Comment optimiser alors son site ?

#1 : Les enjeux : la conversion

Le premier enjeu, c’est la conversion ! Il est important de savoir, qu’une seconde de temps supplémentaire à attendre équivaut à une perte de 7% de taux de conversion perdu. Et si vous rajoutez encore une autre seconde supplémentaire la perte sera d’environ 27%. Un taux à relativiser, car il dépend de l’écosystème concurrentiel et de l’activité. Un autre taux significatif qu’il est important de connaître est que 85% des mobinautes s’attendent à un chargement au moins aussi rapide que sur un desktop, c’est-à-dire un moteur de recherche de bureau.

#2 : Les enjeux : acquisition

Depuis 2010, Google annonce vouloir pénaliser 1% des sites trop lents. La volonté du moteur de recherche est de privilégier l’expérience client et de proposer des contenus pertinents et rapides. C’est pourquoi en 2015, Google est à l’initiative de deux tests : le Red Slow Label et le Slow To Load. Ces initiatives avaient pour objectifs de mettre en lumière, grâce à des avertissements rouges placés devant les sites internet et directement des les résultats de recherches, les sites trop lents.

#3 Et bien d’autres…

Il y a beaucoup d’autres enjeux, autour de la performance et sur le fait d’avoir un site rapide, comme par exemple, le référencement, le taux de rebond, la tenue de charge, le coût adwords, le referral, le taux de conversion, le panier moyen, l’image de marque ou encore la sécurité.

#4 Comment accélérer ? 

La question est maintenant de savoir, comment optimiser la vitesse de son site internet ?

Beaucoup de préjugés doivent être soulevés. En effet, certaines personnes pensent que la connexion de l’internaute, son périphérique ou encore son navigateur peuvent être responsable du ralentissement du chargement. Prétexter, que ces facteurs jouent un rôle sur le temps de chargement n’est pas absurde, car ils vont l’influencer. Mais malheureusement, ce sont des points sur lesquelles, on ne peut rien faire.

Autre préjugé, celui de résoudre le problème de chargement en changeant d’hébergeur. Là encore, ce n’est pas la meilleure solution. Comme nous l’explique Steve Souders, responsable de la performance chez Yahoo et Google, 80%, 90% du temps de chargement qui est ressenti par un utilisateur final, vient de la construction de la page.

80% à 90% du temps de chargement qui est ressenti par un utilisateur final, vient de la construction de la page – Steve Souders

Par exemple : Shopzilla, acteur américain a lancé un chantier d’optimisation web. Ils ont réussi à diminuer leur temps de chargement passant de 7 secondes à 2 secondes. Le tout en réduisant aussi leur coût de serveur de moitié. Cet exemple a pour but de montrer que changer de serveur n’est pas forcément la bonne solution. Pour l’anecdote, Shopzilla a vu augmenté de 10% son taux de conversion.

#5 Mesurer 

Une étape importante, car on ne peut pas optimiser son site internet sans mesurer. Il existe deux approches  :

Real User Monitoring (passif) : le principe est de regarder sur notre site web, le temps de chargement auxquelles les visiteurs sont confrontés. C’est une méthode complexe, car chaque visiteur va avoir sa connexion, son périphérique et ses habitudes. Mais la particularité de cette démarche, est que nous en disposons déjà tous, intégrer à nos outils de statistiques classiques.

Par exemple : dans Google Analytics, on va pouvoir retrouver un onglet comportement et vitesse du site. Il devient donc facile de visualiser ce qui se passe pour nos visiteurs. Point de vigilance, car par défaut Google collecte les informations sur un échantillon des visiteurs. Il est important de s’assurer que ce dernier soit représentatif.

Monitoring Synthétique(actif) : le principe est de réduire la complexité de la première méthode, en simulant un ou plusieurs visiteurs. L’idée est d’obtenir un référentiel dans un contexte que l’on maîtrise. L’avantage est que l’on peut mesurer, même si on travaille sur une version en développement. 

l#6 TTFB

Le Time To First Byte est un indicateur qui permet de mesurer le temps de réponse du serveur.

Si on pense avoir un problème du côté du serveur, il est possible de tester son temps de réponse. Point de vigilance, car si vous effectuez des mesures de performances, attention à la localisation du point test, car ce dernier peut impacter sur cet indicateur. Pour avoir une idée, Google recommande un traitement qui n’excède pas 200 ms.

#7 Start Render

Le Start Render se base sur l’expérience client, le principe est de savoir au bout de combien de temps quelque chose s’affiche sur la page. Un temps important pour le visiteur, car c’est le premier signal qu’on va lui envoyer. Il doit être un signal positif, pour donner envie au visiteur de rester sur le site internet.

#8 Visually Complete

Le Visually Complete permet de mesurer, par vidéo, le temps de chargement de la partie au-dessus de la ligne de flottaison. C’est-à-dire la partie visible à l’écran avant que l’internaute n’est besoin de scroller.

#9 Speed Index

Le Speed Index vise à savoir ce qui se passe entre le Start Render et le Visually Complete. Le principe est d’avoir un indice de performance qui va résumer tout ce qui se passe pendant ce temps-là. Le Speed Index va nous permettre d’estimer le temps moyen d’affichage des parties visibles. L’idéal est d’être en-dessous de 1000 ms.

#10 Surveiller

L’objectif est de rester toujours vigilant et surveiller en permanence le temp de chargement de la performance du site internet, dans l’objectif de détecter le plus tôt possible le moindre ralentissement.

Le site va évoluer du point de vue technique, fonctionnel et ses contenus aussi. Autant de sources d’erreurs et de risques qu’il est important d’observer. De plus, il est essentiel d’avoir un oeil sur les contenus tierces parties. C’est-à-dire aux contenus qui sont externes aux sites mais qu’on utilisent sur le site. Comme par exemple, les publicités ou les boutons de partage des réseaux sociaux.

Surveiller dans le temps, c’est détecter le moindre ralentissement du site !

#11 Budget de performance

Le budget de performance va permettre de cadrer les différents projets. L’idée s’inspire de Larry Page (Google). Pour lui, “la vitesse est la fonctionnalité n°1 du produit”. Sans vitesse, il n’y a plus de produit. On peut délivrer le produit avec de nombreuses fonctionnalités, mais si on arrive pas délivrer le produit rapidement, ce dernier perd de la valeur. Le principe est que sans vitesse, il n’y a plus de fonctionnalité. Donc il devient important de toujours replacer la vitesse au centre.

Mais comment on fait ? En se fixant des objectifs et en impliquant tout le monde vers la priorité principale : la vitesse !

Il est important de toujours s’interroger et de faire les bons compromis pour toujours respecter le budget de performance.

La vitesse est la fonctionnalité n°1 du produit – Larry Page

#12 Optimisez les images

Les images représentent 60% du poids d’une page web. Il y a trois points à savoir  :

Le choix du format : il faut privilégier les formats du type .jpeg.

L’optimisation sans perte de qualité : l’opération va permettre de rendre plus légère la photo. Il ne faut pas hésiter grâce à des pluggins notamment d’automatisé la démarche.

La compression permet un gain en terme de poids qui peut-être important.

Certaines personnes pensent que publier une photo avec une qualité plus basse est risqué. Mais les internautes qui ne restent qu’environ trois minutes sur les pages, ne vont pas s’en rendre compte. Nous avons un regard beaucoup plus critique quand on développe le site internet.

#13 Priorités des contenus

Qu’est-ce qui est important pour mon visiteur ?

Il est important de penser à l’ordre des contenus qui vont s’afficher sur la page. Un élément inutile qui s’affiche peut devenir un facteur de sortie pour le visiteur.

Par exemple : Facebook affiche en premier la barre bleu tout haut et la zone des notifications. Mais le plus intéressant est que le réseau social affiche la construction, les zones d’écriture. En terme d’expérience users, c’est l’idéal.

#14 Contenus tierces parties

Comme déjà expliquer précédemment, il est important d’avoir un oeil sur les contenus tierces parties, comme les publicités.

Un point de vigilance extrêmement important, car cela peut être un “point of failure”. Si par exemple un bouton de partage casse, cela peut casser votre site internet. Attention à ne pas utiliser toute la librairie de Facebook, seulement pour installer un bouton de partage. Afin de limiter au maximum votre dépendance, récupérer simplement le code.

#15 HTTPS

L’HyperText Transfer Protocol Secure permet au visiteur de vérifier l’identité du site web auquel il accède. Il garantit la confidentialité et la sécurité des données envoyées par l’utilisateur.

Il est important de bien préparer sa migration et il faut savoir que le HTTPS est un prérequis pour le HTTP2 qui déjà en place.

>> Vous étiez à cet évènement ? Votre avis nous intéresse….C’est par ici !

Ces articles peuvent vous intéresser

Posté le 18 juin 2021
Rather “back in town” 💫 J’ai démarré mon odyssée dans le conseil sur Bruxelles...
Lire l’article
Posté le 17 juin 2021
Vous n’avez pas eu le temps de lire notre dernière Newsletter ? Elle est...
Lire l’article
Posté le 8 juin 2021
Il a quelques temps, nous vous annoncions l’organisation du Hackathon NoCode pour l’impact porté...
Lire l’article