Comment mesurer la vitesse des sites ? La vitesse des sites est un critère de classement dans l'algorithme de Google... c'est surtout une composante très importante de l'expérience utilisateur. Il existe de nombreux outils et de nombreux indicateurs pour mesurer la vitesse de chargement d'un site...mais qu'indiquent-ils vraiment ?

1. Comment mesurer la vitesse
des sites ?
Faire le point sur les indicateurs – Madeline Pinthon

2. Qui suis-je ?
Madeline Pinthon
Consultante SEO chez Iprospect
Audencia alumni
Twitter : @razbithume
www.canyouseome.com

3. Un fort impact sur
l’expérience
utilisateur

4. Pourquoi la vitesse des sites est importantes ?

5. En réduisant le temps de chargement de 15 à 19%
Etude de cas Fasterize
+3,8 %
Pages vues
par session
+6%
Durée
moyenne de
la visite
+1,7%
Panier moyen
-3,4 %
Taux de
rebond
+16%
Taux de
conversion

6. La communication de
google

7. Des annonces récentes de Google
1
2
3

8. Une multitude d’outils Google à disposition

9. Les outils

10. Mais également d’autres outils

11. 2 types d’outils : Synthetic VS RUM
Mesure Synthetic – Lab data
Robot
Tests ponctuels
Paramètres contrôlés
RUM (real user monitoring)
Utilisateurs
Collecte continue
Conditions réelles

12. 2 types d’outils : Synthetic VS RUM

13. Le cycle d’optimisation de la performance

14. Les 3 biais de la mesure de performance
Un seul indicateur est représentatif1
L’outil me dit que le site est rapide2
Lorsque je vais sur le site, c’est rapide3

15. Que mesurent ces
outils ?

16. Quel site est plus rapide ?

17. Quel site est plus rapide ?

18. Les étapes du chargement d’une page

19. Les étapes du chargement d’une page
BACK END FRONT END
Connection/réseau Serveur Navigateur

20. Les étapes du chargement d’une page
TTFB
Objectif : < 200ms

21. Les étapes du chargement d’une page
Temps de téléchargement / total delay
Objectif : < 500ms

22. Les étapes du chargement d’une page
Temps de
chargement
Objectif : < 5 secondes

23. Les étapes du chargement d’une page
La page est
(quasiment) affichée

24. Quelle page est totalement chargée en 3
secondes ?

25. Onload <3 secondes : 20minutes
https://ruxt.dexecure.com

26. Onload <3 secondes : lequipe

27. Les informations dans google analytics

28. Quelle page est totalement chargée en 3
secondes ?

29. Le temps d’affichage

30. Le temps d’affichage
(Presque) Equivalent au StartRender

31. Le temps d’affichage
Donnée présente dans Page Speed Insights

32. Le temps d’affichage
(presque) équivalent au DomInteractive

33. LequipeVS 20minutes

34. LequipeVS 20minutes

35. Nouvelle version de LightHouse

36. Comment combiner
performance et
affichage ?

37. Comment combiner performance et affichage ?
Une problématique : le temps de chargement ne reflète pas toujours la perception de l’utilisateur

38. La notion de speedindex

39. Le speedindex

40. Le speedindex
Objectif : < 1000

41. Le time to interactive

42. Time to interactive
• Attend le FCP
• Le navigateur ne doit pas être interrompu pendant au moins 5 secondes par une tâche de plus de 50 ms.
• Prend en compte la consommation des ressources

43. Comparaison 20minutes VS lequipe

44. Comparaison 20minutes VS lequipe

45. Comparaison 20minutes VS lequipe

46. Comparaison 20minutes VS lequipe

47. Que conclure ?

48. Speed and Ranking
“No single metric perfectly captures mobile site speed and user experience. As such,
the ranking methodology is based on a combination of three metrics as reported
across mobile devices by the CrUX Report: First Contentful
Paint, DOMContentLoaded and Onload.
Since rank is based on multiple metrics rather than on First Contentful Paint alone,
sites with slower First Contentful Paint times may rank higher than sites with faster
First Contentful Paint times.”
https://www.thinkwithgoogle.com/feature/mobile/

49. Les 3 biais de la mesure de performance
Un seul indicateur est représentatif1
L’outil me dit que le site est rapide2
Lorsque je vais sur le site, c’est rapide3

50. Les 3 réflexes de la mesure de performance
Utiliser plusieurs indicateurs1
Utiliser des données lab et analytics2
Simuler les conditions de réseaux (3G,
cable,…)3

51. L’expérience utilisateur et les KPI
Expérience Constat KPI
Est-ce que ça arrive ? Le serveur a-t-il répondu ?
La navigation a démarré ?
First Paint / First
Contentful Paint
Est-ce utile ? Y a-t-il assez de contenu
affiché pour comprendre
la page ?
First Meaningful Paint
Est-ce utilisable ? Les utilisateurs peuvent-ils
interagir avec la page ? Ou
est-ce que cela charge
encore ?
TimeTo Interactive
Est-ce agréable ? Les interactions sont-elles
fluides et naturelles ?
LongTasks

52. Le cycle d’optimisation de la performance

53. Merci !
Madeline Pinthon - @razbithume