Website Performance Optimization: Speed Up Your Site

Why Performance Matters

A 1-second delay in page load time can lead to:

• 11% fewer page views
• 16% decrease in customer satisfaction
• 7% loss in conversions

Core Web Vitals

Google uses three key metrics:

Largest Contentful Paint (LCP)

• Measures loading performance
• Should be under 2.5 seconds
• How quickly the main content loads

First Input Delay (FID) / Interaction to Next Paint (INP)

• Measures interactivity
• Should be under 100ms (FID) / 200ms (INP)
• How quickly the page responds to user input

Cumulative Layout Shift (CLS)

• Measures visual stability
• Should be under 0.1
• How much the layout shifts unexpectedly

Image Optimization

Use Modern Formats

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Responsive Images

<img srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 600px) 480px, 800px"
     src="medium.jpg" alt="Description">

Lazy Loading

<img loading="lazy" src="image.jpg" alt="Description">

Minification and Compression

CSS and JavaScript

• Remove comments and whitespace
• Shorten variable names
• Use tools like Terser, CSSNano

Gzip/Brotli Compression

Enable on your server:

gzip on;
gzip_types text/css application/javascript;

Critical Rendering Path

1. Minimize render-blocking resources
2. Inline critical CSS
3. Defer non-critical JavaScript
4. Use async loading where appropriate

<link rel="stylesheet" href="critical.css">
<link rel="stylesheet" href="full.css" media="print" onload="this.media='all'">
<script src="app.js" defer></script>

Caching Strategies

Browser Caching

location ~* \.(jpg|png|css|js)$ {
  expires 30d;
  add_header Cache-Control "public, immutable";
}

Service Workers

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

CDN Usage

Content Delivery Networks distribute your content globally:

• Reduce latency for distant users
• Handle traffic spikes
• Provide DDoS protection

Performance Testing Tools

• Lighthouse: Chrome built-in auditing
• PageSpeed Insights: Google's analysis tool
• WebPageTest: Detailed performance testing
• GTmetrix: Comprehensive performance reports

Performance Wins I've Achieved

In one project, I reduced page load time from 8.2 seconds to 1.8 seconds by:

1. Converting all images to WebP format (saved 40% bandwidth)
2. Implementing lazy loading for below-the-fold images
3. Adding Brotli compression on the server
4. Moving fonts to self-hosted with font-display: swap
5. Using a CDN for static assets

The result: bounce rate dropped by 23%, and conversions increased by 15%. The most impactful single change was image optimization — it accounted for 60% of the total improvement.

Another lesson: always measure before and after. Use Lighthouse to establish a baseline, then track improvements.