Website Speed Optimization for Online Stores
Before You Start
Establish baseline performance metrics before making changes so you can measure the impact of each optimization. Run Google PageSpeed Insights on three representative pages: your homepage, your highest-traffic category page, and your highest-traffic product page. Record the Performance score (0 to 100), Largest Contentful Paint (LCP), First Input Delay (FID) or Interaction to Next Paint (INP), Cumulative Layout Shift (CLS), and Total Blocking Time (TBT) for both mobile and desktop. Run each test three times and use the median score, since results can vary between runs due to network conditions and server response variability.
Google's Core Web Vitals thresholds define what "good" performance looks like: LCP under 2.5 seconds (how fast the main content appears), INP under 200 milliseconds (how responsive the page is to user interactions), and CLS under 0.1 (how stable the layout is during loading). Pages that pass all three thresholds in Google Search Console receive a ranking boost in search results, making performance optimization both a conversion and an SEO improvement. If your pages fail any of these thresholds, the specific metric that fails tells you where to focus your optimization efforts.
Step by Step Speed Optimization
Beyond PageSpeed Insights scores, dig into what specifically causes slowness. Open Chrome DevTools, go to the Network tab, reload the page with cache disabled, and examine the waterfall chart showing every resource that loads. Sort by size to identify the largest files, which are almost always images. Sort by time to identify the slowest resources, which often include third-party scripts loading from external domains. The Coverage tab (under More Tools) shows how much of your loaded CSS and JavaScript is actually used on the current page, revealing dead code that loads but never executes. WebPageTest.org provides a more detailed waterfall view and lets you test from different locations and connection speeds, which is valuable for understanding how your store performs for visitors on slower mobile connections. Run the Lighthouse audit in Chrome DevTools for the most detailed recommendations, organized by estimated performance impact, which tells you which optimizations to prioritize first.
Images typically account for 50 to 80 percent of total page weight on ecommerce sites, making image optimization the single highest-impact speed improvement. Start by converting all product and banner images to WebP format, which delivers 25 to 35 percent smaller files than JPEG at identical visual quality. Most modern browsers support WebP, and for older browsers you can serve JPEG fallbacks using the picture element with a WebP source and a JPEG fallback. Resize images to the maximum display dimension rather than uploading full-resolution originals. A product image displayed at 600 pixels wide on desktop does not need to be a 3000-pixel original, serve a 1200-pixel file (2x for retina screens) and the visual quality will be indistinguishable from the 3000-pixel version while the file size drops by 85 percent. Use the srcset attribute on img tags to serve different sizes for different viewports: 600 pixels for mobile, 900 pixels for tablet, 1200 pixels for desktop. Implement lazy loading on all images below the initial viewport by adding loading="lazy" to img tags, which tells the browser to load these images only as the visitor scrolls near them. This alone can reduce initial page load time by 30 to 50 percent on image-heavy category pages.
Third-party scripts include analytics (Google Analytics, Facebook Pixel), marketing (email popup tools, exit intent scripts), live chat widgets, review platform embeds, social media share buttons, retargeting pixels, and A/B testing tools. Each script adds HTTP requests, JavaScript execution time, and potentially render-blocking behavior. Audit every script loaded on your store by checking the Network tab in DevTools and filtering by third-party domains. For each script, determine whether it actively contributes to revenue or essential functionality. Remove any script that is no longer used, serves a discontinued campaign, or provides minimal value relative to its performance cost. For remaining scripts, load them asynchronously using the async or defer attribute on script tags so they do not block the initial page render. Move marketing tags and analytics scripts to load after the main content has rendered using the defer attribute or a tag manager configured for delayed loading. Chat widgets can be loaded on scroll or after a delay (3 to 5 seconds after page load) since visitors do not need them during the first seconds of their visit. These changes do not remove functionality but move the performance cost to after the visitor sees your page content.
Browser caching stores static files (images, CSS, JavaScript, fonts) on the visitor's device so that subsequent page views and return visits load instantly from cache rather than downloading files again. Set Cache-Control headers with long expiration times (max-age=31536000 for versioned static assets, max-age=86400 for HTML pages) so that browsers cache your files effectively. If you are on a hosted platform like Shopify or BigCommerce, caching headers are typically configured automatically. If you manage your own server, configure caching headers in your server configuration (nginx.conf or .htaccess). A Content Delivery Network (CDN) serves your static files from servers distributed globally, so a visitor in London loads images from a European server rather than waiting for files to travel from a US data center. Major CDN providers include Cloudflare (free tier available), AWS CloudFront, Fastly, and BunnyCDN. Most hosted ecommerce platforms include CDN delivery automatically, but self-hosted stores on WooCommerce or custom platforms should add a CDN as a priority optimization. CDN delivery typically reduces asset load times by 30 to 60 percent for visitors outside your server's geographic region.
Web fonts add visual polish but create a performance cost. Limit your store to two font families and load only the weights and styles you actually use. If you use Inter in regular and semibold, do not load light, bold, italic, and extra-bold variants that appear nowhere on your pages. Subset your fonts to include only the character sets your language requires, for English, the Latin subset is typically 60 to 70 percent smaller than the full Unicode character set. Use font-display: swap so text renders immediately with a fallback system font and swaps to the custom font once loaded, preventing invisible text during font loading. Preload your primary font file using link rel="preload" in the document head. For CSS, minify all stylesheet files to remove whitespace and comments (your build tool or platform should do this automatically). Identify the critical CSS needed to render the above-the-fold content and either inline it in the HTML head or preload it, allowing the rest of your stylesheet to load without blocking the initial render. Remove unused CSS rules using the Coverage tool in Chrome DevTools, since ecommerce themes often include styles for features and layouts that are not used, bloating the CSS file unnecessarily.
After completing optimizations, retest all three pages (homepage, category, product) using the same tools and record the improved metrics alongside your baselines. Calculate the improvement in each Core Web Vital and the overall performance score. Performance is not a one-time fix, it degrades over time as you add new products (more images), install new apps and scripts, update themes, and add promotional content. Set up ongoing monitoring using Google Search Console (which reports Core Web Vitals for your actual visitors), a free monitoring service like SpeedCurve or DebugBear, or scheduled Lighthouse runs using the command-line tool. Reaudit your store's performance quarterly, or whenever you install a new app, change your theme, or notice a conversion rate decline. Each new app or theme update is a potential performance regression, so treat performance testing as part of your launch checklist for any store change.
Platform-Specific Speed Considerations
Shopify stores benefit from Shopify's built-in CDN, automatic image optimization, and managed hosting, but can still suffer from theme bloat and excessive app installations. Each Shopify app adds its own JavaScript and CSS to your storefront, and stores with 15 to 20 apps often see significant performance degradation. Audit installed apps regularly and remove any that are inactive or provide marginal value. WooCommerce stores running on shared hosting often have slow server response times (Time to First Byte over 1 second) that no frontend optimization can compensate for. Moving to a managed WordPress host with server-level caching (like Cloudways, Kinsta, or WP Engine) typically reduces TTFB from 1 to 2 seconds to 200 to 400 milliseconds, which benefits every page on the store. BigCommerce stores face fewer plugin-related performance issues than WooCommerce but have less control over server-side optimization and caching configurations.
Regardless of platform, the optimization priority is the same: images first (biggest impact, easiest to fix), scripts second (moderate impact, requires audit), caching and CDN third (moderate impact, usually one-time setup), and CSS and font optimization fourth (smaller impact, more technical). Completing just the first two categories, images and scripts, typically produces 60 to 80 percent of the total possible speed improvement.