Website Speed Optimization for Shopify Stores (2026)

Website speed optimization is the process of making web pages load faster. It involves reducing the time website browsers spend downloading and displaying your store’s content.

Slow pages can cost you sales. In The Pixel’s 2025 survey of 1,000 UK online consumers, 67% reported abandoning an online shopping basket in the previous year because of poor loading performance.

This guide explains how to measure your store’s speed, identify the pages and features causing delays, and prioritize improvements. 

What is website speed optimization?

Website speed optimization involves improving your site to reduce page load times. Its goal is to make your ecommerce store load quickly enough for customers to browse products and complete purchases before delays drive them away.

You can assess loading performance at two levels:

1. Page speed: How quickly the content on an individual URL loads
2. Site speed: How loading performance varies across your website’s pages

Google’s Core Web Vitals guidance sets three targets for a good user experience:

Meet each target for at least 75% of visits, assessed separately for mobile and desktop. LCP measures when the largest visible content appears, so it differs from the time it takes to load every page element. These metrics can help you identify which aspects of your store’s performance need attention.

In Shopify’s 2026 analysis of store performance, each additional 100 milliseconds of LCP was associated with roughly 3.5% lower conversion rates.

To see how this can affect your bottom line, consider this example: assume an average order value (AOV) of $60, 5,000 daily visitors, and a 2% conversion rate. If conversion falls to 1.7%, daily revenue drops from $6,000 to $5,100—a $900 loss. 

Why is website speed important?

Website load time affects how many visitors convert, how Google’s ranking systems assess your pages, and what you pay for paid traffic.

You may have heard of the “three-second rule,” the idea that shoppers are more likely to leave when pages take too long to load. It isn’t a Google performance standard. For measuring page experience, use Core Web Vitals rather than a universal three-second target.

Google confirms that its ranking systems use Core Web Vitals. Faster loading can therefore contribute to search performance, though good scores don’t always guarantee higher rankings. Google still seeks to show the most relevant content, even when a page’s experience is weaker.

For paid search, Google recommends improving loading speed as part of landing page optimization. Landing page quality contributes to Google’s Ad Rank as well as cost per click. If loading delays cause paid visitors to leave before buying, your cost per sale can also rise even when your cost per click stays the same.

Common factors that affect website speed

The following factors frequently affect how quickly shoppers can load and use your store.

Your ecommerce platform

With a self-hosted store, your team or hosting provider configures servers, caching, and capacity. Shopify manages this infrastructure, including its content delivery network (CDN). Your team controls the theme, product images, and apps that influence storefront performance.

Shopify’s Storefront Renderer (SFR) generates HTML from your Liquid theme and store data. Shopify deploys improvements to this rendering infrastructure automatically. Your team’s performance work includes keeping themes up to date and reducing unnecessary code.

After receiving the HTML, a shopper’s browser still needs to download assets and run storefront JavaScript. The theme and the apps in your ecommerce tech stack therefore affect how quickly shoppers can view and use the page.

Hosting

Traffic spikes can overwhelm server capacity and interrupt purchases. JB Hi-Fi previously experienced a two-hour checkout disruption on their legacy platform. After moving to Shopify, the home entertainment retailer recorded their best Black Friday and Cyber Monday (BFCM) to date while serving nearly twice as much traffic as the previous year.

Before major promotions, confirm how your provider manages peak demand and test third-party integrations under expected load. Shopify reports 99.9% platform uptime across major services and regions over the preceding 90 days. Its calculation excludes planned maintenance, third-party outages, and errors caused by theme customizations or apps, among other exclusions.

Site architecture

Your ecommerce architecture determines where pages are rendered and how data reaches the browser. A storefront that waits for several services to respond before displaying a product can leave shoppers staring at an incomplete page.

Headless commerce separates the storefront from the commerce back end. Developers then manage how the custom storefront displays content, connects to ecommerce APIs, and handles caching. Speed improvements depend on those implementation decisions.

Before rebuilding a store, identify the source of the delay. If oversized images or unnecessary scripts cause the problem, address those first. A change in architecture will still require your team to optimize the content and code delivered to shoppers.

Excessive third-party apps

Ecommerce apps that add storefront scripts create more work for the browser. A review widget, for example, can add requests for code, images, and review data.

HTTP Archive’s 2025 “Web Almanac” found that the median desktop page made 83 third-party requests, up five from 2024. A single app can generate several requests, so this is not an app count.

Look for the Built for Shopify badge on app listings. It identifies apps that meet Shopify’s quality requirements, including performance standards. Test each app on your store to measure its effect alongside your existing theme and integrations.

Remove apps you no longer use, then check for leftover code with the app developer. Compare the same pages before and after changes using PageSpeed Insights and Shopify’s Web Performance reports.

Ways to access website speed information

Use these four tools to find slow pages and measure whether your changes improve your store’s performance. Start with Shopify’s Web Performance reports and Google PageSpeed Insights to assess Core Web Vitals, then use additional testing tools when you need to investigate individual page requests.

How to run a website speed test

Test the pages shoppers use to browse products and buy, then investigate any Core Web Vitals that miss Google’s recommended targets:

1. Select representative pages. Include your homepage, a busy collection page, and a popular product page. In Shopify, go to Analytics > Reports and review Web Performance reports to identify URLs with poor results.
2. Run PageSpeed Insights. Enter a URL and select Analyze. Review the mobile and desktop results separately. Check whether the real-user section describes that specific URL or the wider site, labeled “Origin.”
3. Investigate the affected metric. Compare the results with the thresholds below. Use the Lighthouse diagnostics to locate potential causes. If real-user data is unavailable, use the lab results to investigate loading issues; INP requires measurements of user interactions.
4. Apply a fix and retest. Repeat the test with the same settings and compare several runs. Check your real-user reports afterward to see whether shoppers experience the improvement.

Google’s Core Web Vitals targets apply at the 75th percentile: at least 75% of visits should meet each threshold, assessed separately for mobile and desktop.

PageSpeed Insights’ real-user data covers the past 28 days, so it can take time for a fix to be reflected. Shopify’s reports can also have a reporting delay of up to 36 hours.

How to optimize your website speed

Once you’ve identified which pages and Core Web Vitals need attention, focus on the changes contributing to those specific performance problems. The following optimizations address common sources of slow website performance:

• Use a content delivery network
• Don’t go overboard with theme adjustments
• Evaluate quick view on category pages
• Remove unnecessary pop-ups
• Ease up on homepage hero sliders
• Compress, resize, and reduce images
• Use lite embeds for video
• Reduce redirects and broken links
• Enable lazy loading
• Unblock the browser from parser-blocking scripts
• Organize tracking with Google Tag Manager
• Beware of excessive Liquid loops

Use a content delivery network (CDN)

Shopify includes a Cloudflare-powered content delivery network at no extra cost. A CDN distributes your store’s content across servers around the world, reducing the distance files travel to reach shoppers.

Shopify configures CDN delivery, browser caching, and compression automatically. Your team can concentrate on reducing the images, apps, and theme code each page needs to load.

In Liquid templates, reference theme files with Shopify’s asset_url filter. For example, {{ 'cart.js' | asset_url }} generates a CDN URL with a version parameter that updates when the file changes.

Ask a developer to check for hard-coded asset URLs that bypass this versioning. For product and other uploaded images, use the image_url filter to request appropriately sized versions.

Don’t go overboard with theme adjustments

Use an up-to-date theme optimized for web performance. Shopify’s Horizon and Online Store 2.0 themes include performance optimizations. 

Before choosing a theme, check Shopify’s theme performance data to compare Core Web Vitals across stores using it. Apps and customizations also influence those results, so test your own store after making theme adjustments.

Theme customizations can affect site speed, especially when they add unnecessary code or graphics. Consider performance when making design choices.

Nirav Sheth, CEO and founder of Shopify Platinum Partner Anatta, says, “Quick speed hacks will not build the foundation for long-term performance—only real speed improvements will, and that starts with optimizing your underlying theme architecture."

Evaluate quick-view on category pages

Quick-view pop-ups show images and details of a product while shoppers browse a catalog, without requiring them to visit a product detail page.

Some implementations preload substantial product data for every item in a collection, which can slow page load times. If shoppers rarely use quick-view, its performance cost may not be worthwhile.

Check your theme or app settings to see whether quick-view is enabled. For custom implementations, ask a developer to evaluate its performance impact and remove unnecessary code if you decide not to use the feature.

Remove unnecessary pop-ups

Pop-ups exist to display special offers or entice people to take the next step in the customer journey. Whether it’s redeeming a coupon or entering their email address, pop-ups can help engage first-time visitors and open the door to future communication.

However, there’s a fine art to ecommerce pop-ups. Too many flashing graphics can be detrimental to site speed and performance, not to mention distracting users from engaging with website content you’ve already optimized for conversions.

Set parameters around your use of pop-ups to prevent site-speed delays. For example, you could create pop-up triggers so that extra code doesn’t slow down your site. Consider exit intent or time-delay pop-ups. Both of these triggers give breathing room between initial page load and pop-up load.

Ease up on homepage hero sliders

Large hero slideshows are great for showing off your products. Unfortunately, there’s a downside: the size and quality required for a hero slider to look good can increase load times, especially if you have four to five slides.

If your hero slider is affecting performance, reduce the number of slides or consider using a single high-quality hero image instead.

If you choose to use a slider, follow UX best practices, such as:

• Stick with two to three slides.
• Display the slides as static content sections rather than auto-rotating carousels.
• Use srcset or Lazy Load as a catch-all.

Compress, resize, and reduce images

On the median 2025 home page, images accounted for about 1,059 KB of a 2,862 KB desktop page—more bytes than JavaScript, fonts, CSS, and HTML combined.

Upload the best-quality images you can provide. Shopify’s image CDN compresses images and selects a delivery format, such as WebP or AVIF, based on the visitor’s browser. You can skip manually compressing every image before uploading it.

Your theme determines which image sizes the browser requests. Shopify’s image_url filter requires a width or height and returns a CDN URL for that size. Specifying only the width preserves the image’s proportions. Shopify also prevents enlargement beyond the original dimensions.

For responsive images, developers can pair image_url with image_tag, which generates a srcset containing multiple image sizes. An accurate size attribute helps the browser choose a suitable file for the space the image occupies.

Review how many images each page loads, too. Remove duplicate product shots and decorative images that add little information, then check that thumbnails and mobile layouts request suitably sized files.

Use lite embeds for video

Ninety-one percent of businesses use video as a marketing tool, according to Wyzowl’s 2026 survey.

Not only does the standard embed code from YouTube make your site bloated—as some files are downloaded even before the visitor has clicked the Play button—it uses the <iframe> tag where the width and height of the video player are fixed. Your video doesn’t adjust to the screen size of different devices.

The solution is lite embeds, which load the videos directly on your webpage. When the page initially loads, the site only embeds the thumbnail image of the YouTube video. The video player itself (and all its extra JavaScript) only loads when the user clicks inside the thumbnail.

YouTube thumbnails are about 15 kilobytes, so lite embeds can reduce the size of webpages by almost a megabyte.

Reduce redirects and broken links

Too many redirects and broken links can negatively impact performance and harm your SEO rankings.

For example, 302 redirects, which indicate a page has been moved temporarily, can hurt your SEO. They also trigger additional HTTP requests and delay data transfers.

Instead, use a “cacheable redirect” or Shopify’s built-in redirects function—which are 301s by default—in your Navigation panel. Avoid redirecting URLs to pages that are themselves redirects. 

After a website migration, update internal links to point directly to their new destinations. This avoids sending shoppers through redirects when they move between pages.

Broken links for page elements like images, CSS, and JS files increase HTTP requests and sting your site speed. Use a tool like Broken Link Checker to remove them. Creating custom 404 error pages will assist visitors who accidentally enter an incorrect URL for your site.

Enable lazy loading

Lazy loading is a technique that prevents all content from loading immediately on a webpage. Ecommerce sites that use lazy loading only display content when users hit certain triggers.

You can see lazy loading in action when a user visits your ecommerce product page. Content visible above the fold, such as the item’s title, imagery, and product description, can load immediately. 

Supporting content can then load when users scroll beneath this section. User-generated content (UGC), social media carousels, and customer reviews can load as shoppers reach them rather than during the initial page load.

Unblock the browser from parser-blocking scripts

A browser parses HTML to build your page. An external script loaded with a tag such as <script src="theme.js"></script> pauses that parsing while the script downloads and runs.

The async and defer attributes let the browser continue parsing HTML during the download, but they change when the script runs:

• async runs the script as soon as it is ready, which can interrupt HTML parsing. Scripts can execute in any order, so use it for code that operates independently.
• defer waits until HTML parsing finishes and runs scripts in their document order. It suits theme scripts that need the page’s HTML or depend on an earlier script.

For example, <script src="theme.js" defer></script> defers execution until the HTML has been parsed. These attributes apply to external classic scripts. JavaScript modules have different loading rules.

Ask a developer to check dependencies before changing script attributes. Then test navigation, product options, and cart actions to catch anything affected by the new execution order.

Organize tracking with Google Tag Manager

In Shopify, manage tracking pixels under Settings > Customer events. Pixels collect events such as product views and completed checkouts for your analytics and advertising services. Use an app pixel when an integration is available for the service you need.

Google Tag Manager (GTM) gives your team one place to configure tracking tags. However, individual tags can still download scripts and send network requests. Remove unused tags, check for duplicate tracking across apps and GTM, and limit triggers to the events each tag needs.

If your setup requires GTM, follow Shopify’s guide to creating a Google Tag Manager custom pixel. Custom pixels run in a sandbox, which restricts access to the page and can affect existing tag behavior. Have a developer review and test the integration.

Beware of excessive Liquid loops

Liquid is the Shopify coding language. Liquid features can be useful for tasks like outputting images or product variants, but consider their impact on load times.

Review your theme code to make sure you aren’t running Liquid loops multiple times looking for the same information. This can happen when multiple developers work on a theme, leading to duplicated tasks or conflicting code. Removing these duplications can help your page load faster.

Document internal performance standards for everyone editing your theme. Require developers to check for duplicate work and justify nested loops during code review. Set performance budgets for key page templates, record results before and after changes, and investigate slower Liquid rendering with Shopify Theme Inspector before publishing.

Optimizing speed for mobile

Test the full shopping journey on a phone over a mobile connection, from landing page to completed checkout. 

Check how quickly product images appear and whether buttons respond promptly. Filter Shopify’s web performance reports by mobile device to identify pages with poor Core Web Vitals.

At checkout, enable Shop Pay so customers can reuse saved shipping and payment details. That reduces typing on a small screen, including for first-time customers who have used Shop Pay at another store. Test both guest and accelerated checkout to check that shoppers can select delivery options and complete payment.

“The majority of our customers today are discovering new products on the go on their mobile devices, and if they have to fill out a form, we’ve lost them," says Benjamin Sehl, cofounder of apparel brand Kotn. “Enabling Shop Pay in our checkout has really made the most painful point of the customer experience delightful, and since it’s tied into the million-merchant ecosystem, even new customers can check out in one click.”

For more detailed instructions, follow Shopify’s guide to mobile site speed optimization.

Optimize your website speed and monitor the conversion impact

Prioritize slow product and collection pages that receive the most traffic. Work through these web performance optimization steps in order:

1. Record your baseline. Save the affected pages’ Core Web Vitals and your store’s conversion rate, separating mobile and desktop results.
2. Make changes in the theme editor. Remove unused sections and disable unnecessary animations. These are DIY tasks if you can adjust the settings and test the results yourself.
3. Get help with code-level problems. Ask Shopify Support about basic performance improvements if you use a free Shopify theme. You can also contact the theme or app developer when testing identifies their code as the cause. Hire a Shopify Partner when custom development or problems involving several integrations exceed your team’s expertise.
4. Retest and monitor conversions. Check the same pages after each change and confirm that shopping functions still work. Monitor real-user performance as new data arrives, then compare conversion rates with your baseline. Record promotions and changes in traffic sources that could also affect the results.

Assign someone to review performance after each theme update or app installation so new additions don’t undo the improvements.