Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mesurer la performance : onload, pages

553 views

Published on

• 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.

Published in: Engineering
  • Be the first to comment

Mesurer la performance : onload, pages

  1. 1. Mesurer la performance Le temps de chargement c’est nul (mais on a mieux) Jean-pierre Vincent @theystolemynick
  2. 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. 3. onload : trop tôt ou trop tard 5 secondes trop tard ? 5 secondes trop tôt ? @theystolemynick
  4. 4. window.onload : verdict Représentatif … sur les pages de l’an 2000 @theystolemynick
  5. 5. Mais les stats … Oui, poids et temps de chargement sont liés à l’UX Mais il y a mieux ! https://wpostats.com/
  6. 6. COMMENT MESURER L’UX ? « La WebPerf est la réponse technique à un problème UX » Moi, dès que je peux. @theystolemynick
  7. 7. Le temps de premier rendu « On n’a pas 2 occasions de faire une première bonne impression » (Captain Obvious) @theystolemynick
  8. 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. 9. Limites du 1er rendu Les premiers pixels vus sont ils satisfaisants ? First Paint First Contentful Paint @theystolemynick
  10. 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. 11. Le SpeedIndex Inventé en 2012 Formule officielle https://sites.google.com/a/webpagetest.org/docs/using- webpagetest/metrics/speed-index
  12. 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. 13. Principe du speedIndex Image intermédiaire (63% visible 500 ms) Image finale de référence (100 – 63) X 5 = 185 @theystolemynick
  14. 14. Exemple de calcul SpeedIndex final : 1602 @theystolemynick
  15. 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. 16. Les limites du speedIndex 60% à 2s Image de référence SpeedIndex : it’s over 9000 !!! @theystolemynick
  17. 17. @theystolemynick
  18. 18. Les limites du speedIndex Carrousels, publicités, popins, vidéos …
  19. 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. 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. 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. 22. First meaningful paint • Disponible en CLI ou en plugin @theystolemynick
  23. 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. 24. PRENDRE EN COMPTE LE CPU Parce que les utilisateurs n’ont pas tous acheté l’iPhone @theystolemynick
  25. 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. 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. 27. Time to Interactive Site l’équipe, mais aussi leboncoin @theystolemynick
  28. 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. 29. FAIRE MIEUX QUE LES INGÉS G. ? @theystolemynick
  30. 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. 31. Mesurer ce qui compte
  32. 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. 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. 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. 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. 36. Métrique custom - bilan Pour • Au plus proche du métier • Marche sur toutes les plateformes • RUM Contre • Maintenance de code @theystolemynick
  37. 37. Bref … @theystolemynick
  38. 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. 39. Conclusion • Investir sur les mesures custom • Un seul indicateur, c’est trompeur Je surveille : custom + paint + CPU @theystolemynick

×