Web performance

Description

Use assets compression:
- Brotli more effective than gzip and deflate (supported by all major browser engines)
Apply efficient cache policy:
- Cache immutable assets for a long time (1 year or longer)
- Embed hashes to the asset's filenames to allow updates
- Support back/forward cache (cache-control:no-store cannot enter back/forward cache)
Inline critical CSS and lazy-load the rest:
- Critters - inline all CSS used by the page
- Critical - inline above-the-fold CSS
Lazy load non-critical resources:
- Defer offscreen images and iframes using loading="lazy" attribute
- Split javascript using dynamic import()
Serve images in modern formats:
- WebP - supported by all major browser engines
- AVIF - has more limited support, but the images are smaller even compare to WebP
Pre-render pages for instant navigation:
- Speculation Rules API
- Static Site Generation
- Service Worker (Workbox)
Consider applying SSR or SSG (pre-rendering):
- Angular Universal for Angular
- Gatsby for React
Investigate new web features:
- What web can do today?
- ECMAScript proposals
- Web APIs on MDN
- CSS Containment
- content-visibility

yarn install --frozen-lockfile