Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Owning Web Performance
@wesleyhales
How long does it take the
page to load?
@wesleyhales
What are we measuring?
@wesleyhales
The Perception of (Load) Time
Speedperception.org
@wesleyhales
How the web perf industry “thinks”
users interact with our page.
The average attention span
of a human being dropped
from 12 seconds in 2000 to
8.25 seconds in 2015.
- National Center for...
//Chrome
window.chrome.loadTimes().startLoadTime;
//IE
window.performance.timing.msFirstPaint
Start render is measured by ...
Document Complete
What it means depends highly on what the
page actually does. For example:
“The page was completely blank...
Critical Resources
The main blockers to fast rendering are stylesheets and
synchronous scripts.
Stylesheets block all rend...
a bug:
fire drill when things are broken
a criteria at all stages:
UX → development → production
a continuous process:
Mon...
Fast is good… Faster is better
Google Dev Summit
@wesleyhales
Performance Reality
@wesleyhales
@wesleyhales
Happy Place
We can’t get to a happy place
without monitoring…
@wesleyhales
Local vs. Remote Monitoring
@wesleyhales
Local vs. Remote Monitoring
@wesleyhales
Real User Monitoring (RUM)
• Provides a restricted subset of performance API’s
an...
Local vs. Remote Monitoring
@wesleyhales
Just because something is possible to
measure, and perhaps is even highly
desirab...
http://bit.ly/29obv1d
What can we measure (remotely)?
@wesleyhales
Performance Timing APIs
• Performance Timeline
• HR Time
• Navigation Timing
...
Navigation Timing API
(The starting point of Web
Performance APIs)
@wesleyhales
@wesleyhales
Browser Support
http://www.w3.org/2015/10/webperf-all.html
Advance Browser Support
Navigation is about how user
agents convert the requested
HTML, CSS, and JavaScript into
rendered pixels, which is one of
...
window.performance.timing
simple-new.html
@wesleyhales
Measurements are in HRT
• All measurements are at microsecond
precision.
• Does not depend on system clock or DOM
processi...
window.performance.timing
process model
@wesleyhales
Loadreport.js (2012-2015)
Same Pattern?
@wesleyhales
Browser without a UI
Able to run in a server environment
Intended for testing and automation
Headless Mode
@wesleyhales
Released Early 2015
Headless Web Browser
Based on WebKit
PhantomJS 2
@wesleyhales
Pros/Cons
Limited support for modern web features
No auto updates
Great for Continuous Integration!
PhantomJS 2
@wesleyhal...
PhantomJS 2 Feature Detect
What About Headless Chrome?
https://www.youtube.com/watch?v=GivjumRiZ8c
Basic PhantomJS Scripts
@wesleyhales
@wesleyhales
Rewrite of loadreport.js
Leverages all implemented Navigation Timing APIs
(shims resource timing)
Speedgun.js
Speedgun.js
Demo normal and spider
@wesleyhales
@wesleyhales
Speedgun.io
Speedgun.js
Wrapper runs script on System out
@wesleyhales
Speedgun.io
Speedgun.js
Wrapper provides API
/go
/report
/beacon
/nodes
@wesleyhales
Speedgun.io
Speedgun.js
Wrapper provides API
/rest/performance/go?url=www.google.com
/rest/performance/report...
@wesleyhales
Speedgun.io
Speedgun.js
API Wrapper
/go
/report
/beacon
/nodes
Docker Container
@wesleyhales
Speedgun.io
Speedgun.js
API Wrapper
Docker Container Docker Container
Postgres
@wesleyhales
Speedgun.js
Demo
Synthetic RUM
• Use Speedgun.io as
centralized server
• All docker nodes send
beacon with:
• Current container CPU and
mem...
Continuous Perf Monitoring
• Use Speedgun.io as
centralized server
• All docker nodes send
beacon with:
• Current containe...
Continuous Perf Monitoring - Local
Continuous Perf Monitoring - Remote
Thanks!!
• speedgun.io (github)
• Navigation Timing API
• Navigation Timing 2
• Resource Timing API
• http://w3c.github.io...
Perf Side Note:
Browser Interventions
• Removing active scroll listeners
• Blocking document.write
• Throttling timers in ...
Prochain SlideShare
Chargement dans…5
×

Owning Web Performance

437 vues

Publié le

Given at SF Web Performance Group

Publié dans : Logiciels

Owning Web Performance

  1. 1. Owning Web Performance @wesleyhales
  2. 2. How long does it take the page to load? @wesleyhales
  3. 3. What are we measuring? @wesleyhales
  4. 4. The Perception of (Load) Time Speedperception.org
  5. 5. @wesleyhales How the web perf industry “thinks” users interact with our page.
  6. 6. The average attention span of a human being dropped from 12 seconds in 2000 to 8.25 seconds in 2015. - National Center for Biotechnology Information at the US National Library of Medicine
  7. 7. //Chrome window.chrome.loadTimes().startLoadTime; //IE window.performance.timing.msFirstPaint Start render is measured by capturing video of the page load and looking at each frame for the first time the browser displays something other than a blank page. Or… Start Render / First Paint
  8. 8. Document Complete What it means depends highly on what the page actually does. For example: “The page was completely blank at onload and the content was all rendered afterward in JavaScript” https://www.webpagetest.org/forums/showthread.php?tid=13266
  9. 9. Critical Resources The main blockers to fast rendering are stylesheets and synchronous scripts. Stylesheets block all rendering in the page until they finish loading. Synchronous scripts (e.g., <script src="main.js">) block rendering for all following DOM elements. Synchronous scripts in the HEAD of the page block the entire page from rendering until they finish loading. https://www.stevesouders.com/blog/2016/02/10/critical-metric-critical-resources/
  10. 10. a bug: fire drill when things are broken a criteria at all stages: UX → development → production a continuous process: Monitoring → learning → improvement Performance is…
  11. 11. Fast is good… Faster is better Google Dev Summit @wesleyhales
  12. 12. Performance Reality @wesleyhales
  13. 13. @wesleyhales Happy Place
  14. 14. We can’t get to a happy place without monitoring… @wesleyhales
  15. 15. Local vs. Remote Monitoring @wesleyhales
  16. 16. Local vs. Remote Monitoring @wesleyhales Real User Monitoring (RUM) • Provides a restricted subset of performance API’s and metrics. • It’s restricted because such data may reveal private or sensitive information about the visitor.
  17. 17. Local vs. Remote Monitoring @wesleyhales Just because something is possible to measure, and perhaps is even highly desirable and useful to many developers, does not mean that it can be exposed as a RUM API.
  18. 18. http://bit.ly/29obv1d
  19. 19. What can we measure (remotely)? @wesleyhales Performance Timing APIs • Performance Timeline • HR Time • Navigation Timing • Resource Timing • User Timing • Frame Timing • Server Timing
  20. 20. Navigation Timing API (The starting point of Web Performance APIs) @wesleyhales
  21. 21. @wesleyhales Browser Support
  22. 22. http://www.w3.org/2015/10/webperf-all.html Advance Browser Support
  23. 23. Navigation is about how user agents convert the requested HTML, CSS, and JavaScript into rendered pixels, which is one of the most critical steps for users to navigate a document. @wesleyhales From the spec…
  24. 24. window.performance.timing simple-new.html @wesleyhales
  25. 25. Measurements are in HRT • All measurements are at microsecond precision. • Does not depend on system clock or DOM processing • Example: perf.now.html performance.now() @wesleyhales
  26. 26. window.performance.timing process model @wesleyhales
  27. 27. Loadreport.js (2012-2015)
  28. 28. Same Pattern? @wesleyhales
  29. 29. Browser without a UI Able to run in a server environment Intended for testing and automation Headless Mode @wesleyhales
  30. 30. Released Early 2015 Headless Web Browser Based on WebKit PhantomJS 2 @wesleyhales
  31. 31. Pros/Cons Limited support for modern web features No auto updates Great for Continuous Integration! PhantomJS 2 @wesleyhales
  32. 32. PhantomJS 2 Feature Detect
  33. 33. What About Headless Chrome? https://www.youtube.com/watch?v=GivjumRiZ8c
  34. 34. Basic PhantomJS Scripts @wesleyhales
  35. 35. @wesleyhales
  36. 36. Rewrite of loadreport.js Leverages all implemented Navigation Timing APIs (shims resource timing) Speedgun.js
  37. 37. Speedgun.js Demo normal and spider @wesleyhales
  38. 38. @wesleyhales Speedgun.io Speedgun.js Wrapper runs script on System out
  39. 39. @wesleyhales Speedgun.io Speedgun.js Wrapper provides API /go /report /beacon /nodes
  40. 40. @wesleyhales Speedgun.io Speedgun.js Wrapper provides API /rest/performance/go?url=www.google.com /rest/performance/report?uuid=629901 /rest/beacon/init /rest/beacon/getlist
  41. 41. @wesleyhales Speedgun.io Speedgun.js API Wrapper /go /report /beacon /nodes Docker Container
  42. 42. @wesleyhales Speedgun.io Speedgun.js API Wrapper Docker Container Docker Container Postgres
  43. 43. @wesleyhales Speedgun.js Demo
  44. 44. Synthetic RUM • Use Speedgun.io as centralized server • All docker nodes send beacon with: • Current container CPU and memory usage • API demo... http://wesleyhales.com/blog/2015/04/24/Speedgun/
  45. 45. Continuous Perf Monitoring • Use Speedgun.io as centralized server • All docker nodes send beacon with: • Current container CPU and memory usage • API demo...
  46. 46. Continuous Perf Monitoring - Local
  47. 47. Continuous Perf Monitoring - Remote
  48. 48. Thanks!! • speedgun.io (github) • Navigation Timing API • Navigation Timing 2 • Resource Timing API • http://w3c.github.io/perf-timing-primer/ @wesleyhales
  49. 49. Perf Side Note: Browser Interventions • Removing active scroll listeners • Blocking document.write • Throttling timers in background frames • Immediately fallback to system fonts on slow connections • Lazy load images

×