How Fast Is the Average Store & Is Shopify Speed Optimization Necessary?

Performance Results

We ran our tests by simulating a 3G network on mobile devices to see more variation in load times. Absolute numbers will vary across devices and networks.

To create a base to compare speeds against, we tested our sample of Shopify stores against 3 of the top grossing e-commerce stores: Amazon, Walmart, and Ebay.

These companies spend countless engineering hours on performance and provide a baseline of what page speeds are expected.

First Contentful paint

First Meaningful Paint

Time to Interactive

All major e-commerce retailers have better scores than Shopify across all metrics.

One heavily optimized metric is first contentful paint, which is 90% faster than all Shopify stores for Amazon, Walmart and Ebay.

The three e-commerce behemoths took 2.6s, 2.5s, and 2.4s to display the first bit of content. That's much faster than the 4.4s for the average Shopify store.

First contentful paint is an especially important metric to optimize as it tells the user that the page is indeed loading. After this first snippet of content, loading indicators or skeleton content will improve perceived load times.

8. Animated Content

Animated content with GIFs are huge! Only 8% of shops use animated content, but the ones that do can save an average of 1mb by converting GIFs to WebP or by using more lightweight video formats. On average, stores with animated content can save 26% by converting GIFs to WebP.

7. Unminified CSS

Minification is one of the main methods to reduce bandwidth load times and bandwidth. Shopify does a good job with minification, as 66% of stores already have minified CSS.

The rest of the stores can save a median of 5.7KB by minifying their CSS. Shopify supports using liquid asset tags to minify your javascript and CSS assets.

6. Unminified Javascript

Minifying javascript reduces payload sizes and script parse time. Top Shopify stores have a median of 12KB of unminified javascript, with a 75 percentile of 40KB. This is slightly worse than the average unminified CSS sizes that we've seen.

5. Unused CSS

96% of Shopify stores have unused CSS, with a median of 88.6kb of potential savings. Make sure unused CSS files are removed from your script tags.

4. Responsive Images

If a desktop sized image is shown on a mobile device, the user is downloading more image data than they need. As a result, their cell plans are gobbled up.

Shops can serve different image sizes to each device to reduce bandwidth on mobile devices.

Fortunately, 38.6% of stores have newer themes that serve responsive images. The other 71.4% of shops can save 211kb by loading appropriately sized images for each screen resolution.

3. Next-gen image formats

Stores can save a median of 283kb using image formats with superior image compression like WebP. Facebook experienced 25-35% file size savings for JPEGs, and 80% savings for PNGs after switching to WebP.

The WebP file format is supported in Chrome and Opera and provides better lossy and lossless compression for images on the web.

Although not all browsers support this, older browsers can use other formats like JPEG 2000 and JPEG XR or fallback to PNG or JPEG.

2. Offscreen Images

Offscreen images are images below the fold, which users don't see until they scroll down. This is the largest source of wasted resources downloaded, accounting for a median of 819kb.

Websites can save bandwidth by only loading downloading above the fold images during the initial request, and below the fold images when the user scrolls down.

1. Render Blocking Resources

Render blocking resources are CSS and javascript assets that block the loading of the web page. The browser executes stylesheets, synchronous scripts and imports in the head tag before rendering any HTML content.

The average Shopify store can shave 1230ms off rendering times by removing or deferring render blocking resources.