Fast sites rank higher, convert better, and cost less. Here’s the prioritized checklist that actually moves performance numbers.
Why Performance Matters
Every second of load time loses ~7% of conversions. Google uses Core Web Vitals as a ranking factor. 53% of mobile users abandon sites taking >3 seconds. Performance is not a nice-to-have — it’s revenue infrastructure. The economic case is always stronger than developers think: a 500ms improvement on an ecommerce checkout funnel often produces 2–5% more purchases, which usually dwarfs the optimization cost.
Images First (Biggest Win)
Images are the biggest performance opportunity on 80%+ of sites. Quick wins: (1) compress to WebP or AVIF — 30–50% smaller than JPEG, (2) set width and height attributes to prevent layout shift, (3) lazy-load below-the-fold images (`loading="lazy"`), (4) preload the LCP image (`<link rel="preload" as="image">`), (5) use responsive srcset for different screen sizes. One image optimization pass often cuts page weight by 2–3MB.
JavaScript: Less Is More
JavaScript is the most expensive resource per byte — it must parse, compile, and execute. Audit your bundle with Chrome DevTools or Bundlephobia. Remove unused libraries. Code-split routes (Next.js does this by default). Defer third-party scripts (analytics, chat, marketing). Audit dependencies — one heavyweight library can double your bundle. Measure INP regularly — it reveals main-thread work you didn’t know you had.
Fonts and Typography
Web fonts block rendering. Subset fonts to Latin-only (or add languages you actually support) — 70%+ size reduction. Use `font-display: swap` to show fallback fonts immediately. Preload critical fonts: `<link rel="preload" as="font" crossorigin>`. Reduce to 2 font families max (headings + body). Each additional font weight costs ~20KB. Self-host fonts instead of loading from Google Fonts CDN — fewer connections.
CDN and Caching
Every static asset should be served from a CDN with long cache headers. Images, CSS, JS: cache for a year with immutable filenames (hashed bundles). HTML: cache with a short TTL or ETag revalidation. Use a modern host (Vercel, Netlify, Cloudflare) that handles this automatically. Configure `Cache-Control` headers explicitly — don’t leave to defaults. Proper caching alone can drop TTFB by 200–500ms globally.
Measure and Monitor
Lighthouse for synthetic tests. Chrome UX Report (CrUX) for real-user data. Search Console’s Core Web Vitals report for aggregated field data. Set up regression monitoring — Vercel Analytics, SpeedCurve, or Calibre alert on slowdowns. Most performance issues are introduced gradually, not in one bad deploy. Without monitoring, you won’t notice a 200ms regression until your rankings drop three months later.
Need help with web development?
Get a free audit of your web development setup. We’ll show you exactly where the opportunities are.
Get Free Audit →