Preloading Routes for Faster Navigation

Code splitting allows us to divide an application’s JavaScript bundle into smaller bundles. Instead of loading the JavaScript for the whole application, we can load an initial bundle that only has what the application needs to bootstrap. Using lazy loading, we dynamically load the JavaScript bundles for the feature modules when the user navigates to its route.

Although this allows the application to load faster and responses to user interactions to be faster, lazy loading can cause the initial navigation to the feature routes to be slow, as the user has to wait while the browser downloads and processes the JavaScript bundle before rendering the route.

Can we achieve both faster application load time and faster navigation?

Find out in this talk how preloading feature routes can give faster navigation, what built-in preloading strategy is available in Angular, how to create custom preloading strategies and use Quicklink library for selective preloading or Guess.js for predictive pre-fetching.

Transcript

1. Preloading Routes for Faster Navigation By Ashnita Bali @ashnita01
2. Performance - Load Speed - Smooth Interaction
7. We don’t like waiting
8. How fast should a site load?
9. 3… 2… 1… gone.
11. Initial Load Performance Metrics Metrics Aim First Contentful Paint <= 1s (from page starting to load) Largest Contentful Paint <= 2.5s (from page starting to load) First Input Delay < 100 ms Time To Interactive < 5 secs Total Blocking Time < 300 ms Cumulative Layout Shift < 0.1 Source: https://web.dev/vitals
12. Factors Cost of JavaScript Render Process - Main Thread Devices Network Latency
13. Source: MDN
15. Source: MDN
17. 14% 28% 58% 59% 34% 7% Source: https://www.gsma.com/mobileeconomy
18. Main thread - Rendering path - JavaScript - Event handling
19. Critical Rendering Path DOM Content Compositing Layers Paint Rasterisation Layout Position & Size Render Tree Visible Content + Styles CSSOM Styles
20. JavaScript Download Execute Compile Parse
21. User Events Source: https://web.dev/vitals
22. What can we do?
23. Code Splitting Reduce JavaScript Payloads
24. Angular Bundles runtime.js polyfills.js styles.js main.js main.js feature-one.js feature-two.js feature-n.js
25. Code Splitting feature-one.module.js feature-two.module.js feature-three.module.js runtime.js polyfills.js styles.js main.js
26. Lazy loading Load bundles on demand
28. Angular CLI ng generate module featureA --route featureA --module app
29. Dynamic Import const routes: Routes = [ { path: featureA, loadChildren: () => import('./feature-a/feature-a.module').then(m => m.FeatureAModule) } ];
30. Lazyloading Download initial bundles Visit Site Render Template FCP ✅ LCP ✅ TTI ✅
31. Problem Visit RouteN ⏳ Download Route Bundle Render Component Visit RouteA Download Route Bundle Render Component ⏳
32. Source: awwwards.com/brainfood-mobile-performance-vol3
33. Preloading Before user requests it
34. How Does Preloading Work in Angular? NavigationEnd Routes Configuration [ { path: ‘a’, canActivate: , loadChildren: }, { path: ‘b’, loadChildren: } ] PreloadingStrategy preload() {} Visit Page Visit Route Router Render Component
35. Preloading Strategies 1. NoPreloading 2. PreloadAllModules 3. CustomStrategy
36. Preloading PreloadAllModules
37. PreloadAll import { RouterModule, PreloadAllModules } from '@angular/router'; @NgModule({ imports: [ RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ] }) export class AppRoutingModule {}
38. Demo PreloadAllModules
39. Preloading Problems
40. Preloading Custom Strategy
41. How to Create Custom Preloading Strategy Build a Service 1 Create preload() method b { prefetchingStrategy: CustomStrategy } 2 Implement PreloadingStrategy a
42. PreloadingStrategy
43. Examples of Custom Strategies Selected routes 1 mouseover / mousedown 2 NetworkInformation 3 Visible links 4 Based on analytics 5
44. Custom Strategy 1. PreloadSelectedModules
46. Data
47. Demo
48. Custom Strategy 2. mouseover/mousedown
49. Demo
50. Custom Strategy 3. Network Information
51. navigator.connection Property Description downLink Bandwidth (megabits/sec) effectiveType Type of connection, ie ‘2g’, ‘3g’, ‘4g’, determined by recent rtt and downLink values rtt Estimated round trip time of current connection (ms) saveData Reduced data usage mode
52. Demo
53. Custom Strategy 4. Visible Links
54. ngx-quiklink IntersectionObserver Web API 1 window.requestIdleCallback() 2 navigator.connection 3 PreloadingStrategy 4
55. Setup npm install --save ngx-quicklink 1. { prefetchingStrategy: QuickLinkStrategy } 2. Import QuicklinkModule 3.
56. Demo
57. Web Standards <link rel=”prefetch”> <link rel=”dnslookup”> <link rel=”preconnect”> <link rel=”preload”> <link rel=”prerender”> <link rel=”modulepreload”>
58. Guess.js 5. Data driven
59. Demo
60. Setup https://guess-js.github.io/docs/angular
61. Resources • Code examples - https://github.com/ashB100/preloading-routes-for-faster-navigation • https://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds • https://web.dev • https://github.com/guess-js/guess • https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/java script-startup-optimization • https://blog.mgechev.com/2018/12/24/quicklink-angular-prefetching-preloading-strategy
62. Thanks! @ashnita01