Performance Optimization Strategy in 2025

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. Clean up and reorder the <head>

  • Turn on Brotli compression
  • Preloading critical fonts <link rel="preload" as="font" crossorigin href="font.woff2">
  • Not loading fonts for users with saveData on and prefers-reduced-data on


2. Manage critical CSS and CSS loading

  • Create critical.css and non-critical.css for each template
  • Use outline: 3px solid red to check layout shifts
  • Remove all external SVGs (inlined into CSS)

3. Improve Web Font Loading

  • $, §, ×, ", ',’,“,Á,Â, É,Í, Ó, é, é, é, â, î , ô, ñ, ö, ü, ä, ć, ç, ß, á, é, í, ó, ú, š, ž, å, £, €, ÷, –,  —, “, ”, ć, ¢, %, ‰, …, ¶
  • Move to Latin-1 Supplement
  • Subset variable fonts with Slice


4. Optimize the rendering for LCPs

  • Add preload for LCPs (usually images or large headings)
  • Add Early hints if the server needs “server think time” to return pages
  • Above-the-fold images should include loading="eager"
  • Base64 encoding LCP to improve perf on mobile (AVIF and/or JPEGs) (maybe)
  • 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
  • Consider moving third-parties to a web worker with Partytown
  • Follow along with framework-specific optimizations

6. Post-improvements