Fast Angular Apps from End to End

Slide 1

Slide 1 text

@yourtwitter Fast Angular Apps from End to End Minko Gechev twitter.com/mgechev github.com/mgechev blog.mgechev.com

Slide 2

Slide 2 text

@yourtwitter Description or Image @twitterhandle Agenda ● Web vitals and LCP ● Tips & tricks ● Application in production

Slide 3

Slide 3 text

@mgechev

Slide 4

Slide 4 text

@yourtwitter @mgechev ● Minification/dead code elimination ● Differential loading ● Understand what you serve ● Code-splitting ● Server-side rendering Improving LCP

Slide 5

Slide 5 text

twitter.com/mgechev

Slide 6

Slide 6 text

@mgechev

Slide 7

Slide 7 text

@mgechev

Slide 8

Slide 8 text

@yourtwitter @mgechev Differential loading ● Produce ES2015 for modern browsers ● Do not send polyfills to modern browsers ● Smaller payload ● Do not downlevel modern features ● Faster execution ● Smaller payload

Slide 9

Slide 9 text

@mgechev -65KB polyfills ~2-10% smaller bundles

Slide 10

Slide 10 text

@mgechev Step 1: Load HTML Step 2: Look at script tags Step 2: Download right version Differential loading

Slide 11

Slide 11 text

@yourtwitter Differential loading Differential loading

Slide 12

Slide 12 text

@yourtwitter Differential loading Differential loading

Slide 13

Slide 13 text

@yourtwitter If you’re still not on version 8 $ ng update @angular/cli @angular/core

Slide 14

Slide 14 text

@mgechev My production bundles are so small! Nobody

Slide 15

Slide 15 text

@yourtwitter @mgechev ● Minification/dead code elimination ● Differential loading ● Understand what you serve ● Code-splitting ● Server-side rendering Improving LCP

Slide 16

Slide 16 text

@mgechev Framework has constant size framework app code

Slide 17

Slide 17 text

@mgechev Framework has constant size framework app code dependency dependency

Slide 18

Slide 18 text

@mgechev Framework has constant size framework app code dependency dependency dependency dependency dependency dependency dependency

Slide 19

Slide 19 text

@mgechev Framework has constant size framework app code dependency dependency dependency dependency dependency dependency dependency

Slide 20

Slide 20 text

@yourtwitter Using source-map-explorer to understand your bundles $ vim angular.json $ ng build --prod $ source-map-explorer dist/app/main.hash.js

Slide 21

Slide 21 text

@mgechev

Slide 22

Slide 22 text

@mgechev Large 3P dependency Other dependencies

Slide 23

Slide 23 text

@mgechev Framework

Slide 24

Slide 24 text

@yourtwitter @mgechev Shipping fewer bytes ● Minification/dead code elimination ● Differential loading ● Understand what you serve ● Code-splitting ● Server-side rendering

Slide 25

Slide 25 text

twitter.com/mgechev lazy-loading

Slide 26

Slide 26 text

@yourtwitter @mgechev ● Component-level ● Route-level Code-splitting could be

Slide 27

Slide 27 text

@yourtwitter @mgechev ● Component-level ● Route-level Code-splitting could be

Slide 28

Slide 28 text

@yourtwitter @mgechev ● Component-level ● Route-level Code-splitting could be

Slide 29

Slide 29 text

@mgechev

Slide 30

Slide 30 text

@yourtwitter Route-based code-splitting const routes: Routes = [ { path: 'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); }, ... ];

Slide 31

Slide 31 text

@mgechev

Slide 32

Slide 32 text

@mgechev

Slide 33

Slide 33 text

twitter.com/mgechev Step 1: Open https://example.com/ Step 2: Determine JavaScript which is likely to be required Step 3: Download the chunks Step 4: Store chunks in browser cache Preloading

Slide 34

Slide 34 text

twitter.com/mgechev

Slide 35

Slide 35 text

@yourtwitter @mgechev ● Prefetch visible links ● Predictive prefetching ● Prefetch on mouse over Prefetching strategies

Slide 36

Slide 36 text

@yourtwitter @mgechev ● Prefetch visible links ● Predictive prefetching ● Prefetch on mouse over Prefetching strategies

Slide 37

Slide 37 text

@mgechev

Slide 38

Slide 38 text

@yourtwitter Prefetch visible links $ npm install ngx-quicklink

Slide 39

Slide 39 text

@yourtwitter Prefetch visible links import { QuicklinkStrategy, QuicklinkModule } from 'ngx-quicklink'; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy }), QuicklinkModule], exports: [RouterModule] }) export class AppRoutingModule {}

Slide 40

Slide 40 text

@yourtwitter @mgechev ● Prefetch visible links ● Predictive prefetching ● Prefetch on mouse over Prefetching strategies

Slide 41

Slide 41 text

@mgechev

Slide 42

Slide 42 text

@mgechev

Slide 43

Slide 43 text

@mgechev Broken window

Slide 44

Slide 44 text

@mgechev A performance budget is a limit for pages which the team is not allowed to exceed. Addy Osmani

Slide 45

Slide 45 text

@yourtwitter Performance Budgets enforces constraints to let you have guarantees v8.0.0 https://angular.io/guide/build

Slide 46

Slide 46 text

@mgechev SSR for faster LCP

Slide 47

Slide 47 text

@mgechev SSR enabled app Node.js Browser API server

Slide 48

Slide 48 text

@mgechev SSR enabled app https://example.com Node.js Browser API server

Slide 49

Slide 49 text

@mgechev SSR enabled app https://example.com Node.js Browser API server

Slide 50

Slide 50 text

@mgechev

Slide 51

Slide 51 text

@yourtwitter $ ng add @nguniversal/express-engine

Slide 52

Slide 52 text

@yourtwitter Deploying an SSR app with a single command

Slide 53

Slide 53 text

twitter.com/ mgechev New in @angular/fire

Slide 54

Slide 54 text

New in @angular/fire

Slide 55

Slide 55 text

twitter.com/ mgechev New in @angular/fire

Slide 56

Slide 56 text

@mgechev @angular/fire @azure/ng-deploy @zeit/ng-deploy angular-cli-ghpages @netlify-builder/deploy

Slide 57

Slide 57 text

@yourtwitter One more feature to make your apps faster ⚡

Slide 58

Slide 58 text

@yourtwitter @mgechev ● Inline critical CSS ● Lazy-load styles ● Inline fonts Removal of blocking resources

Slide 59

Slide 59 text

@yourtwitter

Slide 60

Slide 60 text

@yourtwitter

Slide 61

Slide 61 text

@yourtwitter div.bar { /* ... */ } .bar .spinner { /* ... */ } ...

Slide 62

Slide 62 text

@yourtwitter Coming soon ⚡

Slide 63

Slide 63 text

@yourtwitter @mgechev Summary ● Reducing the bundle size ● Speeding up user navigations ● Predictive prefetching ● SSR for faster LCP ● Automated deployment via CLI

Slide 64

Slide 64 text

@mgechev Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com Survey: mgv.io/talk