DevWeek Austin '18 - Measuring Latency in SPAs

You've finally shipped your application, and now you've been asked to optimize it. Where do you even begin? Is the data you're collecting both accurate and actionable? We'll explore several examples of both generic and framework-specific approaches to instrumenting JavaScript applications, giving you the tools to tackle it yourself with confidence!

Transcript

1. The Need For Speed Measuring Latency In Single-Page Applications Jordan Hawker DeveloperWeek Austin November 2018
2. November 2018 Jordan Hawker 2 Performance: Why Do We Care? Poor performance impacts business metrics – Bounce Rates – Conversions – Feature Throughput – Revenue Impact – User Satisfaction
3. November 2018 Jordan Hawker 3 Instrumentation Before Optimization • You don’t know what to optimize without data • Backend Instrumentation – Mature instrumentation options – Detailed information about services – Doesn’t provide the full picture • Can we track performance across the whole stack?
4. November 2018 Jordan Hawker 4 Web Application Performance • Response Time • Throughput • Availability • Responsiveness • Rate of Requests • Resource Consumption • Efficiency • Latency What does that even mean?
5. November 2018 Jordan Hawker 5 Priority: User Experience • Each metric has its own use, but... • Real-world performance impact is paramount – Know what your users are seeing – Gather data on different devices and browsers – Understand variance across global regions • Improvements across the stack will be reflected
6. November 2018 Jordan Hawker 6 Third-Party Tools
7. November 2018 Jordan Hawker 7 PageSpeed Insights
8. November 2018 Jordan Hawker 8 WebPageTest
9. November 2018 Jordan Hawker 9 Lighthouse
10. November 2018 Jordan Hawker 10 Evaluating Third-Party Tools • They give great overviews of app performance • Detailed suggestions for optimization • They don’t understand how SPAs render • Data is a rough approximation at best • How can we leverage framework internals?
11. November 2018 Jordan Hawker 11 Architecture
12. November 2018 Jordan Hawker 12 Subscriber-Reporter Relationship • Subscriber – Relies on child components (reporters) to render – Complex conditions for interactivity • Reporter – Reports its own render times – Child of a subscriber – May also be a subscriber itself
13. November 2018 Jordan Hawker 13 Approach • Leverage hooks to approximate rendering • Account for async behavior (e.g. requests, images) • Capture per-component events & roll up to page • Tie parents to their children to bubble data – Working up from the bottom of the tree is optimal – When child reports, check parent for interactivity • Common method to check complex conditions
14. November 2018 Jordan Hawker 14 React • componentDidMount – Invoked immediately after a component is mounted • Create a higher-order component (HOC) – Provides components with this latency behavior • Parent/Child relationship – this.props.children gives access to child components – Pass a parent reference down to children
15. November 2018 Jordan Hawker 15 Ember • Routes: didTransition • Components: didInsertElement • Leverage Runloop – run.scheduleOnce('afterRender', this, this.reportInteractive) • Parent/Child Relationship – this.parentView is a direct reference to the parent • Ember-Interactivity: jhawk.co/interactivity-demo
16. November 2018 Jordan Hawker 16 Angular • ngAfterContentInit – Called after Angular fully initializes all content of a directive • Parent/Child Relationship – this.parentInjector.view.component
17. November 2018 Jordan Hawker 17 Vue • mounted – Called after the instance has been mounted • this.$nextTick – Called after all children have been rendered • Parent/Child Relationship – this.$parent
18. November 2018 Jordan Hawker 18 Conclusions
19. November 2018 Jordan Hawker 19 What We Learned • Define Critical Path • Identify Bottleneck Components • Defer Non-Critical Components • Holistic user-centric metrics reflect improvements across the stack
20. November 2018 Jordan Hawker 20 The Path Forward • Leverage multiple tools for instrumentation • Measuring each layer of the stack is useful • Capture real user metrics to understand impact • Virtual machines are insufficient simulations • Use framework-aware tools for granular data • Be cognizant of the performance impact of leveraging framework internals
21. November 2018 Jordan Hawker 21 Thank You! JordanHawker elwayman02 www.JordanHawker.com Slides: jhawk.co/dw-austin-18-latency