Web performance

Table of contents

• Description
• Demo
  • Details
  • Installation

Description

Performance tips:

• 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

Demo

Details

Installation

yarn install --frozen-lockfile