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
widthandheightto 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