Fast Angular Apps from End to End

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

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

@mgechev

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

twitter.com/mgechev

@mgechev

@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

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

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

@yourtwitter Differential loading <!DOCTYPE html> <html lang="en"> <head> <title>Differential loading
</title> </head> <body> <script type="module" src="app-es2015.js"> </script> <script nomodule src="app-es5.js"> </script> </body> </html>

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

@mgechev My production bundles are so small! Nobody

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

@mgechev Framework has constant size framework app code

@mgechev Framework has constant size framework app code dependency dependency

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

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

@mgechev

@mgechev Large 3P dependency Other dependencies

@mgechev Framework

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

twitter.com/mgechev lazy-loading

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

@mgechev

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

@mgechev

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

twitter.com/mgechev

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

@mgechev

@yourtwitter Prefetch visible links $ npm install ngx-quicklink

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

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

@mgechev

@mgechev Broken window

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

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

@mgechev SSR for faster LCP

@mgechev SSR enabled app Node.js Browser API server

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

@mgechev

@yourtwitter $ ng add @nguniversal/express-engine

@yourtwitter Deploying an SSR app with a single command

twitter.com/ mgechev New in @angular/fire

New in @angular/fire

twitter.com/ mgechev New in @angular/fire

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

@yourtwitter One more feature to make your apps faster ⚡

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

@yourtwitter <!DOCTYPE html> <html lang="en"> <head> <link href="icon.css" rel="stylesheet"> <link
href="styles.css" rel="stylesheet"> </head> <body> <div class="bar"> <div class="spinner"> </div> <app-root> </app-root> </div> </body> </html>

@yourtwitter <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="styles.css" media="print"
onload="this.media='all'"> <style> div.bar { /* ... */ } .bar .spinner { /* ... */ } </style> </head> <body> ... </body> </html>

@yourtwitter Coming soon ⚡

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

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

Fast Angular Apps from End to End

Fast Angular Apps from End to End

More Decks by Minko Gechev

Other Decks in Programming

Featured

Transcript