This document discusses various techniques for improving Angular application performance and user experience, including lazy loading modules and images, server-side rendering, asset compression, and progressive web apps. It emphasizes the importance of performance testing and optimization to ensure fast load times, responsiveness, and interactivity. Specific recommendations include keeping the main bundle small, lazy loading non-critical code, leveraging caching and CDNs, and maintaining some interactivity during server-side rendering initial paint. The goal is to find the right balance between fast load speeds and a smooth interactive experience.

1. RETHINKING ANGULAR
ARCHITECTURE &
PERFORMANCE
MarkPieszak

2. MarkPieszak
Mark Pieszak
CO-FOUNDER TRILON.IO
Angular Universal Team
NestJS Core Team
Open Source
ASP.NET Core + Angular Universal starter
ASP.NET Core + Vue starter
Angular Azure Application Insights
MarkPieszak

3. WWW.TRILON.IO
MarkPieszak

4. ARCHITECTURE
MarkPieszak

5. MarkPieszak
APP MODULE
Main.ts
platformBrowser()
MODULE
MODULE MODULE

6. MarkPieszak
APP MODULE
Main.ts
platformBrowser()
MODULE
MODULE MODULE
Bundle
&
Deploy

7. MarkPieszak
APP MODULE
Main.ts
platformBrowser()
MODULE
MODULE MODULE
Request
Response
Bundle
&
Deploy

8. HOW DO
USERS SEE
OUR APP?
MarkPieszak

9. MarkPieszak
Loading
Request
Response

10. MarkPieszak
Request
Response

11. MarkPieszak
Loading
Request
Response
FAST
INTERACTIVE
RESPONSIVE

12. IMPROVING THE USER EXPERIENCE
MarkPieszak

13. PERFORMANCE
MATTERS
MarkPieszak
Walmart saw a 1% increase in revenue for every
100ms improvement in performance.

14. WHERE DO WE BEGIN?
MarkPieszak

15. MarkPieszak
> LIGHTHOUSE

16. MarkPieszak
> ANALYZE
> EXPERIMENT
> AUDIT

17. THE
LIGHTHOUSE
GAME
MarkPieszak

18. MarkPieszak
The Dream

19. MarkPieszak
Reality

20. WHAT TOOLS
CAN WE USE?
MarkPieszak

21. MarkPieszak
Webpack
Bundle
Analyzer
> ANALYZE

22. Helps visualize Architecture
Vendor / 3rd party libs
Main bundle
Lazy chunks
MarkPieszak
> WEBPACK BUNDLE ANALYZER

23. MarkPieszak
Webpack
Bundle
Analyzer
> ANALYZE

24. SETTING
GOALS
MarkPieszak

25. Reduce “Main Thread” execution time
Objective:
Minimize main bundle (wherever possible)
- Remove unneeded code & imports from “main”
- Remove as many third party libs from “main”
MarkPieszak

26. MarkPieszak

27. MarkPieszak
FAST
RESPONSIVE
INTERACTIVE
First Initial Paint
Small Bundle payload
TTI ( Time-to-interactive )

28. TIP:
Be careful not to abuse or misuse imports here.
>> Import only what you need!
MarkPieszak
# 1 > LAZY-LOADING (ROUTES)
FAST

29. @({
imports: [
UiButtonModule,
UiModalModule,
UiActionModule,
CommonModule
// ...
]
})
export class OrderModule {}
FAST
# 1 > LAZY-LOADING (ROUTES)

30. MarkPieszak
ORDER MODULEABOUT MODULE CART MODULE
DATA MODULE
TABLE MODULE
3rd Party Lib
UI-MODAL MODULE
AUTH MODULE AUTH MODULE
DATA MODULE
FAST
# 1 > LAZY-LOADING (ROUTES)

31. TIP:
Use ngx-quicklink (PreloadingStrategy)
Preload lazy modules when:
they are VISIBLE & the browser is idle.
Bonus points:
GuessJS
MarkPieszak
FAST
# 2 > PRELOADING STRATEGIES

32. TIP:
Dynamically Lazy-Loading Modules & Components
Use tools like: ngx-loadable
MarkPieszak
FAST
# 3 > LAZY LOADING (NON-ROUTABLE)
<ngx-loadable
module="lazy"
[show]="show">
</ngx-loadable>

33. MarkPieszak
TIP:
Defer loading images until visible
Use tools like: ng-lazyload-image
FAST
# 4 > DEFER IMAGE LOADING
<img
[defaultImage]=“defaultImage”
[lazyLoad]="image">

34. MarkPieszak
What about Content
“Below the Fold”
FAST

35. MarkPieszak
Original Content
Can we Lazy Load
this entire Module?
Or maybe just Lazy Load
all of these images?
FAST

36. TIP:
Static Assets on a CDN / edge server delivery
ie: Cloudflare
File Compression (css, html, js)
At a minimum: GZIP
Ideally: Brotli
Outperforms Gzip
JS files ~14% smaller
MarkPieszak
COMPRESSED
Response
FAST
# 5 > CDN & COMPRESSION

37. MarkPieszak
PROS
• SEO, Social-media previews, non-JS crawl-able
• Faster “initial paint”
CONS
Slower TTI ( Time-to-interactive )
aka: Angular Universal
# 6 > SERVER-SIDE RENDERING (SSR)
FAST

38. MarkPieszak
Loadin
Time
Initial “Paint” Fully Bootstrapped App
> CLIENT-SIDE RENDERING (CSR)
FAST

39. MarkPieszak
Time
> SERVER-SIDE RENDERING (SSR)
Initial “Paint” Fully Bootstrapped App
FAST

40. MarkPieszak
Loading
FAST
INTERACTIVE
Click / Scroll / all functioning ( esp during SSR )

41. TIP:
Make sure your Initial SSR “User Experience”
is still fairly interactive.
INTERACTIVE
# 1 > SSR - ENSURE INTERACTIVITY

42. MarkPieszak
> SSR - ENSURE INTERACTIVITY
INTERACTIVE
Time
Initial “Paint” Fully Bootstrapped App
Mind the “gap”Can users interact ?

43. MarkPieszak
> EXPERIMENT
Use <a [routerLink]>
over (click)=“”
events for the most
important navigation
INTERACTIVE

44. MarkPieszak
> EXPERIMENT
Can we setup a [routerLink] navigation
to a menu”-like Route page ?
INTERACTIVE

45. MarkPieszak
> EXPERIMENT
Scroll Functionality
Can the user still scroll and see at least
SOME important information
INTERACTIVE

46. Two types of SSR
Run-time: Dynamic
Angular Server-Side Rendering (SSR) # 1 ( continued )
INTERACTIVE
/products
Request
Response
Serialize App
Hit API

47. Two types of SSR
Build-time: Pre-rendering
Angular Server-Side Rendering (SSR) # 1 ( continued )
INTERACTIVE
/products
Request
Response
Products.html

48. TIP:
Opt for Pre-rendering routes (over Dynamic SSR)
wherever possible for faster responses.
Cache Pre-Rendered HTML
(File Storage / MemCache / Redis) where possible
Angular Server-Side Rendering (SSR) # 1 ( continued )
INTERACTIVE

49. Angular Server-Side Rendering (SSR) # 1 ( continued )
INTERACTIVE
TIPS & TRICKS:
You can setup all 3 types of rendering
Pre-rendering
app.get(SomeRoutes) => res.send( prerenderedHtml )
Dynamic SSR
app.get(OtherRoutes) => await renderModuleFactory()
Client-Side Rendering (CSR)
app.get(*). => res.send( originalIndexHtml )

50. # 1 ( continued )
Angular Server-Side Rendering (SSR)
MUST HAVE:
Transfer (re-use) Http responses between SSR => CSR
TransferHttpCacheModule from
@NgUniversal/Common
TIP:
Keep your API calls “lean” to not send too much
payload data down with the Html
INTERACTIVE

51. MarkPieszak
Loading
FAST
RESPONSIVE
Fast Web/Tablet/Mobile versions
Usable even with slow (or zero) internet

52. MarkPieszak
TIP:
Setup a Service Worker
Cache assets (JS/CSS/HTML/images) to
speed up subsequent page loads
RESPONSIVE
# 6 > PWA (PROGRESSIVE WEB APP)

53. FIND THE RIGHT BALANCE

54. MarkPieszak
Loading
FAST
RESPONSIVE
INTERACTIVE
Request
Response
> REMEMBER WHAT MATTERS

55. MarkPieszak
THE
USER
EXPERIENCE

56. Keep that MAIN bundle small
Move whatever functionality you can out of AppModule /
main.bundle
Try to keep NgModules lean / compact
Be intentional with imports
MarkPieszak
>>> IN CONCLUSION

57. Lazy-Load sections of your app - when visible
Images
Modules
Components
If you’re doing SSR
Remember to maintain some functionality during the
first initial paint
MarkPieszak
>>> IN CONCLUSION

58. MarkPieszak
Angular Performance Checklist
> ADDITIONAL RESOURCES
by: Minko Gevchev
Why it's tricky to measure Server-side Rendering performance
by: David East

59. THANK
YOU !
@MarkPieszak