Performance Optimization Strategy in 2022

Get a big picture

  • Check the state of things in CrUX
  • Check the performance panel in Chrome
  • Check what browsers we are supporting, and how

1. Cleaning up and reordering the <head>

  • Turn on Brotli compression
  • Defining web font loading
  • Not loading fonts for users with saveData on and prefers-reduced-data on
  • Inlining critical CSS per template
  • Preload critical files
  • Experiment with Local Overrides in Chrome


2. Managing critical CSS and CSS loading

  • Define critical CSS per template, make sure image is static (check with outline)
  • Removing all external SVGs (inlined into CSS)
  • Use modern CSS layout and utility classes
  • Create critical.css and non-critical.css for each template

3. Improving Web Font Loading

  • $, §, ×, ", ',’,“,Á,Â, É,Í, Ó, é, é, é, â, î , ô, ñ, ö, ü, ä, ć, ç, ß, á, é, í, ó, ú, š, ž, å, £, €, ÷, –,  —, “, ”, ć, ¢, %, ‰, …, ¶
  • Move to Latin-1 Supplement
  • Consider adding MijaLCP and ElenaLCP as variants for poor connections
  • Consider adding font-display, e.g. optional or swap

4. Optimizing the rendering for LCPs

  • Add preload for LCPs (usually images or large headings)
  • Optimize images, by default all non-critical images include loading="lazy" and decoding="async"
  • All images should have height and width defined
  • Above-the-fold images include loading="eager"
  • Base64 encoding LCP to improve perf on mobile (AVIF and/or JPEGs)
  • Check LCPs in Chrome’s performance panel

5. Deferring/delaying JS and third-parties

  • Define priorities for critical and non-critical JS
  • critical JS needs to be coming early / sync or async
  • non-critical JS needs to be delayed as far as possible
  • Add lazy loading and async decoding to codepen, vimeo, youtube
  • Use facades for third-party resources
  • Move third-parties to a Web worker with Partytown
  • Minimize the number of JS chunks (10–15 works best)
  • Breaking down long tasks
  • Following along with framework specific optimizations