• Le temps de chargement de page, c’est (très souvent) idiot, par Jean-pierre Vincent. D’autres métriques génériques et bien meilleures existent et ont chacune leurs défauts (speedIndex, first contentful paint, Time to Interactive). Du coup je vais surtout vous apprendre à mesurer ce qui compte pour VOTRE site.

1. Mesurer la performance
Le temps de chargement c’est nul
(mais on a mieux)
Jean-pierre Vincent
@theystolemynick

2. « temps de chargement »
• window.onload ou document.body.onload
• Attend :
– L’état document.ready (donc CSS/JS synchrones)
– Images synchrones
– des éléments asynchrones (des fois)
@theystolemynick

3. onload : trop tôt ou trop tard
5 secondes
trop tard ?
5
secondes
trop tôt ?
@theystolemynick

4. window.onload : verdict
Représentatif …
sur les pages de l’an 2000
@theystolemynick

5. Mais les stats …
Oui, poids et temps de
chargement sont liés à
l’UX
Mais il y a mieux !
https://wpostats.com/

6. COMMENT MESURER L’UX ?
« La WebPerf est la réponse technique
à un problème UX »
Moi,
dès que je peux.
@theystolemynick

7. Le temps de premier rendu
« On n’a pas 2 occasions de faire une
première bonne impression »
(Captain Obvious)
@theystolemynick

8. Calculer le premier rendu
• WebPageTest et d’autres
• 2 API non officielles :
– performance.timing.msFirstPaint
– performance.getEntriesByType('paint')
• Plus optimistes que WPT !
github.com/jpvincent/requestTracker ou SOASTA Boomerang

9. Limites du 1er rendu
Les premiers pixels vus sont ils satisfaisants ?
First Paint First Contentful Paint
@theystolemynick

10. Premier rendu : verdict
Cool
• Métrique vitale
• RUM et synthétique
Moins cool
• RUM bancal
• Ne représente que la 1ère
étape
• Mais il y a mieux !
@theystolemynick

11. Le SpeedIndex
Inventé en 2012 Formule officielle
https://sites.google.com/a/webpagetest.org/docs/using-
webpagetest/metrics/speed-index

12. SpeedIndex
Plus c’est haut, moins c’est bon
• Médiane France, top 40 :
– Desktop : 3500
– Mobile : 6500
• Objectif Google : < 1000
– (donc 100% des pixels en 1s)
Médiane top 40 juillet 2017 :
http://www.journaldunet.com/solutions/dsi/1197334-classement-webperf-en-juillet-2017/

13. Principe du speedIndex
Image intermédiaire
(63% visible 500 ms) Image finale de référence
(100 – 63) X 5 = 185 @theystolemynick

14. Exemple de calcul
SpeedIndex final : 1602
@theystolemynick

15. SpeedIndex
Good
• Très proche de la vision
utilisateur
• Comparaison :
– Entre pages
– Entre devices
– Des concurrents
• Chiffre unique
Bad
• Attends 3 slides
@theystolemynick

16. Les limites du speedIndex
60% à 2s Image de référence
SpeedIndex : it’s over 9000 !!!
@theystolemynick

17. @theystolemynick

18. Les limites du speedIndex
Carrousels, publicités, popins, vidéos …

19. SpeedIndex
Good
• Très proche de la vision
utilisateur
• Comparaison :
– Entre pages
– Entre devices
– Des concurrents
• Chiffre unique
Bad
• Chiffre abstrait
• Sensible aux
mouvements de pixels
• Mesuré seulement en
labo
@theystolemynick

20. Faire mieux que le speedIndex ?
First Meaningful paint, CPU, Time To Interactive
Crédit image : https://renofswagzareth.deviantart.com/art/Here-comes-a-new-challenger-455618494

21. First meaningful paint
Le moment où le navigateur affiche le plus grand
nombre de nouveaux « layouts » visibles, après
les fonts.
bit.ly/ttfmp-doc

22. First meaningful paint
• Disponible en CLI ou en
plugin
@theystolemynick

23. First meaningful paint
Positif
Prends en compte :
• Le viewport
• Les fonts
Disponible en CLI
Négatif
• Encore en discussion
• Chrome only
• Pas de RUM
• Cas à la marge :
transparence et fade-in
bit.ly/ttfmp-doc @theystolemynick

24. PRENDRE EN COMPTE LE CPU
Parce que les utilisateurs n’ont
pas tous acheté l’iPhone
@theystolemynick

25. Le CPU : c’est compliqué
• Quelle métrique :
– Charge CPU totale ?
– Nombre de « forced
reflow » ?
– Plages de temps CPU non
plafonné ?
• Mesurer :
– WPT monitor modifié
– Analyse dev tools timeline
Ces stats WPT – Chrome sont elles utiles ?@theystolemynick

26. Time to Interactive : définition
• Attend le first contentful paint
• Attend que le navigateur ne soit pas interrompu
pendant au moins 5 secondes, par une tâche
de plus de 50 ms
@theystolemynick

27. Time to Interactive
Site l’équipe, mais aussi leboncoin @theystolemynick

28. Time to Interactive
Positif
• Enfin une prise en
compte de l’utilisation
CPU !
• Couplage avec une
métrique visuelle (FMP)
Défauts
• Webpagetest only
• Chrome only
• Pas de RUM
• Limites arbitraires
• Beta
– Testable depuis août
– Peut disparaître
https://github.com/WPO-
Foundation/webpagetest/blob/master/docs/Metrics/TimeToInteractive.md

29. FAIRE MIEUX QUE LES INGÉS G.
?
@theystolemynick

30. Les métriques custom
First Meaningful Paint, Time To Interactive, Speed
Index … sont des mesures génériques.
Qu’est ce qui compte pour :
• Vos utilisateurs ?
• Votre business model ?
@theystolemynick

31. Mesurer ce qui compte

32. Quand l’interface est elle prête ?
• Méthode performance.mark()
<img src="hero-image"
onload="performance.mark('hero image')" />
Bonus:
apparaît dans WPT
@theystolemynick

33. Quand arrive ma pub ? Ma font ?
• Analyser les requêtes HTTP :
– performance.getEntries()
– PerformanceObserver()
• Envoyer dans WPT ou un outil de RUM (type
GA)
Doc : https://developer.mozilla.org/en-US/docs/Web/API/Performance
Librairies : github.com/jpvincent/requestTracker et github.com/SOASTA/boomerang

34. Exemple
d’implémentation
• On attend un fichier en
particulier
• Fonts
• Trackers
• Pubs
• On récupère son temps
• On l’envoie dans l’outil de RUM
• WPT pourrait aussi récupérer ce
temps (custom metrics)
Le code avec les API natives + le polyfill est
trop gros pour une slide, donc j’utilise ma
librairie :
https://github.com/jpvincent/requestTracker

35. Surveiller
• Real User Monitoring (solutions
commerciales, GA)
• Synthétique (WPT monitor,
sitespeed.io …)
Évolution de la mise à disposition de la font, vu
côté utilisateur. Graphique basilic.io
Évolution du moment où l’A/B testing affiche la page,
côté utilisateur. Graphique Google Analytics

36. Métrique custom - bilan
Pour
• Au plus proche du métier
• Marche sur toutes les
plateformes
• RUM
Contre
• Maintenance de code
@theystolemynick

37. Bref …
@theystolemynick

38. Métrique Difficulté Utilité
Temps de chargement X X
First Paint,
First Contentful Paint
XXX XX
SpeedIndex XXX XXX
First Meaningful Paint XXX XXX ?
Time To Interactive XXX XXXX ?
Custom metrics XXXX XXXXXX
CPU XXXXX ? XXX
@theystolemynick

39. Conclusion
• Investir sur les mesures custom
• Un seul indicateur, c’est trompeur
Je surveille : custom + paint + CPU
@theystolemynick