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>

  • Preconnecting to critical domains
  • Preloading critical fonts
  • 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)
  • Adjust Browserslist to avoid IE10, serving different things to IE11
  • 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