The average website takes 3-5 seconds to load. Yours might be worse. The painful truth is that most of that load time comes from things you could fix in an afternoon.

I ran PageSpeed Insights on this very blog and scored 99/100. Not because I'm a performance wizard, but because I avoided the stupid mistakes most sites make. Here's the playbook.

The Big Three (80% of Speed Gains)

Fix these three things first. Everything else is optimization theater in comparison.

1. Images Are Probably Your Biggest Problem

A single unoptimized hero image can be 5MB. That's larger than your entire site should be.

  • Use WebP format — 30-50% smaller than JPEG at the same quality
  • Resize before uploading — nobody needs a 4000px wide image on a 1200px container
  • Lazy load everything below the fold: <img loading="lazy">
  • Set width and height attributes — prevents layout shift (CLS)
<!-- Before: 3.2MB JPEG, no dimensions -->
<img src="photo.jpg">

<!-- After: 180KB WebP, lazy loaded, sized -->
<img src="photo.webp" loading="lazy" width="800" height="450" alt="Description">

2. Too Many HTTP Requests

Every external resource (script, stylesheet, font, analytics tracker) is a separate network request. Each one adds 50-200ms.

  • Count your requests. Open DevTools → Network tab. If you see 30+ requests, you have a problem.
  • Eliminate unnecessary scripts. Do you really need jQuery AND React AND three analytics scripts?
  • Inline critical CSS. For very small stylesheets (<15KB), inline them in the HTML head to save a request.

3. Font Loading Kills First Paint

Custom fonts block rendering by default. The browser won't show text until the font file downloads. Fix this with font-display: swap:

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

The display=swap parameter tells the browser: "Show the text in a system font immediately, then swap to the custom font when it loads." Users see content faster, no invisible text.

The Quick Wins (10 Minutes Each)

Preconnect to External Domains

If you load fonts from Google Fonts or scripts from a CDN, tell the browser to start the connection early:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Defer Non-Critical JavaScript

<!-- Before: blocks parsing -->
<script src="analytics.js"></script>

<!-- After: loads without blocking -->
<script src="analytics.js" defer></script>

Enable Text Compression

Most hosting platforms support gzip or Brotli compression. A 50KB HTML file becomes 8KB over the wire. If your host doesn't enable this by default, add it.

The Nuclear Option: Go Static

The fastest website is one that's just HTML files served from a CDN. No server-side rendering. No database queries. No build step. Just files.

This blog loads in under 500ms on a 3G connection. Not because of clever optimization, but because the entire page — HTML + CSS + fonts — is about 35KB. There's simply nothing to slow down.

Measure, Don't Guess

Use these free tools to find your actual bottlenecks:

  • PageSpeed Insights: Google's official tool. Gives you Core Web Vitals scores and specific fix suggestions.
  • WebPageTest.org: Waterfall charts showing exactly where time is spent.
  • DevTools Lighthouse: Built into Chrome. Run it in incognito mode for clean results.

Fix the thing that's slowest first. Then re-measure. Repeat until you're happy. Speed is not about perfection — it's about removing the dumbest bottlenecks.