Everyone wants their apps to load fast and feel snappy. But if we're not focusing on app performance as part of our daily work, it's easy to end up with a janky, slow-loading app. In this talk, Jeff Cross, co-founder of Nrwl.io, will talk about the techniques he utilizes to help enterprise teams quickly measure, analyze, and improve application performance using a combination of open source tools and Chrome Devtools. For more resources visit https://nrwl.io. Nrwl provides Angular Consulting from core contributors. We help teams through training, consulting, open source and support products. Send us an email at hello@nrwl.io.

1. Jeff Cross
Co-Founder, Nrwl
jeff@nrwl.io | @jeffbcross
Methodically Improving
Performance of Angular Apps

2. Jeff

3. This talk
• Performance improvement methodology
• A sample of tooling
• A few performance tactics

4. “IT NEEDS TO BE FASTER”
- The Business

5. U A A O

6. Watch video of everyone talking about UAAO on YouTube

7. U A A O
0. Understand 1. Audit 2. Analyze 3. 0ptimize

8. U A A O
An explicit process for
tackling app performance

10. 0. Understand

11. Understand
Slow down

12. Understand
Don’t solve problems before you’ve
defined them.

13. Understand

14. Understand
• Why is current performance bad for business?
• Do stalled renders correlate with abandonment?
• Is delayed interactivity preventing users from
progressing through our funnel?
• Are sessions short-lived or long-lived?
• What are the most important routes for the
business?

15. Understand

16. 1. Audit

17. Audit
Start with baseline measurements

18. Audit

19. Watch screen recording of Lighthouse audit

20. Audit
Consistency Between Audits
1. Environment
1. Same computer
2. Close all applications
2. Measure similar to production setup
1. Protocol (HTTP/2)
2. Compression
3. Caching

21. Audit
Our Baseline Audit
1. Homepage
1. First Contentful Paint: 30,610
2. Interactive: 38,420
2. Pre-Qualify Page
1. First Contentful Paint: 32,990
2. Interactive: 32,990
3. Landing page
1. First Contentful Paint: 30,530
2. Interactive: 32,740

22. Important Mental Habit
Treat Audits and Analysis as discrete tasks

23. Analyze & Optimize

24. Analyze &
Optimize
Process
Analyze Optimize Audit

25. Homepage Analysis
Priority: Content in front of the user’s eyes ASAP

26. Watch performance profiling
screen recording

27. Analysis
Homepage Content Analysis
• Meaningful content not visible until ~13,900ms
• Hypothesis: Pre-rendering not working

28. Write the Hypothesis
Subtitle

30. Implement the Hypothesis
Subtitle

31. Analyze
Subtitle

32. Subtitle

33. Audit and Record
Subtitle

34. Audit
Updated Homepage Lighthouse Audit
1. Homepage
1. First Contentful Paint: 5,250 (30,610 before)
1. Should aim for <3 seconds
2. Interactive: 38,830 (38,420 before)
1. Interactive expected to be similar, or slightly slower

35. Homepage Analysis
Main bundle is kinda big

36. Subtitle

39. Audit
Updated Homepage Lighthouse Audit
1. Homepage
1. First Contentful Paint: 5,250 (before)
2. First Contentful Paint: 5,250 (after)
3. Interactive: 38,830 (before)
4. Interactive: 33,130 (after)

40. Audit
Additional Optimizations
1. Content rendering blocked by Web fonts loading
1. Optimization: use font-display: swap
2. Deferred and reduced size of non-critical image and video
assets
3. Moved all non-critical routes to lazy-loaded modules
4. Enabled Brotli compression for HTML, CSS, JS assets
5. Moved pre-rendering process to build-time instead of
request-time

41. Audit
Homepage Lighthouse Audits after a Day of Iteration
1. First Contentful Paint 1,920 (originally 30,610)
2. Interactive: 33,170 (originally 38,420)
1. Many more optimizations identified to reduce significantly

42. U A A O
0. Understand 1. Audit 2. Analyze 3. 0ptimize

44. Thank You
Resource Links
• Example UAAO doc: go.nrwl.io/uaao
• Lighthouse
• web.dev/fast
• Minko’s Angular performance checklist
• (I will tweet a link to slides) - @jeffbcross