Website speed is a ranking factor, a conversion factor, and a user experience factor all at once. A site that loads in 1 second converts 3x better than a site that loads in 5 seconds. This guide covers the most impactful optimizations — in order of priority.

Measure Before You Optimize

Start with a baseline. Run your site through:

  • Google PageSpeed Insights — shows Core Web Vitals scores for mobile and desktop, with specific recommendations
  • WebPageTest.org — more detailed waterfall analysis, useful for diagnosing specific bottlenecks
  • Chrome DevTools Network tab — shows exactly which resources are loading, how large they are, and how long they take

Record your baseline scores before making any changes. This lets you measure the impact of each optimization.

1. Optimize Images (Biggest Win)

Images are almost always the largest resources on a page. The fixes:

  • Convert images to WebP format — 25–35% smaller than JPEG at equivalent quality
  • Use responsive images with the srcset attribute — serve smaller images to mobile devices
  • Set explicit width and height attributes on all images to prevent layout shifts (CLS)
  • Lazy-load images below the fold with loading="lazy"
  • Compress images with tools like Squoosh or ImageOptim before uploading

2. Enable Server-Side Rendering

If your site is built on a JavaScript framework (Vue.js, React, Angular), client-side rendering delays the time at which content becomes visible. Enabling SSR means the browser receives a fully rendered HTML page immediately — dramatically improving Largest Contentful Paint (LCP) and First Contentful Paint (FCP).

3. Use a CDN

A Content Delivery Network serves your static assets (images, CSS, JavaScript) from data centers close to your users. Without a CDN, every visitor to your site fetches files from your origin server regardless of how far away they are. With a CDN, a user in New York and a user in Los Angeles both get files from a nearby edge node.

Cloudflare's free plan covers most small business use cases. For high-traffic sites, Fastly or CloudFront are worth the investment.

4. Minimize and Defer JavaScript

JavaScript blocks page rendering while it loads and executes. Reduce the impact by:

  • Minifying all JS files (remove whitespace and comments)
  • Code-splitting — only load the JavaScript a page actually needs
  • Deferring non-critical scripts with the defer or async attribute
  • Removing unused JavaScript — npm packages that were added and never cleaned up are a common culprit

5. Enable Compression

Brotli and Gzip compression reduce the file size of HTML, CSS, and JavaScript during transfer. Most web servers support both. Brotli is newer and achieves better compression ratios. Enable it in your server config or nginx settings if it isn't already active.

6. Optimize Your Database Queries

Slow server response times (Time to First Byte over 600ms) usually point to database performance. Common fixes:

  • Add indexes to columns used in WHERE clauses and JOIN conditions
  • Cache expensive query results with Redis or Memcached
  • Use eager loading to avoid N+1 query problems (in Laravel: use with())
  • Review slow query logs to identify the worst offenders

7. Set Correct Cache Headers

Static assets that don't change — fonts, logos, JavaScript bundles — should be cached aggressively by the browser. Set Cache-Control: max-age=31536000, immutable on versioned assets. For HTML pages, use shorter cache lifetimes or no-cache to ensure users see updated content.

8. Reduce Render-Blocking Resources

CSS and JavaScript loaded in the <head> block the browser from displaying anything until they've been processed. Move non-critical CSS to load asynchronously. Inline critical CSS directly in the HTML. Load third-party scripts (analytics, chat widgets, social embeds) after the main content has loaded.

What a Good Score Looks Like

Google considers a PageSpeed score of 90+ on mobile to be "good." Achieving this on a feature-rich site requires deliberate engineering — it doesn't happen by accident. Sites that hit 90+ consistently on mobile tend to have SSR, WebP images, a CDN, and minimal third-party scripts.

Ready to Grow Your Business Online?

LAMP Programming is a web development agency based in Santa Barbara, CA. We build fast, modern websites and ecommerce stores that generate real leads.

Get a free consultation →