A slow Shopify store rarely has one dramatic problem. More often, it has accumulated a collection of smaller ones: an oversized hero image, several apps loading on every page, a theme animation delaying visible content, leftover code from an old integration, and third-party tags competing for the browser's attention.
The answer is not to install another “speed app” and hope for the best. It is to measure the customer experience, identify the biggest constraint, and fix the right things in the right order.
This checklist explains where to start and what to prioritize.
Start with the three Core Web Vitals
Core Web Vitals turn “the site feels slow” into three specific questions:
- Largest Contentful Paint (LCP): How quickly does the main content become visible? A good result is 2.5 seconds or less.
- Interaction to Next Paint (INP): How quickly does the page respond after a visitor clicks, taps, or types? A good result is 200 milliseconds or less.
- Cumulative Layout Shift (CLS): How much does the page move unexpectedly while loading? A good result is 0.1 or less.
Google evaluates these thresholds at the 75th percentile, so the goal is a good experience for most visits—not one unusually fast test on a powerful laptop. The current thresholds and measurement approach are documented in Google's Core Web Vitals guidance and Shopify's web performance overview.
1. Establish a reliable baseline
Before changing code, record the current position. In Shopify, review the performance summary under Online Store > Themes, then use the web performance reports to compare LCP, INP, and CLS by time, page type, page URL, and device.
Shopify's reports use real-user measurements, which are more useful for business decisions than a single synthetic test. The data can be delayed, so do not expect a change made this morning to appear immediately. Use PageSpeed Insights and browser developer tools to diagnose individual pages, but compare those findings with Shopify's field data.
Test at least the homepage, a high-traffic collection, a representative product page, and the cart. Record the mobile result separately. Also note recent theme changes, app installations, campaign tags, and content updates. Shopify's web performance reports can annotate changes such as app installs and new code, which helps narrow the search.
2. Fix the largest above-the-fold image
On many storefronts, the LCP element is the hero or primary product image. Start there.
- Serve an image close to its actual display dimensions instead of sending a huge original to a small screen.
- Use Shopify's responsive image tools so the browser can choose an appropriate size.
- Include width and height attributes to reserve space and reduce layout shift.
- Do not lazy-load the image that is likely to become the LCP element.
- Consider
fetchpriority="high"for the primary LCP image. - Remove reveal animations that keep the hero invisible after its file has loaded.
Shopify already provides an image CDN and automatic format, resizing, and compression capabilities. The practical job is to use those capabilities correctly, not to add another CDN in front of the store. Shopify's performance guidance explains which platform optimizations are already included.
3. Audit apps, pixels, and third-party scripts
Every storefront app should earn the performance cost it creates. Review scripts from review widgets, chat tools, personalization, heatmaps, advertising pixels, tag managers, subscriptions, search, and upsells.
Ask four questions about each one:
- Does the business still use it?
- Does it need to load on every page?
- Does it need to load before the main content?
- Is another tool already doing the same job?
Remove unused scripts and tags. Defer non-critical JavaScript where it is safe. Load a feature only on templates that use it, or only after a visitor interacts with it. Be careful when uninstalling an app: some apps leave code in the theme, so confirm the developer's removal steps and test a duplicate theme before deleting anything from production.
For INP problems, profile before guessing. A large script is not automatically the worst offender; a smaller script with expensive event handlers can make filters, variant selectors, and cart drawers feel unresponsive.
4. Simplify the first screen
The top of the page should help a customer understand the offer and take the next step. It does not need to load every marketing feature at once.
Consider reducing autoplay video, multi-slide carousels, stacked announcement tools, social feeds, and multiple overlapping pop-ups. Render essential product information, navigation, and calls to action in Liquid and HTML rather than waiting for JavaScript to build them in the browser.
This is not about making the site plain. It is about deciding which elements deserve priority. A feature that supports conversion may be worth a performance tradeoff; one that gets little engagement probably is not.
5. Stop unexpected layout movement
CLS problems often come from content arriving without reserved space. Common examples include images without dimensions, late-loading fonts, app banners, review widgets, financing messages, and cookie tools that push the page down.
Reserve the expected space for media and embedded components. Check mobile breakpoints carefully because text wrapping can change a component's height. Make overlays behave like overlays instead of inserting themselves above content after the page has rendered. Review font loading and choose sensible fallbacks so the final font does not dramatically reflow headings and buttons.
Watch a recording of the page loading slowly. The element that moves is often easier to identify visually than in a score report.
6. Reduce work after every interaction
INP measures responsiveness, so focus on what happens when a customer opens a menu, changes a variant, filters a collection, adds an item to the cart, or types into search.
Remove duplicate event listeners and unnecessary DOM updates. Break up long JavaScript tasks. Debounce search and filter inputs where appropriate. Build hidden drawers or dialogs when they are opened instead of rendering thousands of unused elements during the initial load. Shopify's theme performance best practices provide current recommendations for JavaScript, Liquid, images, CSS, and fonts.
7. Investigate theme and Liquid bottlenecks
If Time to First Byte is slow, front-end image changes will not solve the whole problem. Review Liquid code for deeply nested loops, repeated work, and large iterations across products, variants, or metafields. Use Shopify's Theme Inspector and Theme Check instead of rewriting templates on instinct.
Work in a duplicate, unpublished theme. Make one meaningful change at a time, test the affected customer journey, and keep a rollback path. A faster page that breaks variant selection or tracking is not an improvement.
8. Measure again—and protect the gain
After deployment, repeat the same tests and wait for enough field data to compare like with like. Check conversion, engagement, and error reporting alongside speed. Do not claim success from a higher lab score alone.
There is also no practical reason to chase a perfect 100 at any cost. Shopify itself advises merchants to balance useful features with performance. The goal is a consistently fast, stable, responsive buying experience.
Then make performance part of normal operations: review new apps before installation, test theme changes in draft, monitor important templates, and recheck Core Web Vitals after campaigns or major merchandising updates.
Need help finding the real bottleneck?
Kickstart Digital takes a diagnosis-first approach to Shopify performance. We review the theme, apps, scripts, images, integrations, and real-user data, then prioritize the fixes most likely to improve the customer experience—with no fluff and no invented promises.
Start a practical conversation about your store or explore how we fix ecommerce performance issues.
0 comments