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

755 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
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×