How to Fix Common Ecommerce Site Speed Issues with NitroPack

Last updated on Apr 1st, 2025 | 6 min

Fixing eCommerce site speed issues can feel like trying to find your way out of a maze.

You try different routes—install caching plugins, test image compression tools, remove unnecessary scripts—and just when it feels like you’re making progress, you hit another dead end.

Your PageSpeed Insights score is still disappointing. Core Web Vitals keep failing. Shoppers bounce. Ads underperform.

At this point, the real question is: 

Are you optimizing the right issues or just switching tools, hoping something sticks?

In this article, we’ll tackle both. I’ll break down the most common performance bottlenecks that slow down ecommerce sites and show you how NitroPack can actually fix them.

Read on. 
 

Most Common Ecommerce Site Speed Issues and How to Fix Them

If we had to describe a modern eCommerce site in three words, they would be “visual, interactive, descriptive.” That’s why the most common performance issues stem from heavy images, videos, JavaScript files, and fonts. 

That said, here’s how to optimize all of these without sacrificing your store’s user experience.
 

Unoptimized Images

Images are often the biggest files on your site, and they load on every category, product, and promotional page. 

For instance, on Pet Smart’s home page, half of the resources are images:

PetSmart home page

To analyze how many image files you’re loading on any given page, go to Inspect > Network > Img

But the problem isn’t that you, they, or any other eCommerce store is loading too many visuals. It’s that most image optimization tools stop at basic compression.

And that’s not enough. 

There are a ton of different image optimization techniques that will help you serve your content faster while keeping your visuals intact:

  • Convert images to next-gen formats. Both WebP and Avif images are smaller in size than traditional image formats but allow you to preserve the quality of your visuals.
  • Lazy load images. Not all images are equally important, so you do not need to load them all at once. Make sure that any image that’s below the fold is lazy loaded so that any above-the-fold content loads faster and ensures an optimal experience for your visitors.
  • Serve high-quality images on all devices. In general, the majority of traffic comes from mobile devices, and perhaps that’s true for your store as well. That said, you must ensure your visuals look as good on desktops as on phones and tablets without sacrificing speed.
     

How NitroPack applies image optimization

NitroPack’s image optimization stack allows any website owner to serve high-quality, lightweight images on any device. 

This means that our service applies the following optimizations automatically:

  • Compressing image files to reduce their size. NitroPack automatically applies lossy compression to all your images so the browser can render them faster and serve them immediately to users. On top of that, you can manually adjust the level of compression applied. 

NitroPack image optimization feature
 

  • Lazy loading below-the-fold images. Loading all your images at once can massively slow down the initial loading of your pages. That’s why NitroPack lazy loads all offscreen visuals and loads them only when they are present within the user’s viewport.

NitroPack Lazy Load Images feature

  • Resizing images based on device. Users expect you to provide a consistent user experience across different devices. NitroPack’s Adaptive Image Sizing makes your visuals match the dimensions of the containers they’re displayed in for desktop, mobile, and tablet devices. 

Adaptive image sizing NitroPack feature

Fix all image optimization issues once and for all. Get NitroPack and unlock 60+ advanced features →

Inefficient Fonts

Fonts define your brand’s voice and shape shoppers' experiences of your store. But behind the scenes, they’re also among the most common culprits for slow rendering and layout instability.

Here’s the problem:

Most font files include hundreds, sometimes thousands, of glyphs to support different languages and styles. But your pages usually use just a fraction of those characters. 

Despite that, the browser still downloads the full font file. Add multiple weights, styles, and families, and the performance hit stacks up quickly.

Unoptimized fonts

Unoptimized font files can quickly add up to your page weight

Even worse, fonts are often loaded in ways that block rendering. 

This means your content might be ready, but the browser waits for the fonts before showing anything, causing FOIT (Flash of Invisible Text). 

Example of flash of invisible text

Or it shows fallback fonts first, then swaps in your actual fonts later (Flash of Unstyled Text), creating layout shifts that ruin the visual experience and tank your Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP) scores.

Core Web Vitals failed INP and CLS

In a nutshell:

It’s a high-impact issue that’s easy to miss and even easier to underestimate.
 

How NitroPack optimizes font files

NitroPack applies a set of advanced font optimization techniques to speed up your font delivery and minimize visual disruptions during load:

  • Removes unused glyphs. Most fonts come packed with characters you’ll never use. NitroPack removes unused glyphs from font files so you only load what’s needed on the current page, keeping font files lean and fast.

Font subsetting NitroPack feature

  • Applies compression to reduce file size. NitroPack compresses your font files using Brotli or GZIP, reducing their size before sending them to the browser.

NitroPack Font compression

  • Overrides font rendering behavior. You can control how fonts are rendered during the load process using NitroPack’s font-display override, reducing layout shifts and improving perceived speed.

Override font rendering behavior NitroPack

  • Adjusts the font loading strategy. Choose how fonts are prioritized and loaded,  whether they're swapped in, preloaded, or deferred, directly from the NitroPack dashboard. This helps eliminate FOIT and FOUT issues.
  • Optimizes Google-hosted fonts. NitroPack automatically optimizes fonts loaded from Google Fonts by reducing the number of requests and improving how they’re delivered.
     

Heavy Videos & Media

Over the past three years, video usage on websites has grown by 32% on mobile alone, and e-commerce brands are leading the charge. 

6.7% of mobile pages include video element

Videos can bring products to life, show them in action, and remove uncertainty that stops shoppers from buying.

But when videos aren’t optimized, they can do more harm than good.

Large video files, auto-playing embeds, and heavy iframes can massively delay load times, especially for mobile users with poor network connections.

Even if the video isn't immediately visible, it might still load in the background, eating up bandwidth and slowing down more important content above the fold. 

The result? Frustrated users, slower pages, and lower conversions.
 

How NitroPack optimizes videos

NitroPack ensures that your videos enhance engagement and not slow down your store. Here’s how our service handles video content under the hood:

  • Lazy loads iframes. Again, loading below-the-fold videos is a waste of resources. That’s why NitroPack automatically lazy loads embedded video iframes (e.g., YouTube, Vimeo), ensuring they only load when they’re about to enter the user’s viewport. This keeps your initial page load lightweight and fast.

NitroPack lazy load iframes feature

  • Applies video facades. Instead of loading the entire video player immediately, NitroPack displays a static image (a "facade") with a play button. The actual video only loads when the user interacts. This dramatically reduces the initial page weight and improves your Largest Contentful Paint (LCP) score.

Video facades NitroPack

  • Detects theme video overlays. Some themes add custom video overlays (e.g., dark gradients or branding). When enabled, NitroPack detects and preserves these overlays, replacing the thumbnail without triggering the full video load and keeping the intended look without sacrificing speed.

Stop choosing between videos and performance. Have both with NitroPack →

Too Many Third-Party Scripts

Personalization, excellent customer services, and an affiliate program—yes, these are all attributes of a great eCommerce store, but they require three or more separate plugins. 

Don’t get me wrong, tools like Google Analytics, chat widgets, and personalization plugins are all valuable. They help you convert, support, and understand your customers.

But, unfortunately, they come at a cost.

Each third-party script adds weight to your page, competes for network and CPU resources, and often blocks rendering or delays interactivity. Many of them load as soon as the page starts rendering, even if they’re not needed right away.

Good to know:

A render-blocking resource is any file (like JavaScript or CSS) that prevents the browser from showing content on the screen until it finishes loading. When scripts load too early, they block the rendering pipeline, thus delaying key content and user interactions.

This leads to poor INP scores, delayed input responsiveness, and a sluggish experience that frustrates users before they even engage with your store.
 

How NitroPack handles render-blocking scripts

NitroPack’s JS optimization features give you the control and automation needed to keep third-party tools from hijacking your performance:

  • Delays script execution. NitroPack can delay the execution of non-critical JavaScript until after the user interacts with the page (e.g., scrolls, clicks, taps). This allows your key content to load fast and become interactive without getting blocked by background scripts.

NitroPack delayed scripts feature

NitroPack remove render blocking resources

  • Provides fine-grained script control. You decide which scripts load immediately and which are deferred. This makes it easy to balance performance with functionality, loading what matters and when it matters.
     

Uncached or Poorly Cached Pages

Caching is supposed to be the easiest win in site speed—store a page once and serve it instantly next time. However, in e-commerce, a simple caching setup can quickly become a nightmare.

Setting up the wrong cache policy can lead to your cache expiring too frequently, forcing pages to reload from scratch. Or worse, it may not expire when it should, and your visitors may end up seeing out-of-stock products or outdated prices.

On top of that, some tools wait until the first visitor hits a page before caching it. This means every product launch, campaign, or landing page starts off slow, exactly when traffic is highest and when the first impression matters the most. 

And then there’s the dynamic nature of eCommerce: inventory updates, personalized content, logged-in users, and cart data. If your caching strategy isn’t built for that complexity, you’re either breaking functionality or slowing everything down.
 

How NitroPack’s advanced caching mechanism works

NitroPack removes the guesswork and manual configuration from caching, using an intelligent, ecommerce-ready approach that adapts to your store’s needs:

  • Caches your pages preemptively. NitroPack automatically preloads (or “warms”) important pages like your homepage, categories, bestsellers, or any high-traffic URLs, so they’re cached before users visit. This guarantees exceptional performance from the first click.

Cache warmup NitroPack

 

  • Uses smart cache invalidation. When you update a product, change stock levels, or modify content, NitroPack automatically invalidates and regenerates only the affected pages, ensuring fresh data without purging the entire cache.
  • Updates your stock in real-time. NitroPack ensures product availability data is always up to date, even when served from the cache—no more showing “In Stock” when you’re not.
  • Optimizes cart experience. NitroPack caches the cart experience separately, guaranteeing a fast browsing experience for users with items in the cart. 

Cart Cache NitroPack

Step up your caching game with NitroPack. Try now for free →

Unnecessarily Optimized Cart and Checkout Pages

The following lines might sound counterintuitive to the last point, but hear me out. 

Caching is essential, but that doesn’t mean everything should be cached.

In ecommerce, some pages need to stay dynamic by design. Your cart and checkout are two of them.

Why?

Well, imagine the following scenario:

A shopper uses a public computer to purchase products from your store. Because of improper caching, the cart’s quantities don’t update. The shopper removes an item, but it still shows in the cart. This frustrates them and may lead to an abandoned purchase.

But let's say that regardless of the unpleasant cart experience, they decide to move forward. If the checkout page is also cached, the next person who uses the same computer could easily see the previous shopper’s personal details, like their address and payment info, because that data was cached.

The worst thing that could happen to them and your business’s trustworthiness. 

That’s why applying the same blanket optimizations across the entire site is a bad idea.


How NitroPack optimizes sensitive pages

Apart from Cart Cache, NitroPack also gives you complete control over what gets optimized and how, so you can avoid over-optimizing pages that should stay dynamic:

  • Specify which URLs to get optimized. With this setting, you can tell NitroPack to only optimize specific URLs, like your homepage, category, and product pages, while leaving sensitive pages untouched.

Optimize only URLs NitroPack

  • Exclude URLs from optimization. Easily exclude cart, checkout, login, or any other dynamic pages from being cached or optimized, ensuring that user-specific content stays user-specific.
  • Test before going live. NitroPack’s Test Mode lets you preview all optimizations on a staging version of your site, so you can ensure nothing breaks — especially on critical flows like checkout.
     

Bloated Code

Over time, as you add more features and plugins to your store, unoptimized or excessive code begins to accumulate. This includes unused CSS, unnecessary JavaScript, and redundant styles that don’t contribute to the user experience but still get loaded with every page.

Unoptimized CSS

Unoptimized CSS file

In fact, these unused code bytes do contribute to the user experience—negatively. 

Every extra kilobyte of unused code drags down your site’s performance, making it sluggish, especially on mobile.

So you have two choices:

  1. Clean up your tech stacks from redundant plugins
  2. Apply code compression and minification

Minified CSS

Minified CSS file

How NitroPack fixes bloated code

Let’s say you don’t want to say goodbye to some of your plugins and decide to take the second route. NitroPack optimizes your code by minifying and combining your CSS and JavaScript files, reducing their size, and improving load speeds:

  • Combines CSS/JS.  NitroPack combines multiple CSS and JavaScript files into fewer optimized requests, reducing the number of HTTP requests and speeding up page load times. Learn more.
  • Minifies resources. NitroPack automatically minifies your HTML, CSS, and JavaScript files, removing unnecessary spaces, comments, and line breaks, making the files smaller and faster to load.

Minify resoureces by NitroPack

Remove unnecessary code automatically. Install NitroPack now →

FAQs

How do I know if my ecommerce site needs NitroPack?

If your site is slow, if you’re seeing high bounce rates, or if you struggle to pass Core Web Vitals tests, NitroPack can help. Run a performance audit or check your site’s PageSpeed Insights score to see where NitroPack can make a difference.

Does NitroPack improve my mobile site performance?

Absolutely. NitroPack’s optimizations are applied across all devices, including mobile, ensuring your site loads quickly and performs optimally for mobile users, which is crucial for conversions.

How easy is it to set up NitroPack on my ecommerce site?

Setting up NitroPack is simple. You can install the plugin on your site configure the settings via an easy-to-use dashboard, and NitroPack will automatically start optimizing your site.

Will NitroPack work with my ecommerce platform?

NitroPack is a WordPress-only plugin, designed to optimize performance specifically for WordPress-powered ecommerce sites, including WooCommerce. For non-WordPress sites or custom PHP-based ecommerce platforms, NitroPack can be integrated via our SDK to provide tailored optimizations.

Will NitroPack affect the look and feel of my site?

No, NitroPack’s optimizations are focused on performance without changing the appearance or functionality of your site. You can adjust settings to ensure that optimizations don’t interfere with your design.

Niko Kaleev
User Experience Content Expert

Niko has 5+ years of experience turning those “it’s too technical for me” topics into “I can’t believe I get it” content pieces. He specializes in dissecting nuanced topics like Core Web Vitals, web performance metrics, and site speed optimization techniques. When he’s taking a breather from researching his next content piece, you’ll find him deep into the latest performance news.