Web Application Performance with Angular

Transcript

2. Web App Performance with Angular
4. Why Performance Matters?
5. Sites performance impacts conversions q BBC lost 10% additional users for every addition second of their site loads q 53% of mobile users abandoned site when it takes more than 3 sec to load q Pinterest increased 15% signup by reducing perceived wait time by 40%
6. mobile web performance monitoring conversion rate Load time Vs Conversion rate
7. mobile web performance monitoring conversion rate Load time Vs Bounce rate
8. Human Perception of Performance Delay
9. RAIL performance model
10. Process user input response under 50ms User Input Response Budget
11. Performance Budget q Response to user Input within 50ms q Generate animation frame by 10ms (60 frames/sec) q Maximize Idle time. q Optimize initial page loading to become interactive within 5s.
12. Performance Analysis
13. Strategy: Lab Data vs Field Data
14. Light House Test My Site PageSpeed Insights Analytics Tools
15. Lighthouse report ..
16. https://web.dev/lighthouse-performance/
18. Improve page loading q Compress and lazy load images q Load images with correct dimension. q Load assets from CDN. q Minify JavaScript and CSS and load asynchronously. q Differ not critical CSS. q Avoid Invisible text while font loading. q Cache assets and static APIs using service worker.
19. Angular Performance
20. Challenges q Big bundle size affects initial page loading. q Complex change detection affects user response time.
21. 01. Route Level Code Splitting q Split AppModule into multiple “Lazy Loaded” Feature modules q With route changes lazy load corresponding feature module. q Doesn’t need to load all codes at the time of initial rendering. q Faster initial page load and page rendering.
23. 02. Component Code Splitting q With Ivy Renderer + Angular 9, Component can be declared without module. q Component can be lazy loaded on demand. q Results reduced feature module / AppModule bundle size. Standalone components in Ivy - Eliran Eliassy
24. Ref: standalone components in the post-Ivy release days
25. 03. Differential Loading q From Angular 8 Differential loading made default in ng cli. q Generates separates bundles for ES2015 and ES5. q Reduced bundle size for modern browsers.
26. 04. Pre-Loading Lazy Modules q With default behavior “NoPreloading” feature modules loaded on route change. q With custom “PreloadAllModules” strategy, all feature modules can be pre-loaded. q Reduces bundle load & execution time on page transition.
28. 05. Pre-Loading viewport links q With QuicklinkModule, custom preload strategy can be set. q Preloads only view port links q Preloads when browser is idle q Preloads when user is not in a slow connection. q Reduces page transition time q Uses bandwidth effectively.
30. 06. SSR/ Angular Universal q Do the first page rendering in server side. q Faster FCP & FMP, because template already rendered. q SEO and SNS benefit q Need server with additional cost.
31. 07. “OnPush” change detection q By default angular checks all component data for change with every user event. q Set component “ChangeDetectionStrategy” to “ChangeDetectionStrategy.OnPush” q Use immutability to change any component data. q Component will only check object reference, not each value of the object. q Reduces component rendering time for complex object.
33. 08. “detach” change detection q Use ChangeDetectorRef to control component change. q Stop component’s change detection using method detach(). q Programmatically trigger change detection using method detectChanges(). q Use method markForCheck() to trigger change detection in a “OnPush” component.
36. 09. Control CD with NgZone q Everything in angular echo system runs with in NgZone call stack q Change detection gets trigger when ever last function in stack executed. q Listen to frequent data changes and it’s computation within method NgZone.runOutsideAngular(). q Trigger change detection by setting value within method NgZone.run().
37. 10. Data loading q Use Service worker to cache meta data Apis q Use Service worker to cache assets. q Subscribe to one observable per component. q Use concatMap, MergeMap, SwitchMap to merge multiple observable into single
38. QnA