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

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