Site speed is not just a technical metric—it directly impacts revenue. A 1-second delay reduces conversions by 7%. Sites loading in under 2 seconds convert 2-3x better than sites loading in 5+ seconds. Speed also impacts SEO rankings and advertising costs.
This playbook covers comprehensive speed optimization strategies. From image optimization to code minification, CDN setup to caching—these tactics can improve site speed by 50% or more, directly increasing conversions and revenue.
1How much does site speed impact e-commerce conversions?
Site speed directly correlates with conversion rates. Multiple studies confirm that faster sites convert better, rank higher, and cost less to advertise. Understanding the impact justifies optimization investments.
- SEO Rankings: Google uses page speed as ranking factor. Faster sites rank higher.
- Advertising Costs: Faster sites have higher Quality Scores, reducing cost per click.
- Bounce Rate: Slow sites have 30-50% higher bounce rates than fast sites.
- User Experience: Fast sites create positive first impressions and build trust.
ROI Calculation: If improving speed from 5 seconds to 2 seconds increases conversions by 20%, and your store generates $100K/month, that is $20K additional monthly revenue. Speed optimization pays for itself quickly.
2What are the biggest factors affecting site speed?
Understanding speed bottlenecks helps prioritize optimization efforts. Most e-commerce sites have similar issues. Addressing top factors provides biggest performance gains.
Large, uncompressed images are the #1 speed killer. High-resolution photos, PNG files, and images not sized for display slow pages significantly. Image optimization provides biggest speed gains.
Unminified code, unused JavaScript, render-blocking resources, and large libraries slow page rendering. Code optimization reduces parse and execution time.
Server processing time directly impacts first byte delivery. Slow hosting, unoptimized databases, and server-side processing delays slow entire page load.
Serving content from single location increases latency for distant users. CDN serves from nearest server, reducing load time by 200-500ms for international users.
Without caching, browsers download all assets on every visit. Caching stores assets locally, making returning visitors load 80-90% faster.
CSS and JavaScript that block page rendering delay content visibility. Critical CSS should be inlined, non-critical resources should be deferred or loaded asynchronously.
Analytics, chat widgets, social media embeds, and advertising scripts add significant load time. Load third-party scripts asynchronously or defer them.
Optimization Priority: Start with images (biggest impact), then JavaScript/CSS, then server/CDN, then caching. Addressing top 3 factors typically improves speed by 40-60%.
3How do you optimize images for faster loading?
Image optimization provides the biggest speed gains. Images typically account for 60-70% of page weight. Proper optimization can reduce image file sizes by 50-80% without noticeable quality loss.
WebP format is 30-50% smaller than JPEG with same quality. Modern browsers support WebP. Use JPEG fallback for older browsers. Most platforms convert automatically.
Compress images to 70-80% quality. Most users cannot notice quality difference, but file size reduces significantly. Use tools like TinyPNG, ImageOptim, or Squoosh.
Load images only when they enter viewport (scroll into view). Reduces initial page load. Most platforms support lazy loading natively or via plugins.
Do not serve 2000px images when displaying at 400px. Use responsive images that serve correct size for each device. Reduces file size without quality loss.
Serve different image sizes for different screen sizes using srcset. Mobile gets smaller images, desktop gets larger. Reduces data usage and load time.
- • TinyPNG/TinyJPG: Online compression tool, reduces file size by 50-70%
- • ImageOptim: Desktop app for batch optimization
- • Squoosh: Google's image compression tool with quality comparison
- • Platform Tools: Shopify, WooCommerce have built-in image optimization
- • CDN Services: Cloudflare, Cloudinary automatically optimize images
Combined Impact: WebP + compression + lazy loading + responsive sizing can reduce image load time by 3-5 seconds. Images are the #1 optimization priority.
4What is a CDN and why do you need one?
Content Delivery Network (CDN) is essential for fast global performance. CDN serves content from servers closest to users, dramatically reducing latency and improving load times.
CDN stores your website's static assets (images, CSS, JS) on servers worldwide (edge locations). Content is closer to users geographically.
When user requests content, CDN automatically routes to nearest edge server. User in Tokyo gets content from Tokyo server, not New York server.
Shorter distance = faster delivery. CDN reduces latency by 200-500ms compared to single server location. Especially important for international stores.
- Faster Load Times: 200-500ms reduction in latency, especially for international users
- Reduced Server Load: CDN handles static assets, reducing load on origin server
- Better Scalability: CDN handles traffic spikes without impacting origin server
- Improved SEO: Faster load times improve search rankings
- Cost-Effective: Many CDNs offer free tiers, paid plans are affordable
5How do you implement browser caching?
Browser caching stores website assets locally, so returning visitors do not need to re-download everything. Proper caching makes returning visitors load pages 80-90% faster.
Cache for 1 year. These files rarely change. Use versioning (file?v=123) to force updates when files change. Long cache times dramatically improve returning visitor speed.
Cache for shorter periods (1 hour to 1 day) or use no-cache with ETags. HTML changes more frequently. Balance freshness with performance.
Cache for 5-15 minutes depending on data freshness needs. Dynamic data needs shorter cache times. Use ETags for validation.
- • .htaccess (Apache): Add cache headers in .htaccess file
- • Server Configuration: Configure cache headers in Nginx or server config
- • Platform Settings: Most platforms (Shopify, WordPress) handle caching automatically
- • CDN Settings: CDNs can set cache headers automatically
- • Plugins: WordPress plugins like W3 Total Cache configure caching
Cache Invalidation: When files change, use versioning (file?v=2) or cache busting to force browsers to download new versions. Versioning is cleaner than cache clearing.
6What is code minification and why is it important?
Code minification removes unnecessary characters from CSS and JavaScript files, reducing file size by 30-50%. Smaller files download faster and parse quicker, improving page speed.
Eliminates spaces, tabs, and line breaks. Reduces file size without affecting functionality.
Strips code comments. Comments are for developers, not browsers. Removing them reduces file size.
Renames variables to shorter names (where safe). Advanced minification reduces code size further.
Tree-shaking removes unused functions and code. Only includes code that is actually used.
- • Build Tools: Webpack, Vite, Parcel automatically minify in production
- • Online Tools: MinifyJS, CSS Minifier for manual minification
- • Platform Tools: Most platforms (Shopify, WordPress) minify automatically
- • CDN Services: Cloudflare, CloudFront can minify automatically
Note: Always minify in production, not development. Minified code is harder to debug. Keep unminified source for development.
7How do you reduce server response time?
Server response time (Time to First Byte - TTFB) directly impacts perceived performance. Target under 200ms. Slow server response delays entire page load, regardless of other optimizations.
Select hosting with fast servers, good uptime, and optimized infrastructure. Shared hosting is slower than VPS or dedicated. Managed hosting (Shopify, BigCommerce) is optimized for speed.
Slow database queries delay server response. Index database tables, optimize queries, remove unnecessary queries, and use database caching. Database optimization can reduce response time by 50-70%.
Cache database queries, API responses, and rendered pages using Redis, Memcached, or platform caching. Cached responses serve instantly, reducing server processing time.
Reduce server-side computation, complex logic, and heavy processing. Move processing to client-side or background jobs when possible. Faster server processing = faster response.
Write efficient server-side code. Avoid N+1 queries, optimize algorithms, use efficient data structures. Code efficiency directly impacts response time.
Use edge computing (Cloudflare Workers, Vercel Edge Functions) to process requests closer to users. Reduces latency and server load.
TTFB Targets: Excellent (<200ms), Good (200-400ms), Needs Improvement (400-600ms), Poor (600ms+). Every 100ms reduction improves perceived performance significantly.
8What tools measure and monitor site speed?
Measuring and monitoring site speed is essential for optimization. Regular monitoring identifies performance regressions and tracks improvement progress. Multiple tools provide different insights.
Free tool that tests mobile and desktop performance, provides scores (0-100), identifies issues, and suggests optimizations. Uses real Chrome data and Lighthouse.
Detailed performance analysis with waterfall charts, filmstrip view, and optimization recommendations. Shows exactly what loads when and how long each resource takes.
Advanced testing from multiple locations, devices, and connection speeds. Provides detailed metrics, video recordings, and optimization suggestions.
Tracks real user metrics (Core Web Vitals), page load times, and user experience. Shows actual performance experienced by visitors, not just lab tests.
Google's key metrics: Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS). Tracked in Google Search Console and Analytics.
- Test monthly or after major changes using PageSpeed Insights
- Monitor Core Web Vitals weekly in Google Search Console
- Use GTmetrix for detailed analysis when optimizing specific pages
- Track real user metrics in Google Analytics for ongoing monitoring
- Set up alerts for performance regressions (speed drops below threshold)
Your speed optimization roadmap
Improving site speed by 50% requires systematic optimization. Follow this roadmap to achieve significant performance improvements.
Test current speed with PageSpeed Insights, GTmetrix, and WebPageTest. Identify top bottlenecks, create priority list, and set performance targets.
Convert images to WebP, compress all images, implement lazy loading, set up responsive images, and optimize image delivery. Biggest impact optimization.
Minify CSS and JavaScript, remove unused code, defer non-critical resources, inline critical CSS, and optimize third-party scripts.
Set up CDN, configure browser caching, implement server-side caching, optimize cache headers, and test caching effectiveness.
Optimize database queries, implement server-side caching, upgrade hosting if needed, optimize server configuration, and reduce server response time.
Retest performance, measure improvements, identify remaining bottlenecks, fine-tune optimizations, and verify 50% speed improvement achieved.
Related playbooks
Need expert help improving site speed?
Site speed optimization requires technical expertise, performance analysis, and systematic implementation. If you want a fast-loading store that converts better without the technical complexity, that is what I specialize in.