1. Speed Measurement & Benchmarking

Before optimizing, you need baseline measurements. Without data, you cannot prioritize fixes or measure improvement. These tools provide the diagnostic information needed to focus on the highest-impact optimizations first.

1. Run Google PageSpeed Insights on your homepage, a product page, and a collection page. These three page types represent the majority of your traffic. Record mobile and desktop scores for each. Focus on mobile first since Google uses mobile-first indexing.
2. Check Shopify's built-in speed report. Online Store > Themes > Speed. Shopify's speed score is different from PageSpeed Insights but provides Shopify-specific context, showing how your store compares to similar Shopify stores.
3. Record Core Web Vitals from Google Search Console. Navigate to Experience > Core Web Vitals. This shows field data (real user measurements) which Google uses for ranking, not lab data. Note which pages are in "Good," "Needs Improvement," or "Poor" categories.
4. Test on a real mobile device with cellular connection. Lab tests use ideal conditions. Test your store on an actual phone using cellular data (not WiFi) to experience what your customers actually see. Time the full page load with a stopwatch.
5. Install EA Page Speed Booster. Before manual optimizations, install a speed optimization app that automatically handles lazy loading, script deferral, preconnections, and resource hints. This provides an immediate baseline improvement that makes subsequent manual optimizations compound.

2. Image Optimization

Images account for 50-70% of total page weight on most Shopify stores. Image optimization is the single highest-impact speed improvement category. Getting images right can double your speed score.

6. Compress all product images before uploading. Use tools like TinyPNG, Squoosh, or ImageOptim before uploading to Shopify. Target under 200KB per product image. A single uncompressed 3MB image adds 2-4 seconds of load time on mobile.
7. Use appropriate image dimensions. Do not upload 4000x4000px images when the display area is 800x800px. Shopify auto-generates responsive sizes, but starting with a 2048px maximum reduces the original file size and processing time.
8. Enable lazy loading for all below-fold images. Images below the viewport should load only when scrolled into view. Most Shopify 2.0 themes support native lazy loading. Verify with browser dev tools that loading="lazy" is present on below-fold images.
9. Use WebP format where possible. WebP images are 25-35% smaller than equivalent JPEG/PNG files. Shopify's CDN automatically serves WebP to supported browsers, but verify this is happening by checking network requests in dev tools.
10. Set explicit width and height on all image tags. This prevents Cumulative Layout Shift (CLS). Without dimensions, the browser does not know how much space to reserve, causing content to jump when images load. This is the most common CLS issue on Shopify.
11. Optimize hero and banner images for mobile separately. Serve smaller hero images on mobile using CSS media queries or Shopify's responsive image helpers. A 1920px-wide hero scaled down to 375px wastes bandwidth and slows the critical rendering path.
12. Remove unused images from your media library. Orphaned images in Shopify's file storage do not directly affect page speed, but keeping your media library clean makes management easier and prevents accidentally loading large old images.

3. JavaScript & App Management

JavaScript is the second biggest speed bottleneck after images. Every Shopify app injects JavaScript, and unmanaged script growth is the primary reason Shopify stores slow down over time.

13. Audit all installed apps and remove unused ones. List every app in your Shopify admin. For each app, answer: "Did this app generate revenue or improve the customer experience in the last 30 days?" If no, uninstall it. Each unused app adds 50-200ms of load time with zero benefit.
14. Check for leftover app code after uninstalling. Many Shopify apps leave behind JavaScript and CSS code in your theme files after uninstallation. Check theme.liquid for script tags and link tags referencing apps you have already removed. Delete orphaned code manually.
15. Defer non-critical JavaScript. Add defer or async attributes to script tags that are not needed for initial page render. Analytics scripts, review widgets, chat widgets, and social media scripts can all be deferred without affecting user experience.
16. Load chat widgets on interaction, not on page load. Chat widgets like Tidio, Zendesk, or Intercom add 300-500ms of load time. Load the chat script only when a user clicks the chat icon or scrolls past a certain threshold. This technique alone can improve scores by 10-15 points.
17. Consolidate tracking scripts. Instead of loading Google Analytics, Facebook Pixel, TikTok Pixel, Pinterest Tag, and Snapchat Pixel individually, use Google Tag Manager to load all tracking through a single container. This reduces HTTP requests and allows async loading.
18. Review third-party script impact. In Chrome DevTools, go to Coverage tab and reload the page. This shows how much of each script is actually used. Scripts with less than 30% utilization are candidates for removal, deferral, or replacement.

4. CSS & Rendering

CSS affects how quickly the browser can paint the first meaningful content on screen. Render-blocking CSS delays everything above the fold, directly impacting LCP and user perception of speed.

19. Inline critical CSS for above-the-fold content. Extract the CSS needed to render the first viewport and inline it in the <head>. This allows the browser to paint above-fold content without waiting for the full CSS file to download.
20. Remove unused CSS. Most Shopify themes include CSS for features you may not use (animations, sliders, advanced grid layouts). Use Chrome DevTools Coverage tab to identify unused CSS rules. Removing unused CSS reduces file size and parsing time.
21. Use font-display: swap for web fonts. This tells the browser to show text immediately in a system font, then swap to the web font when it loads. Without this, text is invisible until the font downloads, causing a flash of invisible text (FOIT) that hurts LCP.
22. Limit the number of web font files. Each font weight and style is a separate file download. Use maximum 2-3 font variations (regular, bold, italic). System fonts (Arial, Helvetica, -apple-system) load instantly and are a valid performance-first choice.
23. Preload critical fonts. Add <link rel="preload" href="font.woff2" as="font" crossorigin> for your primary font. This starts the font download early in the page load, reducing the time before text renders in the correct font.

5. Theme Performance

Your Shopify theme is the foundation of page speed. A bloated, poorly coded theme cannot be fixed with apps alone. Starting with a performant theme makes every other optimization more effective.

24. Use a Shopify 2.0 theme. Shopify 2.0 themes use JSON templates instead of Liquid sections, enabling faster rendering and better caching. They also support native lazy loading, responsive images, and modern JavaScript approaches. Upgrading from a legacy theme typically improves speed scores by 15-30 points.
25. Choose a theme with good performance ratings. Check the Shopify Theme Store for speed benchmarks. Dawn (Shopify's free theme) is the fastest, scoring 90+ out of the box. Premium themes vary significantly — check reviews and speed reports before purchasing.
26. Remove unused theme sections and features. If your theme includes a slideshow, testimonial carousel, Instagram feed, or video section that you do not use, remove those sections. Each adds JavaScript and CSS to every page load.
27. Minimize homepage sections. Each homepage section adds to page weight. Limit your homepage to 5-8 sections maximum. Stores with 15+ homepage sections often see scores drop below 30 on mobile. Prioritize above-fold content and let users scroll or click for more.
28. Avoid carousel sliders. Image carousels load multiple large images on page load, dramatically increasing page weight and LCP time. Replace carousels with a single hero image or a static grid. Studies show users rarely interact with slides beyond the first one anyway.

6. Infrastructure & Caching

Shopify handles hosting infrastructure, but you can optimize how resources are fetched, cached, and delivered to maximize the benefit of Shopify's CDN and server configuration.

29. Add preconnect hints for third-party domains. Add <link rel="preconnect"> for Google Fonts, analytics domains, CDNs, and payment providers. This establishes connections early, saving 100-300ms per domain when resources are needed. EA Page Speed Booster handles this automatically.
30. Use DNS prefetch for secondary domains. Add <link rel="dns-prefetch"> for any domain your page communicates with. DNS resolution takes 20-120ms per domain. Prefetching eliminates this delay before resources are requested.
31. Verify CDN is working correctly. Shopify uses Cloudflare CDN. Verify that assets are served from CDN edge nodes, not origin servers. Check response headers for cf-cache-status: HIT. CDN-served assets load 2-10x faster than origin-served.
32. Minimize HTTP requests. Each resource (image, script, stylesheet, font) requires a separate HTTP request. Reduce requests by combining CSS files, using CSS sprites for icons, and eliminating unnecessary resources. Target under 80 requests per page.
33. Enable Gzip/Brotli compression. Shopify enables Gzip compression by default. Verify that text-based resources (HTML, CSS, JS) are compressed by checking the content-encoding response header. Compression reduces transfer size by 60-80%.

7. Core Web Vitals Optimization

Core Web Vitals are the three metrics Google uses to measure real-world page experience. Optimizing these directly improves both search rankings and user experience.

34. Optimize Largest Contentful Paint (LCP) to under 2.5 seconds. LCP measures when the largest above-fold element finishes loading (usually a hero image or heading). Optimize by: preloading the hero image, using WebP format, minimizing render-blocking resources, and reducing server response time.
35. Optimize First Input Delay (FID) to under 100ms. FID measures how long until the page responds to user interaction. Reduce by: deferring non-critical JavaScript, breaking up long JavaScript tasks, using web workers for heavy computation, and removing unused apps.
36. Optimize Cumulative Layout Shift (CLS) to under 0.1. CLS measures visual instability (content jumping around). Fix by: setting explicit dimensions on images and embeds, reserving space for dynamic content, using CSS contain property, and loading fonts with font-display: swap.
37. Optimize Interaction to Next Paint (INP) to under 200ms. INP (replacing FID in 2024) measures responsiveness across all interactions. Optimize by: reducing JavaScript execution time, avoiding long animation frames, and using requestAnimationFrame for visual updates.

8. Ongoing Monitoring

Speed optimization is not a one-time project. New apps, theme updates, and content changes can degrade performance. Regular monitoring catches regressions before they impact revenue.

38. Run PageSpeed Insights monthly. Set a calendar reminder to test your key pages monthly. Track scores over time to identify regressions. A drop of 10+ points warrants investigation.
39. Check Core Web Vitals in Search Console monthly. Google Search Console shows field data from real users. Monitor the percentage of pages in "Good" status. Address any pages that move from Good to Needs Improvement.
40. Audit apps quarterly. Review every installed app each quarter. Remove apps with low ROI and check for leftover code from previously uninstalled apps. App creep is the most common cause of gradual speed degradation.
41. Test speed after every new app installation. Before and after installing any new app, run PageSpeed Insights. If the new app reduces your score by more than 5 points, evaluate whether its conversion value justifies the speed cost.
42. Monitor real user metrics with Shopify Analytics. Shopify provides a Web Performance dashboard showing real user page load times. This reflects actual customer experience, not synthetic lab tests.
43. Set speed budget alerts. Define maximum acceptable load times (e.g., 3 seconds on mobile) and check against them regularly. Any page exceeding the budget gets flagged for optimization.
44. Test speed on slow connections quarterly. Throttle your connection to 3G and test your store. Many customers, especially international ones, browse on slower connections. A store that works well on 3G works excellently on 5G.
45. Document speed optimizations. Keep a log of what you changed and the impact on scores. This creates institutional knowledge for your team and helps debug if a future change causes regression.

Frequently Asked Questions

What is a good Shopify page speed score?

Target 70+ on mobile and 90+ on desktop in PageSpeed Insights. The average Shopify store scores 35-45 on mobile. Core Web Vitals thresholds: LCP under 2.5s, FID under 100ms, CLS under 0.1.

Do Shopify apps slow down page speed?

Yes. Apps are the number one speed bottleneck. Each adds 50-200ms of load time. Audit monthly, remove unused apps, and use EA Page Speed Booster to optimize script loading for essential apps.

How does page speed affect Shopify conversion rates?

Each additional second of load time reduces conversions by 7%. A store loading in 2 seconds converts 50% more than one loading in 5 seconds. For a $100K/month store, cutting load time from 4s to 2s can add $15K-$20K monthly.

What are Core Web Vitals?

Three Google ranking metrics: LCP (loading speed), FID/INP (interactivity), and CLS (visual stability). Meeting all thresholds earns a search ranking boost. Google Search Console reports your store's performance.

Should I remove all apps to improve speed?

No. Keep apps that drive revenue (email capture, upsells, shipping bars) and remove unused ones. The sweet spot is 5-8 well-chosen apps. Use EA Page Speed Booster to optimize loading for essential apps.