Given at SF Web Performance Group

1. Owning Web Performance
@wesleyhales

2. How long does it take the
page to load?
@wesleyhales

3. What are we measuring?
@wesleyhales

4. The Perception of (Load) Time
Speedperception.org

5. @wesleyhales
How the web perf industry “thinks”
users interact with our page.

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. //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. 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. 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. 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. Fast is good… Faster is better
Google Dev Summit
@wesleyhales

12. Performance Reality
@wesleyhales

13. @wesleyhales
Happy Place

14. We can’t get to a happy place
without monitoring…
@wesleyhales

15. Local vs. Remote Monitoring
@wesleyhales

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. 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. http://bit.ly/29obv1d

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. Navigation Timing API
(The starting point of Web
Performance APIs)
@wesleyhales

21. @wesleyhales
Browser Support

22. http://www.w3.org/2015/10/webperf-all.html
Advance Browser Support

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. window.performance.timing
simple-new.html
@wesleyhales

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. window.performance.timing
process model
@wesleyhales

27. Loadreport.js (2012-2015)

28. Same Pattern?
@wesleyhales

29. Browser without a UI
Able to run in a server environment
Intended for testing and automation
Headless Mode
@wesleyhales

30. Released Early 2015
Headless Web Browser
Based on WebKit
PhantomJS 2
@wesleyhales

31. Pros/Cons
Limited support for modern web features
No auto updates
Great for Continuous Integration!
PhantomJS 2
@wesleyhales

32. PhantomJS 2 Feature Detect

33. What About Headless Chrome?
https://www.youtube.com/watch?v=GivjumRiZ8c

34. Basic PhantomJS Scripts
@wesleyhales

35. @wesleyhales

36. Rewrite of loadreport.js
Leverages all implemented Navigation Timing APIs
(shims resource timing)
Speedgun.js

37. Speedgun.js
Demo normal and spider
@wesleyhales

38. @wesleyhales
Speedgun.io
Speedgun.js
Wrapper runs script on System out

39. @wesleyhales
Speedgun.io
Speedgun.js
Wrapper provides API
/go
/report
/beacon
/nodes

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. @wesleyhales
Speedgun.io
Speedgun.js
API Wrapper
/go
/report
/beacon
/nodes
Docker Container

42. @wesleyhales
Speedgun.io
Speedgun.js
API Wrapper
Docker Container Docker Container
Postgres

43. @wesleyhales
Speedgun.js
Demo

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. Continuous Perf Monitoring
• Use Speedgun.io as
centralized server
• All docker nodes send
beacon with:
• Current container CPU and
memory usage
• API demo...

46. Continuous Perf Monitoring - Local

47. Continuous Perf Monitoring - Remote

48. Thanks!!
• speedgun.io (github)
• Navigation Timing API
• Navigation Timing 2
• Resource Timing API
• http://w3c.github.io/perf-timing-primer/
@wesleyhales

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