Basics of Web Performance Measurement

Transcript

1. Basics of Web Performance Measurement JSFoo 2016 Ankit Solanki, ClearTax – ankit@cleartax.in @_anks
2. What is performance measurement?
3. Cheatsheet for the talk 1. Knowing your user 2. Understanding what you are measuring 3. DIY – you and your devtools 4. “Real User Monitoring”, 
 or actually measuring in the real world
4. (homework assignment) Knowing your users.
5. 2. Understanding what you are measuring
7. Layers of performance • Network • Backend • Frontend
8. Networking
9. Networking • First page load • DNS lookup for your hostname • TCP connection handshake (40-500ms) • SSL negotiation (40-500ms)
10. Networking • What you can do for performance • Host in India! • Use CDNs • Reduce re-directs
11. Backend • (Homework assignment) • Main suggestion: look at distribution of response times. • Look at outliers: 90percentile, 95p, 99p
 (averages are a lie)
12. Frontend
13. Not a linear process • DOM processing starts as soon as response bytes come in • Any CSS or synchronous scripts will cause other resources to be loaded, while stalling the page load process • Browser may render parts of your page before any of these events fire (may lead to flash of unstyled text)
14. Parse HTML Execute Scripts Build DOM Build CSS OM Layout Paint (loading resources as required) JavaScript Layout Paint
15. DIY Steps
16. Know Your Tools • Browser dev tools • httparchive.org • WebPageTest.org
19. What to look for • First, look at content sizes • Optimise images, reduce no. of images if possible • Gzip is your friend (just a flag, enable it!) • Cache headers • Fonts, External JavaScript, Size of CSS / JS
20. Your Critical Rendering Path • Basically, time to first paint • Skip what you can, defer if possible • Hard (fun) problem for SPA
21. Awareness of these things helps you make better decisions while actually building your site
22. Real User Monitoring (or, rum )
25. • Supported on all modern browsers 
 [caniuse.com/#feat=nav-timing] • Enabled by default by Google Analytics • But it’s in sampling mode by default (1% of sessions only) • You can set to 100% if need be
 
 ga('create', 'UA-XXX-Y', {'siteSpeedSampleRate':100});
26. • Recommended: Play around with the Google Analytics demo account if you want to build familiarity • Link
27. GA Demo Account
29. • Looking at your distribution, not averages • Averages skew your data • Focus on percentiles to get real insights
30. • Segment your data • Example: Mobile performance vs. Desktop
31. • Limitations of Google Analytics • Aggregate data • Sampled data • Difficult to debug individual cases (follow a single user’s journey) • Sometimes best to get on a remote desktop session with the user, if at all possible
32. • Some recommendations • Build dashboards • Set up alerts • Look at historical performance • Study performance impact of changes
33. • Other RUM tools • New Relic • Pingdom • Open source, or building your own?
34. User Timings • Timings for events after page load • Especially critical if you are building a frontend app • Options • W3 standard: User Timing API • Tool specific: Google Analytics API, for example
35. User Timings in GA • ga('send',
 'timing',
 [timingCategory],
 [timingVar],
 [timingValue]); • Example:
 
 ga('send', 'timing', 'ChatBox', 'connect', 3549);
36. Prioritisation
37. • Know your user, know your application, and you should be able to figure out what you actually need to focus on • Tackle problems as you can see them – different mindsets for a 2-person startup (optimise for development speed) vs. a mature product • It’s an art, being informed lets you make the tradeoffs deliberately • Performance is critical, but not the end goal. 
 Usage is the end goal.
38. Q&A
39. Thank You
40. Resources • W3 Navigation Timing API • Performance section on Google Web Fundamentals site • Ilya Grigorik’s blog, and various talks, and books. • User Timings in Google Analytics