Web Performance in Large-Scale Applications.

Frontcon, Latvia

Transcript

4. Web Performance in Large-Scale Applications.
5. 1. Why perceived performance matters? 2. Synthetic vs Real User Monitoring (RUM) 3. What metrics should we care about? 4. How do I improve the performance of my site? 5. What’s next? AGENDA
6. Why perceived performance matters?
7. Per Jakob Nielsen “The 3 Important Limits of Response Time”. 0.1 s - limit for having the user feel that the system is reacting instantaneously 1.0 s - limit for the user's flow of thought to stay uninterrupted 10 s - limit to keep the user focused in a dialog Why perceived performance matters?
8. Direct impact in “user engagement and revenue”. 53% of users abandon the site if it takes longer than 3s to load Sites that load in 5 seconds vs 19 seconds observed: 25% higher ad viewability 70% longer average sessions 35% lower bounce rates - Double Click Why perceived performance matters?
9. Part of the math to define your ranking in social media and search. Google and Facebook consider performance as one of the attributes to define your ranking. Why perceived performance matters?
10. Global initiatives: poor internet bandwidth and low/mid-range devices For 500Mb: 13hours in Brazil and 1h in germany Why perceived performance matters?
11. Synthetic vs Real User Monitoring (RUM)
12. Synthetic Monitoring PROS Solutions out of the box (Eg. WebPageTest) Video Recording and Filmstrip Detailed waterfall charts CONS Limited sample size Limited Geo Network throttling is a simulation
13. Real User Monitoring PROS Large sample size Real user scenarios Correlation with KPIs CONS Limited performance metrics Requires javascript/coding Limited waterfall analysis
14. SYN Diagnostics During product development Competitive Benchmark RUM User behavior/Conversion Source of truth YOU NEED BOTH
15. What metrics should we care about?
16. Navigation Start 5.9s 6.2s 7.83s 8.41s 13.4s 17.1 DOMContentLoaded Page Load APPLE IPHONE 7, Chrome Network - MOBILE 4G 9.56s Metrics you are probably familiar with
17. Navigation Start First Paint First 
 Contentful Paint First Interactive 5.9s 6.2s 7.83s 8.41s 13.4s 17.1 DOMContentLoaded Page Load APPLE IPHONE 7, Chrome Network - MOBILE 4G 9.56s Real User Metrics
18. Navigation Start First 
 Meaningful Paint 5.9s 6.2s 7.83s 8.41s 13.4s 17.1 DOMContentLoaded Page Load APPLE IPHONE 7, Chrome Network - MOBILE 4G 9.56s Render Start First Paint First 
 Contentful Paint First Interactive Real User Metrics Synthetic metrics Speed Index
19. Navigation Start First 
 Meaningful Paint 5.9s 6.2s 7.83s 8.41s 13.4s 17.1 DOMContentLoaded Page Load APPLE IPHONE 7, Chrome Network - MOBILE 4G 9.56s Render Start For Now, User Time API First Paint First 
 Contentful Paint First Interactive Real User Metrics Synthetic metrics Speed Index
20. SPEED INDEX
21. FIRST INTERACTIVE
22. What’s going on here? ! Oh No! Wapo Is Winning! What is This anyway?! Why is taking so long? #
23. How do I improve the performance of my site?
24. BUT FIRST… 1. Our main concern use to be the Network, now is CPU 2. React/Javascript ecosystem is super fragmented 3. Your computer and internet is fast, but you are an exception 4. SPA is cool and all, but it made some things harder
25. JAVASCRIPT INCREASE SINCE 2010: 570.8%
26. HERE IS THE TOP FIVE!
27. 1. CDN • It will bring you close to your users • SSR with React is expensive (computing and performance) • Most CDNs offers H2, Image Service, etc • …some would even let you config things A La Varnish (Fastly)
28. 2. Optimize the Critical Rendering Path • Load what’s needed to render the above the fold content • Critical CSS (eg. CSS-IN-JS or loadCSS/grunt-critical) • Lazy-load Images (use Image Service and srcset/picture) • Web-fonts are expensive, define a strategy and load only the font subset needed for the ATF
29. 3. Watch out for your JS bundle size • Create budget for your javascript bundles (same for CSS) • Remove unnecessary deps (eg. webpack-bundle-analyzer) • Implement code splitting (routes and components) • Use service workers to precache bundles
30. 4. Service Workers and Resource Prioritization • When possible, precache assets using Service Workers • Preload assets (eg. JS to render ATF) via resource prioritization <link rel=“preload”> <link rel=“prefetch”>
31. 5. Web Performance as part of your development process/culture • Use synthetic test to guide decisions around new features • Use RUM & KPIs to convince your boss • Look for performance champions in your Org • Deeply integrate synthetic testing into your deployment pipeline
32. What’s next?
33. 1. Service Workers to cache webfonts instead of local Storage 2. Apollo client to prefetch content 3. Use react-loadable to code splitting in a component-level What’s next?
35. Felipe Da Silva Twitter: @fs THANK YOU!