Introduction to Web Performance

Web performance is about how fast a site loads and how responsive it feels. It directly affects user experience, conversions, and SEO — Google uses performance as a ranking signal.

Why performance matters

• Users abandon slow sites — even a 1-second delay reduces conversions.
• Faster sites rank higher in search results.
• Better performance means lower bounce rates and higher engagement.

The two dimensions of performance

• Loading performance — how quickly content appears (page load, first paint).
• Runtime performance — how smoothly the page responds to interaction once loaded (scrolling, clicks, animations).

The biggest wins (in order)

Most performance problems come from a few sources. Start here:

1. Images — usually the largest assets. Compress them, size them correctly, use modern formats (WebP/AVIF), and lazy-load below-the-fold images.
2. JavaScript — too much JS blocks the main thread. Split bundles and ship less.
3. Render-blocking resources — CSS and synchronous scripts delay first paint.
4. Caching — serve repeat visits from cache instead of re-downloading.

A quick win: optimize images

<!-- Modern format, lazy loaded, correct dimensions -->
<img
  src="hero.webp"
  width="800"
  height="450"
  alt="Product hero"
  loading="lazy"
/>

Setting width and height also prevents layout shift, and loading="lazy" defers off-screen images.