Front-end
Network
Back-end
This talk is about
1.
Network compression
HTTP compression is a must-have
- Up to 80% compression,
especially for HTML
- gzip is super popular,
but try Brotli or Deflate
- Beware of BREACH attacks,
no problem with static files
2.
Better media
compression
SVG, AVIF, WebP, WebM
Better options than JPEG and PNG
- Media files are often the most heavy requests
- Use SVG whenever you can
- Use AVIF / WebP / PNG mix otherwise
3.
Mastering
Cache
Browser Cache, BDD Cache, Proxy Cache, Local Cache...
Different layers of cache
BDD Cache
Service
Cache
Proxy
Cache
Browser
HTTP Cache
Local Cache
localStorage
Cache API
IndexedDB...
All caches are useful
Think ahead
how can you use them ?
4.
Replacing UMD/CJS by ESM
Dead code elimination / Tree shaking
Always use ESM
- Static definition for the win
- Enables dead code elimination
(tree-shaking)
5.
Bundling & Code Splitting
done right
6.
Targeted
transpilation
with browserslist
7.
Agressive
Transpilation
babel "loose" mode
8.
Minification
done right
9.
User-specific
externalized
polyfills
with polyfills.io
10.
Modern mode
module / nomodule
10.
Modern mode
module / nomodule
11.
Performance
budgets
import costs
12.
Non-blocking
rendering
CSS Critical Path
Web fonts swap
13.
Preloading
& Prefetching
14.
Preloading
on mouseover
InstantClick, InstantPage...
15.
Server-Side
Rendering
16.
Optimistic UI
a.k.a.
Latency Compensation
17.
Functional
Programming
pure functions &
low-level optimizations
18.
Do not block
the thread
using Web Workers
19.
Perf audits
CPU/memory dumps
using Dev Tools
20
ways to
improve
performance
of your webapps