A 1-second delay in page load time can reduce conversions by 7%. That's a statistic that stuck with me because I've watched it play out in real-time. When I sped up one e-commerce client's site from 6 seconds to 1.8 seconds, their checkout completion rate jumped 23%. Nobody changed their marketing, nobody launched new products—just speed.
Speed optimization isn't a one-time project. It's an ongoing practice. But the principles are consistent, and this guide covers everything I do to keep sites fast.
Measure Before You Optimize
Don't guess what's slowing your site. Measure it. Google's PageSpeed Insights (web.dev/measure) gives you Core Web Vitals plus specific recommendations. GTmetrix and WebPageTest offer more detailed waterfall analysis showing exactly when each element loads. I use our Speed Test tool for quick checks, then drill into WebPageTest for detailed analysis.
Focus on three Core Web Vitals: Largest Contentful Paint (LCP) measures loading performance—should be under 2.5 seconds. First Input Delay (FID) measures interactivity—should be under 100 milliseconds. Cumulative Layout Shift (CLS) measures visual stability—should be under 0.1. Miss these and Google will bury you in search results.
Image Optimization: The Low-Hanging Fruit
Images are usually the largest elements on a page and the easiest wins. Every unoptimized image is free performance waiting to be captured.
Start with proper formatting. JPEG for photographs, PNG for graphics with transparency, WebP for modern browsers (40-60% smaller than JPEG at equivalent quality). Use SVG for icons and simple graphics—tiny file size and infinitely scalable. AVIF is the new challenger with even better compression, but browser support isn't universal yet.
Compress everything. TinyPNG and Squoosh are my go-to browser tools. For WordPress sites, ShortPixel or Imagify automate this on upload. For static sites, build-time tools like sharp (Node.js) or imageOptim (CLI) handle batch processing. I aim for 80% quality as a good balance—visually identical to 100% with 60% smaller file size.
Use responsive images. srcset lets you serve different sizes to different devices—don't send a 2000px image to a phone with a 375px screen. The bandwidth savings are substantial.
JavaScript: The Interactivity Tax
JavaScript is expensive. Not in file size necessarily, but in processing cost. The browser has to download, parse, and execute JavaScript—work it doesn't have to do for HTML or CSS. Every KB of JavaScript is more blocking than the equivalent KB of image data.
Lazy loading defers off-screen images and components. For images, add loading="lazy" and they're skipped until scrolled into view. For components, dynamic imports (import('./heavy-component.js')) delay loading until needed. React.lazy and Vue's async components make this straightforward.
Audit your JavaScript. I regularly find third-party scripts—analytics, chat widgets, marketing pixels—that nobody remembers installing. Each one has a cost. Remove what you don't actively use. For what remains, defer loading with async or lazy-load below-the-fold components.
Caching: The Multiplier
Caching makes subsequent visits instant by reusing previously downloaded resources. Browser caching sets headers telling visitors' browsers to keep copies of files locally. Server-side caching stores generated HTML pages to skip database queries and template rendering on repeat visits.
Set long cache lifetimes for static assets (images, CSS, JS) using Cache-Control headers. Use content hashing in filenames so you can set aggressive caching while forcing updates when files change (example: styles.a1b2c3d4.css vs styles.css).
For WordPress, object caching with Redis or Memcached makes a massive difference for database-heavy sites. For any CMS, consider full-page caching to serve pre-generated HTML instead of building pages on every request.
Server and Hosting Decisions
Your hosting choice fundamentally constrains performance. Shared hosting means your site's speed depends on your neighbors' traffic. A VPS on a quality provider with SSD storage, proper resource allocation, and data centers near your audience will always outperform shared hosting.
For high-performance needs, consider a Content Delivery Network (CDN). A CDN distributes your static assets across global edge servers, serving content from the server physically closest to each visitor. Cloudflare, Fastly, and KeyCDN are solid options. A CDN doesn't replace good hosting, but it multiplies its effectiveness.
Database Optimization
Slow database queries are a silent performance killer. A single poorly-indexed query can add seconds to page load time. Monitor slow queries—MySQL's slow query log and tools like New Relic reveal which queries need attention.
Index columns that appear in WHERE clauses and JOIN conditions. But don't over-index—each index slows writes. Profile first, then add indexes surgically.
Clean up regularly. Orphaned post revisions, spam comments, unused plugins that leave database tables behind—these bloat your database and slow queries. Monthly maintenance keeps things lean.
The Build Step: Production Optimization
If you're using any modern frontend framework, your build pipeline is where the final optimization happens. Minification removes whitespace and renames variables to shorter names. Tree-shaking eliminates dead code that never runs. Code splitting breaks JavaScript into smaller chunks loaded on demand.
For WordPress and other PHP sites, opcode caching (OPcache) is essential. It compiles PHP code once and reuses the compiled version, eliminating the parse-and-compile step on every request. Most quality hosts enable this by default, but double-check.