Web Performance Optimization — Where to Start

December 3, 2024 • 1 min read

Performance is a feature. Studies consistently show that every 100ms of load time costs conversions. Here's where to focus first.

Measure before you optimize

Use PageSpeed Insights or Lighthouse in Chrome DevTools. Focus on Core Web Vitals:

  • LCP (Largest Contentful Paint) — how fast the main content loads
  • CLS (Cumulative Layout Shift) — how stable the layout is
  • INP (Interaction to Next Paint) — how responsive the page is to input

Images — the biggest win

Images are typically 60–80% of page weight. Fix them first:

  • Use modern formats (WebP, AVIF)
  • Add loading="lazy" to below-the-fold images
  • Set explicit width and height to prevent CLS
  • Compress with Squoosh

Reduce render-blocking resources

<!-- Defer non-critical JS -->
<script src="app.js" defer></script>

<!-- Preload critical fonts -->
<link rel="preload" href="font.woff2" as="font" crossorigin>

Use a CDN

Static assets (images, CSS, JS) served from a CDN cut latency for global users dramatically. Most hosting platforms offer this built in.

Small improvements compound. Start with images and JavaScript — you will see results immediately.

Back to Blog