A Real Shopify Performance Optimization Journey
When we upgraded our Shopify store to a new theme, I expected the performance to improve automatically.
Instead, the first performance test showed something alarming.
The store scored only 30% on GTmetrix — exactly the same as the old theme.
Despite migrating to a new theme, the website was still slow.
That moment started a deep investigation into Shopify performance optimization, Core Web Vitals, third-party scripts, and browser rendering behavior.
What You'll Learn
In this article I’ll cover:
-> Investigating slow Shopify performance
-> Optimizing Largest Contentful Paint (LCP)
-> Reducing Total Blocking Time (TBT)
-> Handling third-party scripts efficiently
-> Fixing layout shifts (CLS)
Over several weeks of experimentation, debugging, and testing, the store’s performance improved from 30% to 62%.
This article documents that journey.
Understanding the Performance Problem
Modern website performance is heavily influenced by Core Web Vitals.
Page Load:
-> LCP (Largest Contentful Paint) - When the main visible content appears
-> TBT (Total Blocking Time) - How long the main thread is blocked by JavaScript
-> CLS (Cumulative Layout Shift) - Unexpected layout movement during loading
Improving Core Web Vitals in Shopify themes requires optimizing several aspects of a page:
-> images
-> scripts
-> rendering behavior
-> third-party integrations
The Initial Situation:
I was working on upgrading a Shopify store to a new Booster theme version.
Migrating the theme and recreating all configurations from the live website took nearly a month.
Once everything was configured — including several third-party apps — I assumed the new theme would perform better.
However, the first GTmetrix test told a different story.
Metric Result
Performance Score ~30%
GTmetrix Grade E–F
This meant the theme upgrade alone had no meaningful performance impact.
So the real question became:
What exactly was slowing the store down?
Phase 1: Investigating Largest Contentful Paint (LCP)
The first major issue was Largest Contentful Paint.
On the homepage, the LCP element was the hero banner image.
The browser was discovering and loading this image too late during rendering.
Experiment 1: Loading the image eagerly
The first attempt was forcing the hero image to load eagerly.
loading="eager"
This ensured the browser prioritized loading the hero image earlier.
The improvement was small but noticeable.
Experiment 2: Increasing fetch priority
Next, I experimented with:
fetchpriority="high"
This tells the browser that the image is a high-priority resource.
The LCP improved slightly, but it was still slower than expected.
Experiment 3: Image preloading
To push optimization further, I experimented with preloading the hero image.
However, Shopify dynamically generates image URLs using srcset, which makes preloading tricky.
To work around this, I created a theme setting exposing the hero image URL, allowing it to be preloaded in the head tag. We cannot access section specific data (here - image banner section) in the head tag. So we need to create a global theme setting for this.
This improved the performance score from 30% to around 42–45%.
But performance optimization rarely stops with a single improvement.
Phase 2: Investigating Total Blocking Time (TBT)
Next, I analyzed Total Blocking Time, which measures how long JavaScript blocks the browser’s main thread.
Initially I suspected Google Tag Manager, since it loads multiple scripts.
But deeper analysis revealed a bigger problem.
Phase 3: Discovering the Real Bottleneck
One third-party application was responsible for most of the slowdown.
The app loaded:
- a 4MB font file
- several large scripts
- heavy network requests
As a result, the homepage size had reached 11MB.
Even worse, the scripts from this app caused nearly 1000ms of Total Blocking Time.
The Solution: Interaction-Based Loading
Instead of loading the app during page initialization, I changed the logic so the app loads only when the user clicks the help icon.
This ensured:
- the heavy iframe is not loaded during page load
- unnecessary network requests are avoided
- javaScript execution does not block the main thread
This small architectural change significantly improved performance.
Phase 4: Image Optimization
While analyzing the network waterfall, I discovered another issue.
Many images were loaded at 768px width, even on smaller mobile screens.
By resizing images appropriately (for example 375px for mobile devices), I reduced the homepage image payload by 30–40%.
This had two major benefits:
• smaller page size and faster downloads
• reduced JavaScript and rendering work, which also helped improve Total Blocking Time (TBT)
Optimizing images not only improved LCP but also reduced the amount of work the browser had to perform during page load.
Phase 5: Optimizing Collection and Product Pages
I realized that optimizing only the homepage was not enough.
Collection pages and product pages also needed improvements.
On collection pages, the LCP element was usually one of the first product images.
I optimized them by:
-> preloading important images
-> optimizing image sizes
-> improving product card rendering
The difference compared to the live theme was significant.
Page Live Theme Optimized Theme
Collection Page ~15% ~70%
For product pages, I applied a similar strategy by preloading the first product images.
Phase 6: Avoiding Unnecessary Resource Loading
Another issue I discovered was that some resources were loading on every page even when they were not needed.
Using Shopify’s template.name, I implemented page-specific loading.
This ensured resources load only on relevant pages, reducing unnecessary network requests.
Phase 7: Fixing Layout Shifts (CLS)
Another Core Web Vital that required improvement was Cumulative Layout Shift.
Layout shifts were caused by:
-> late-loading fonts
-> header dimension changes
-> dynamic UI elements
To fix this, I defined explicit layout dimensions so the browser reserves space before elements load.
This stabilized the page layout.
Phase 8: Rendering Optimization with Modern CSS
To reduce rendering work for the browser, I used modern CSS techniques:
content-visibility
contain-intrinsic-size
These allow the browser to skip rendering off-screen content until it becomes visible.
This significantly reduced rendering cost for below-the-fold sections.
My Debugging Workflow:
During the investigation I relied on several tools.
Lighthouse – local testing and layout debugging
GTmetrix – network waterfall analysis
WebPageTest – rendering insights
Chrome DevTools – CPU throttling and performance profiling
Testing under mobile CPU throttling and slow network conditions helped reveal issues that were not visible on powerful desktops.
A Small Shopify Performance Testing Trick:
While testing preview themes, I noticed performance results were slightly worse.
This happens because the Shopify preview bar injects additional scripts.
However, the preview bar can be disabled using the pb=0 query parameter.
Example preview URL:
https://example-store.myshopify.com/?preview_theme_id=123456789&pb=0
Without pb=0, Shopify injects the preview toolbar which can affect performance measurements.
Adding this parameter allows more accurate testing of preview themes.
Final Results
After several rounds of optimization, the results improved significantly.
Before:
Performance Score ~30%
GTmetrix Grade ~ E/F
After:
Performance Score ~62%
GTmetrix Grade ~ C
The improvement came from many small optimizations combined together.
Why Performance Matters
Website speed directly affects user behavior.
Research shows that a 1-second delay in page load time can reduce conversions by around 7%.
For e-commerce stores, performance directly impacts revenue.
Key Takeaways
If you're optimizing a Shopify store, these steps usually provide the biggest improvements:
• optimize LCP images
• reduce third-party scripts
• lazy load non-critical resources
• optimize image sizes
• stabilize layouts to prevent CLS
Most performance gains come from removing unnecessary work rather than adding more code.
Final Thoughts
This project taught me that performance optimization is not about chasing benchmark scores.
It’s about understanding how browsers load and render pages, and eliminating everything that slows that process down.
Performance optimization is not about making websites faster.
It’s about removing everything that makes them slow.
Question for Developers
Have you faced similar performance challenges when working with Shopify or other frontend frameworks?
What optimization had the biggest impact in your projects?
This article is part of my Shopify Performance Engineering Series.
In the next article, I’ll dive deeper into optimizing Largest Contentful Paint in Shopify through multiple experiments with eager loading, fetchpriority, and image preloading.
Top comments (0)