Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fast Angular Apps from End to End
Search
Minko Gechev
September 29, 2020
Programming
1
200
Fast Angular Apps from End to End
Minko Gechev
September 29, 2020
Tweet
Share
More Decks by Minko Gechev
See All by Minko Gechev
Change the World With Open Source Software
mgechev
0
200
The State of Angular
mgechev
1
200
The State of Angular
mgechev
1
390
Software Engineering as a Superpower
mgechev
1
210
Introduction to Angular
mgechev
1
220
Internals of the Angular CLI
mgechev
2
1.4k
The State of Angular
mgechev
1
220
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
3k
The Future of the Front-End Frameworks
mgechev
2
330
Other Decks in Programming
See All in Programming
CSC305 Lecture 12
javiergs
PRO
0
240
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
910
CSC305 Lecture 08
javiergs
PRO
0
280
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
チームの境界をブチ抜いていけ
tokai235
0
230
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
ドメイン駆動設計のエッセンス
masuda220
PRO
13
4.5k
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
280
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
Blazing Fast UI Development with Compose Hot Reload (droidcon London 2025)
zsmb
0
260
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
360
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
470k
A better future with KSS
kneath
239
18k
Typedesign – Prime Four
hannesfritz
42
2.8k
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Visualization
eitanlees
149
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Become a Pro
speakerdeck
PRO
29
5.6k
Music & Morning Musume
bryan
46
6.9k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Transcript
@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
@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 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
@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
@yourtwitter @mgechev • Component-level • Route-level Code-splitting could be
@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
@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
@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
@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 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 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