Website Speed Optimization Tips That Actually Work

A slow website doesn't just frustrate visitors — it costs you money. Google uses page speed as a ranking factor, and studies show that a one-second delay in load time can reduce conversions by 7%. The good news? Most speed improvements are straightforward and free.

Here are the optimizations that deliver the biggest impact, ordered by effort vs. reward.

Measure First, Optimize Second

Before changing anything, benchmark your current performance:

PageSpeed Insights — Google's tool, gives both lab and field data
GTmetrix — Detailed waterfall analysis
WebPageTest — Multi-location testing with filmstrip view

Focus on these Core Web Vitals:

LCP (Largest Contentful Paint): Target under 2.5s — when your main content loads
FID/INP (Interaction to Next Paint): Target under 200ms — how fast the page responds to clicks
CLS (Cumulative Layout Shift): Target under 0.1 — visual stability

1. Optimize Images (Biggest Win)

Images typically account for 50-80% of a page's total weight. This is almost always the single biggest optimization you can make.

Use Modern Formats

<!-- Serve WebP with JPEG fallback -->
<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="630" loading="lazy">
</picture>

WebP is 25-35% smaller than JPEG at equivalent quality. AVIF is even smaller but has less browser support.

Compress Aggressively

Most images are saved at far higher quality than screens can display:

# Using sharp (Node.js)
npx sharp-cli --input hero.jpg --output hero.webp --webp '{"quality": 80}'

# Using cwebp
cwebp -q 80 hero.jpg -o hero.webp

For bulk compression, use Squoosh, TinyPNG, or the ShortPixel WordPress plugin.

Lazy Load Below-the-Fold Images

<!-- Browser-native lazy loading -->
<img src="product.webp" alt="Product photo" loading="lazy" width="400" height="300">

This tells the browser to only load images when they're about to scroll into view. Add loading="lazy" to every image except your hero/above-the-fold content.

Always Specify Dimensions

<!-- Bad: causes layout shift -->
<img src="photo.webp" alt="Photo">

<!-- Good: reserves space, prevents CLS -->
<img src="photo.webp" alt="Photo" width="800" height="600">

2. Enable Caching

Caching tells browsers to store files locally so repeat visitors don't re-download everything.

Browser Caching with Nginx

# Cache static assets for 1 year
location ~* \.(css|js|jpg|jpeg|png|webp|gif|ico|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Browser Caching with Apache

# .htaccess
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

WordPress Caching

Install a caching plugin. In order of recommendation:

WP Super Cache — Simple, effective, free
W3 Total Cache — More options, steeper learning curve
WP Rocket — Best overall, but paid ($59/year)

These plugins generate static HTML files so PHP doesn't run on every page load.

3. Enable Compression

Gzip or Brotli compression reduces text-based file sizes by 60-80%.

# Nginx - enable Brotli (preferred) and Gzip
brotli on;
brotli_types text/plain text/css application/javascript application/json image/svg+xml;

gzip on;
gzip_types text/plain text/css application/javascript application/json image/svg+xml;
gzip_min_length 1000;

Verify it's working:

curl -H "Accept-Encoding: gzip" -I https://yoursite.com
# Look for: Content-Encoding: gzip (or br)

4. Minimize Render-Blocking Resources

CSS and JavaScript in the <head> block page rendering. Fix this:

Defer Non-Critical JavaScript

<!-- Bad: blocks rendering -->
<script src="analytics.js"></script>

<!-- Good: loads after HTML parsing -->
<script src="analytics.js" defer></script>

<!-- Also good: loads independently -->
<script src="analytics.js" async></script>

Use defer for scripts that need DOM access. Use async for independent scripts like analytics.

Inline Critical CSS

Extract the CSS needed for above-the-fold content and inline it:

<head>
  <!-- Critical CSS inline -->
  <style>
    body { font-family: system-ui; margin: 0; }
    .hero { min-height: 100vh; display: flex; align-items: center; }
  </style>
  <!-- Full CSS loaded asynchronously -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

Tools like Critical can automate this extraction.

5. Use a CDN

A Content Delivery Network serves your files from servers closest to each visitor. Instead of everyone hitting your origin server, static assets are cached at edge locations worldwide.

Free options:

Cloudflare — Free plan includes CDN, DNS, and basic DDoS protection
Cloudflare Pages — For static sites, completely free

Setup with Cloudflare (5 minutes):

Sign up at cloudflare.com
Add your domain
Update nameservers at your registrar
Enable "Auto Minify" for CSS/JS/HTML
Turn on Brotli compression

Typical improvement: 30-50% faster load times for geographically distributed visitors.

6. Optimize Your Database (WordPress)

Over time, WordPress databases accumulate overhead:

-- Clean up post revisions (keep last 5)
DELETE FROM wp_posts WHERE post_type = 'revision'
AND ID NOT IN (
    SELECT * FROM (
        SELECT ID FROM wp_posts WHERE post_type = 'revision'
        ORDER BY post_modified DESC LIMIT 5
    ) tmp
);

-- Optimize tables
OPTIMIZE TABLE wp_posts, wp_postmeta, wp_options;

Or use the WP-Optimize plugin to handle this automatically.

Also limit revisions in wp-config.php:

define('WP_POST_REVISIONS', 5);

7. Reduce HTTP Requests

Every file your page loads requires a separate HTTP request. Fewer requests = faster loads.

Combine CSS files where possible
Remove unused plugins — each one may add its own CSS and JS files
Use system fonts instead of loading Google Fonts (saves 100-300ms):

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

Remove query strings from static resources for better caching

8. Choose Fast Hosting

All the optimization in the world can't fix slow hosting. Your server's response time (TTFB — Time to First Byte) sets the floor for your page speed.

What to look for:

SSD or NVMe storage (not spinning disks)
Adequate RAM for your CMS
Server location close to your audience
HTTP/2 or HTTP/3 support
PHP 8.x for WordPress sites (2-3x faster than PHP 7.x)

Quick TTFB test:

curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\n" https://yoursite.com

Target: under 200ms. If your TTFB consistently exceeds 500ms, it's time to upgrade hosting.

9. Preload Critical Resources

Tell the browser to start loading important resources early:

<head>
  <!-- Preload hero image -->
  <link rel="preload" href="hero.webp" as="image">

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

  <!-- Preconnect to third-party origins -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="dns-prefetch" href="https://analytics.google.com">
</head>

Use preload for resources needed immediately. Use preconnect for third-party domains you'll need soon.

Quick Wins Checklist

Run through these in order for maximum impact with minimum effort:

Compress and convert images to WebP
Add loading="lazy" to below-fold images
Add width and height to all images
Install a caching plugin (WordPress) or set cache headers
Enable Gzip/Brotli compression
Add defer to non-critical scripts
Set up Cloudflare (free CDN)
Remove unused plugins and themes
Update PHP to 8.x

Make Speed Your Advantage

Website speed isn't just a technical metric — it directly impacts your revenue, SEO rankings, and user satisfaction. The optimizations above can typically cut load times by 50-70%, and most take under an hour to implement.

At DeployBase, performance is built into our infrastructure. Our hosting runs on NVMe SSD storage, includes server-level caching, supports HTTP/3, and runs the latest PHP versions. Combined with our global CDN integration and optimized server configurations, your site starts fast before you even begin optimizing. Focus on your content — we'll handle the speed.

Get fast hosting at DeployBase → — because every millisecond matters.