Site speed is a confirmed Google ranking factor and a proven conversion factor. For Shopify stores, speed issues are almost universal — the combination of apps, custom code, large images, and third-party scripts creates a performance debt that accumulates over time. Most store owners do not notice the gradual slowdown until rankings drop or conversion rates decline.
This guide provides a systematic, step-by-step approach to identifying and fixing every common speed issue on Shopify. It is based on the methodology we use across our SEO and Shopify development projects.
The connection between speed and SEO
Google uses Core Web Vitals as ranking signals. These three metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — directly measure user experience. Failing them hurts your rankings; passing them gives you an edge over slower competitors.
Speed affects conversion rates directly
Every additional second of load time reduces conversion rates. Research consistently shows that pages loading in under 2 seconds convert at roughly double the rate of pages loading in 5 seconds. For an ecommerce store doing £50,000 per month, a 1-second improvement can add thousands in monthly revenue.
Mobile performance matters most
Google uses mobile-first indexing, meaning your mobile site speed determines your rankings. Most Shopify stores have significantly worse mobile performance than desktop because mobile devices have less processing power, slower connections, and smaller screens that are more sensitive to layout shifts.
Step 1: Diagnose your speed issues
Before fixing anything, establish a baseline and identify the specific issues affecting your store.
Run Google PageSpeed Insights
Test your homepage, a collection page, and a product page on PageSpeed Insights. Record both the field data (real user metrics) and lab data (simulated test). Field data is more important because it reflects actual user experience.
Check Core Web Vitals in Search Console
Google Search Console’s Core Web Vitals report shows your site-wide performance based on real Chrome user data. It categorises your URLs as Good, Needs Improvement, or Poor for each metric. This tells you the scope of the problem.
Use WebPageTest for detailed analysis
WebPageTest provides waterfall charts showing exactly when each resource loads. This reveals which scripts, images, and fonts are blocking the page render. Test from a UK location on a mobile device for the most relevant results.
Identify the biggest offenders
Look at the PageSpeed Insights diagnostics section. It lists specific issues and their impact. Common findings on Shopify stores include:
- Render-blocking JavaScript from apps
- Unoptimised or oversized images
- Excessive DOM size from complex theme layouts
- Third-party scripts delaying page interactivity
- Layout shifts caused by dynamically loaded content
Our technical SEO guide covers the broader context of how these issues affect your overall search performance.
Step 2: Audit and reduce app bloat
Apps are the single biggest performance killer on most Shopify stores. Every installed app adds JavaScript, CSS, and often additional HTTP requests to every page load — even pages where the app is not visually present.
List every installed app
Go to your Shopify admin and list every installed app. For each one, document:
- What the app does
- Whether you actively use it
- Whether it injects scripts on the frontend
- Whether you could achieve the same result with native Shopify features or custom code
Remove unused and redundant apps
Uninstall any app you no longer use. Then check your theme code for leftover app snippets — many apps leave code behind even after uninstalling. Look in your theme’s snippets folder and the theme.liquid file for references to removed apps.
Replace heavy apps with lightweight alternatives
Some app categories are notorious for poor performance: review widgets, pop-up builders, chat widgets, and social proof notifications. If an app adds more than 100KB of JavaScript, investigate lightweight alternatives or consider building the functionality natively. For more on this topic, see our app stack audit guide.
Step 3: Optimise images
Images are typically the largest resources on any ecommerce page. Optimising them can dramatically improve LCP and overall load time.
Use Shopify’s native image CDN
Shopify automatically serves images through its CDN and converts them to WebP format when the browser supports it. Use the image_tag Liquid filter with explicit width and height attributes to leverage this fully.
Specify image dimensions
Always include width and height attributes on image tags. Without them, the browser cannot allocate space for the image before it loads, causing layout shifts (CLS issues).
Lazy-load below-the-fold images
Add loading="lazy" to images below the fold. Do not lazy-load the hero image or the first product image — these should load immediately with loading="eager" and ideally be preloaded with a <link rel="preload"> tag.
Resize images before uploading
Shopify can resize images on the fly, but starting with appropriately sized source images is still important. Product images should be no larger than 2048px on their longest edge. Hero banners should be no wider than 1920px. Uploading 5000px images and relying on Shopify to resize them wastes bandwidth and processing time.
Step 4: Clean up theme code
Theme code quality has a significant impact on performance. Bloated themes with excessive DOM elements, unused CSS, and render-blocking JavaScript slow down every page.
Reduce DOM size
Pages with more than 1,500 DOM elements can cause performance issues on mobile devices. Check your DOM size using Chrome DevTools or PageSpeed Insights. Reduce it by removing unnecessary wrapper elements, simplifying complex layouts, and eliminating hidden content that loads but is never displayed.
Defer non-critical JavaScript
Add defer or async attributes to script tags that are not needed for the initial page render. This allows the browser to parse HTML and render content before processing scripts.
Remove unused CSS
Many Shopify themes include CSS for features you may not use (mega menus, sliders, accordions, tabs). Identify and remove unused CSS to reduce the total CSS file size and eliminate render-blocking resources.
Step 5: Manage third-party scripts
Third-party scripts — analytics, tracking pixels, chat widgets, social media embeds — are often the largest source of performance degradation after apps.
Audit every third-party script
List every third-party script loading on your pages. Common culprits include Google Analytics, Facebook Pixel, TikTok Pixel, Hotjar, Intercom, and social media embed scripts. Each one adds network requests, JavaScript execution time, and often layout shifts.
Load non-essential scripts after page load
Chat widgets, heatmap tools, and social media embeds do not need to load during the initial page render. Defer them until after the page is fully interactive. Use requestIdleCallback or a scroll-triggered loading approach.
Use Google Tag Manager wisely
Google Tag Manager can help centralise script management, but it can also make performance worse if misconfigured. Ensure GTM fires tags efficiently and does not load all scripts on every page. Use trigger conditions to limit scripts to the pages where they are actually needed. This approach is detailed in our enterprise Shopify guide.
Step 6: Optimise font loading
Custom fonts can cause both render-blocking behaviour and Cumulative Layout Shift if not loaded correctly.
Use font-display: swap
Add font-display: swap to your @font-face declarations. This tells the browser to display text immediately using a system font, then swap to the custom font once it loads. This prevents invisible text during font loading.
Preconnect to font servers
If you use Google Fonts or another external font service, add <link rel="preconnect"> tags to establish the connection early. This reduces the time between requesting and receiving font files.
Limit font weights and styles
Every font weight and style you load adds a separate file download. If you are loading Regular, Italic, Bold, Bold Italic, Light, and Medium, that is six files. Most stores only need Regular and Bold, possibly with one Italic variation. Remove any font weights your theme does not actually use.
Consider system fonts
System font stacks provide instant rendering with zero download time. Modern system fonts are attractive and highly readable. For body text especially, a system font stack can eliminate one of the biggest performance bottlenecks without any visual compromise.
Step 7: Set up ongoing monitoring
Speed optimisation is not a one-off project. New apps, theme updates, and content changes can degrade performance at any time.
Schedule monthly speed audits
Run PageSpeed Insights on your key pages monthly. Track the scores and Core Web Vitals metrics over time. Any decline should trigger an investigation into what changed — usually a new app, a theme update, or new content with unoptimised images.
Monitor Core Web Vitals in Search Console
Check the Core Web Vitals report in Search Console weekly. Google reports on a 28-day rolling basis, so issues take time to appear and resolve. Catching problems early prevents them from affecting rankings.
Set performance budgets
Define maximum thresholds for key metrics: total page weight, number of HTTP requests, total JavaScript size, and LCP target. Before installing any new app or adding any new feature, check whether it would breach your performance budget. If it does, find a lighter alternative or optimise elsewhere to compensate.
Document your speed configuration
Create a performance playbook that documents your image standards, approved apps, font configuration, and script loading strategy. Share this with anyone who has access to your Shopify admin or theme code. Prevention is far easier than remediation.
Speed is not a feature — it is a prerequisite. Every Shopify store we build targets a mobile PageSpeed score of 70+ and LCP under 2.5 seconds. These are not aspirational numbers. They are minimum standards that directly protect your rankings and conversion rates.
Andrew Simpson, Founder
Bringing it together
Fixing site speed on Shopify follows a clear hierarchy: diagnose with data, reduce app bloat, optimise images, clean up theme code, manage third-party scripts, optimise fonts, and set up ongoing monitoring. Each step builds on the previous one, and the cumulative effect is often dramatic.
The most common mistake is treating speed as a one-time project. Every app install, theme update, and content addition can reintroduce speed issues. The stores that maintain fast, high-performing sites are the ones that build speed awareness into their ongoing operations.
If your Shopify store is struggling with speed issues, get in touch. We diagnose and fix performance problems as part of our Shopify development and SEO services.