Website Speed Optimization: The Complete Playbook

Every 100 milliseconds of additional load time costs you conversions. Amazon found that a one-second slowdown cost them 1.6 billion dollars annually. Your site is not Amazon, but the principle scales down perfectly: slow costs money.

Here is a prioritized playbook for making your website fast, organized from highest impact to lowest.

Measure First

You cannot optimize what you have not measured. Run these tests before changing anything:

Google PageSpeed Insights gives you Core Web Vitals scores and specific recommendations. Test both mobile and desktop. The mobile score matters more because Google uses mobile-first indexing.

WebPageTest.org provides waterfall charts showing exactly what loads, in what order, and how long each resource takes. Run it from a location near your users on a cable connection and a 4G connection.

Chrome DevTools Performance tab records actual loading behavior in your browser. Throttle the network to "Slow 3G" and watch what happens. The experience will likely frustrate you. Good. That frustration drives action.

Record your baseline numbers: Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), and Time to First Byte (TTFB). These are the metrics Google uses to evaluate your site.

Tier 1: The Quick Wins (Do These Today)

These changes take minutes and often cut load time in half.

Compress and resize images. This is the number one performance issue on most websites. A 4000x3000 JPEG from your photographer's camera does not belong on your website. Resize to the maximum display size, convert to WebP format, and compress aggressively. A hero image should be under 200KB. Most should be under 100KB.

Use the <picture> element or srcset to serve different sizes for different screens. A phone does not need a 1920px wide image.

Enable text compression. Your server should gzip or brotli-compress HTML, CSS, and JavaScript. Most modern hosting platforms (Vercel, Netlify, Cloudflare) do this automatically. If you self-host, verify it is enabled. A single configuration change can reduce transfer sizes by 70 to 80 percent.

Remove unused CSS and JavaScript. Most sites ship enormous CSS frameworks and only use a fraction. Tailwind CSS with purging removes unused styles automatically. For JavaScript, check your bundle with npx webpack-bundle-analyzer or the Next.js bundle analyzer. You will likely find libraries you forgot you installed.

Lazy load below-the-fold images. Add loading="lazy" to every image that is not visible on initial page load. This one attribute prevents the browser from downloading images the user has not scrolled to yet.

Tier 2: Infrastructure (Do These This Week)

Use a CDN. A Content Delivery Network serves your files from locations close to your users instead of from a single origin server. If your server is in Virginia and your user is in Tokyo, every request travels 11,000 miles. A CDN serves from Tokyo directly.

Vercel, Netlify, and Cloudflare Pages include CDN distribution by default. If you use traditional hosting, put Cloudflare in front of it. The free tier handles most traffic levels.

Optimize your hosting. Shared hosting for $3/month puts your site on an overloaded server with hundreds of other sites. Your TTFB suffers. Modern Jamstack hosting (Vercel, Netlify) gives you edge-deployed static files with sub-50ms TTFB for free.

Implement proper caching headers. Static assets like images, fonts, CSS, and JavaScript should have long cache durations (one year). HTML pages should have shorter durations or use revalidation. Proper caching means returning visitors load your site almost instantly because their browser already has most files.

Preconnect to third-party domains. If your site loads fonts from Google Fonts, analytics from Plausible, or scripts from a CDN, add <link rel="preconnect"> tags for those domains. This starts the DNS lookup and connection handshake before the browser discovers it needs those resources.

Tier 3: Code Optimization (Do These This Month)

Minimize JavaScript bundles. JavaScript is the most expensive resource on your site because it must be downloaded, parsed, compiled, and executed. A 500KB JavaScript bundle on a mid-range phone can take two to three seconds to process.

Code-split aggressively. Load only the JavaScript needed for the current page. Next.js does this automatically by route. Dynamic imports (import()) let you defer heavy libraries until they are actually needed.

Defer non-critical CSS. Your above-the-fold content needs CSS immediately. Everything else can wait. Extract critical CSS and inline it in the <head>. Load the rest asynchronously. This prevents the render-blocking delay caused by large stylesheets.

Optimize web fonts. Fonts are a common performance bottleneck. Subset your fonts to include only the characters you use (latin characters for an English site). Use font-display: swap to show fallback text immediately while the custom font loads. Better yet, use a variable font to replace multiple font files with one.

Eliminate render-blocking resources. Check your PageSpeed report for "Eliminate render-blocking resources." Every CSS file and synchronous JavaScript file in your <head> delays rendering. Move scripts to the bottom of the body or add defer/async attributes. Inline critical CSS and load the rest asynchronously.

Tier 4: Advanced Techniques (When You Need Every Millisecond)

Server-side rendering (SSR) or static generation (SSG). Pre-render your HTML on the server instead of generating it in the browser. The user sees content immediately instead of waiting for JavaScript to build the page. Next.js supports both approaches out of the box.

Edge rendering. Run your server-side logic on edge nodes close to the user. Vercel Edge Functions and Cloudflare Workers execute at the CDN layer, reducing TTFB from hundreds of milliseconds to under 50ms globally.

Image CDN with automatic optimization. Services like Cloudinary, imgix, or Vercel's built-in image optimization resize, compress, and format images on the fly based on the requesting device. Upload the original, and the CDN handles everything else.

Prefetch and prerender likely navigation targets. If 80% of visitors on your homepage click "Pricing," preload the pricing page in the background. The <link rel="prefetch"> tag handles this. Next.js prefetches linked pages automatically when links enter the viewport.

The Third-Party Script Problem

Analytics, chat widgets, marketing pixels, A/B testing tools, and social media embeds are often the biggest performance killers. Each one adds DNS lookups, connection overhead, and JavaScript execution time.

Audit every third-party script. List them all. For each one, ask: does this provide enough value to justify the performance cost? Be ruthless. Many tracking scripts collect data nobody looks at.

Load non-essential scripts after page load. Use the async attribute or load scripts via JavaScript after the load event. Your analytics can start tracking three seconds after page load. Your chat widget can appear when the user scrolls.

Self-host when possible. Google Fonts, analytics libraries, and common JavaScript packages can be self-hosted. This eliminates third-party DNS lookups and connection overhead.

Ongoing Monitoring

Speed optimization is not a one-time project. New content, new features, and new third-party scripts gradually slow things down.

Set up monitoring with SpeedCurve or Calibre to track Core Web Vitals over time. Configure alerts when metrics degrade past thresholds. Run PageSpeed Insights monthly at minimum.

Add performance budgets to your CI/CD pipeline. Tools like Lighthouse CI fail the build if bundle sizes exceed your limits. This prevents performance regressions from reaching production.

The Priority Order

If you do nothing else, do this: 1. Compress and properly size your images 2. Use a CDN (or modern hosting that includes one) 3. Remove unused JavaScript 4. Lazy load below-the-fold content 5. Audit third-party scripts

These five actions address 90% of performance issues on most websites. Everything else is refinement.

Need help making your site fast? We build performance-first.