Page speed directly affects user experience, conversion rates, and search rankings. Research shows that a 1-second delay in page load time leads to a 7% drop in conversions. Here are 12 proven techniques to make your site faster.

1. Optimize Images (Biggest Win)

Images are typically the largest assets on any web page. Three steps:

Use modern formats: Convert JPEG/PNG to WebP or AVIF. WebP is ~30% smaller than JPEG at the same quality. AVIF is ~50% smaller.

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero image" width="1200" height="600" />
</picture>

Implement lazy loading: Use loading="lazy" on images below the fold. Never lazy-load your LCP image.

Set explicit dimensions: Always specify width and height to prevent layout shifts.

2. Enable Compression

Enable Gzip or Brotli compression on your server. Brotli is newer and 20-26% more efficient than Gzip. This alone can reduce HTML/CSS/JS transfer sizes by 60-80%.

3. Leverage Browser Caching

Set appropriate cache headers for static assets. Long cache durations (1 year) for versioned files, short for HTML:

Cache-Control: public, max-age=31536000, immutable  # Static assets
Cache-Control: public, max-age=0, must-revalidate   # HTML

4. Use a Content Delivery Network (CDN)

A CDN serves your assets from servers geographically close to your users, reducing latency. For most sites, a CDN alone can improve TTFB by 50-200ms. Popular options: Cloudflare, Fastly, AWS CloudFront.

5. Minimize Render-Blocking Resources

Scripts in <head> without defer or async block parsing:

<!-- Blocks rendering -->
<script src="analytics.js"></script>

<!-- Non-blocking -->
<script src="analytics.js" defer></script>

<!-- Loads in parallel, executes when ready -->
<script src="widget.js" async></script>

For CSS: inline critical CSS and load the rest asynchronously using media="print" trick.

6. Preload Critical Resources

Tell the browser about critical resources before it discovers them during parsing:

<!-- Preload LCP hero image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

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

7. Reduce JavaScript Bundle Size

JavaScript is expensive — it must be downloaded, parsed, compiled, and executed.

Use tree shaking to eliminate unused code
Code split by route — don't load everything upfront
Use bundle analyzers (webpack-bundle-analyzer) to find large dependencies
Replace heavy libraries with lighter alternatives (e.g., date-fns instead of moment.js)

8. Optimize Fonts

Web fonts are often overlooked but can significantly impact performance:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;    /* Show text immediately in fallback font */
  font-weight: 400 700;  /* Variable font range */
}

Subsetting fonts (only include characters you actually use) can reduce font file size by 80%+.

9. Implement Critical CSS

Extract and inline the CSS needed to render above-the-fold content. This allows the first paint to happen without waiting for the full stylesheet download.

Tools: critical npm package, Penthouse, or automated via PostCSS.

10. Reduce Server Response Time (TTFB)

Target: under 600ms. Improvements:

Use connection pooling for database connections
Cache database query results (Redis, Memcached)
Enable HTTP/2 or HTTP/3 on your server
Optimize database indexes for slow queries
Consider edge rendering for dynamic content

11. Eliminate Unused CSS

CSS frameworks like Bootstrap or Tailwind can result in large CSS files if not properly configured. Use PurgeCSS or your framework's built-in purging to remove unused styles.

With Tailwind CSS, configure the content option properly:

// tailwind.config.js
content: ["./src/**/*.{html,js,ts,tsx}"]

12. Use Resource Hints

Give browsers hints about future navigations:

<!-- Start connection to external domain early -->
<link rel="preconnect" href="https://fonts.googleapis.com" />

<!-- Fetch next-page resources when likely to navigate -->
<link rel="prefetch" href="/next-page.html" />

<!-- Pre-render likely next page (aggressive) -->
<link rel="prerender" href="/next-page.html" />

Measuring Your Improvements

After implementing these changes, measure with:

Krokanti Audit: Full report with before/after comparison in the History tab (Pro)
PageSpeed Insights: Field data from real users
Chrome DevTools Network tab: Waterfall visualization

Run a free website audit to see your current performance score, identify exactly which of these 12 techniques will have the biggest impact on your site, and get a prioritized fix list.