How to improve your Shopify store Speed & Performance

[herve76]

We all know Shopify is currently the best ecommerce platform on the market. Nonetheless Shopify hosted stores is still lacking performance.

To make my case, I made this little study.

On one side, I built this very basic Shopify store…

 

https://gridsome.myshopify.com/

…using this Simple theme.

 

Here are the Lighthouse Google scores for the simplest Shopify store:

 

 

Not bad but the Shopify CDN calls are still the main reason for this slow website load. 

Because of this, it is very difficult to reach a Lighthouse performance score close to 100/100.

On the other side, I built and deployed this not so simple Gridsome powered Shopify store.

 

https://gridsomify.com

It features:

• Top Scores on Google Lighthouse!
• Full SSR (Server Side Redenring) Static Site
• Progressive Web App (PWA) with “Add to Home Screen” button
• Connected to Shopify backend
• Home Page showing Featured Products
• Product Search
• Product Page
• Collection Search
• All Collections Page
• TailwindCSS with PurgeCSS to remove unused css
• SEO optimized
• Sitemap

Here are the Lighthouse scores for this headless ecommerce store:

This study shows if you want to build a fast and performant frontend for your Shopify store, you will need to lean toward Headless eCommerce.

This is the difference between driving a Bugatti versus a BMW.

 

 

Building a Shopify Headless store has never been easier.

Gridsome offers the best solution for a Headless eCommerce store powered by a Shopify backend.

Gridsome is Fast by default.

We Live and Breathe Headless Commerce. Feel free to ask me any questions on how to improve the speed and performance of your Shopify store.

I am an expert in headless ecommerce please feel free to ask me any questions.

[jasonavada]

Hi herver76

Thanks for your guide and example, very interesting!

With its great tools, Shopify offers a great all-in-one platform for anyone to create a stunning online store. Your business has a shiny theme, amazing products, customizable apps to manage everything. But surprisingly, the store’s site keeps getting slower and slower after each new feature; this can make visitors leave the store before purchasing anything. So we created a checklist on Shopify speed optimization. You can read the article to learn more!

[herve76]

Thank you Jason for your comment. 

Do you have an example of a Shopify theme and store reaching more than 92/100 on Google Lighthouse's performance score?

[TwoColors]

You forget you can also hide slow page loading behind some fancy animation.

I know it doesn't solve the issue, but definitely clever work-around to keep customers on the store

You can use this for example:

https://apps.shopify.com/preloader

[davidkean]

Hi herve76,

I have built a theme that is able to get score 92 (mobile) and 97 (desktop) on Google Pagespeed Insights. You can check the testing result here. And I have also added the Progressive Web App in my theme. You don't need to pay for any apps to get this feature. You can check more details at my website.

Any feedback will be appreciated.

Thanks!

[herve76]

Hi @davidkean,

After verification, yes indeed, you were able to develop a Shopify theme with a performance score higher than 90.

That is by far the best performing theme I have seen for Shopify, but it is still less performant than a headless Shopify store.

Headless stores easily reach 99/100 or even the perfect score of 100/100.

[davidkean]

Hi @herve76 ,

Thank you so much for your reply.

I run some tests of the Headless Shopify themes on the Shopify theme store. This is the testing result of Narrative https://developers.google.com/speed/pagespeed/insights/?hl=en&url=https%3A%2F%2Fnarrative-theme-warm.... This demo is not also included the 3rd apps such as reviews, and the menu is a simple menu, not a mega menu ( a mega menu loads much HTML than a simple menu ). In the testing result, the mobile score is 82 to 86, sometimes 90. For the desktop score, I think 97 or 99 is the same level. So you should focus on the mobile score. My theme is tested with 3rd apps such as Shopify reviews and lots of other features.

I also installed other fast Shopify themes such as Debut, Brooklyn, Minimal,... on my demo store, and test the page speed with 3rd apps like my theme. In the final result, my theme got the highest score on mobile. You can do the test these themes by yourself. We need to put them in same environment to get the exact testing result.

[herve76]

Hi @davidkean,

 https://narrative-theme-warm.myshopify.com/ is not a headless Shopify store.

[davidkean]

Hi @herve76 ,

Could you show me the testing result of the headless Shopify theme? That will be awesome so that I can improve my theme. Thanks!

[herve76]

@davidkean yes of course here it is https://developers.google.com/speed/pagespeed/insights/?hl=en&url=https%3A%2F%2Fgridsome-shopify.net...

[davidkean]

Hi @herve76 

Thank you so much for the testing result.

I checked the site https://gridsome-shopify.netlify.app . And I see the core Shopify Javascripts have been ignored in this site. That is not correct. A Shopify site can not work without core Javascripts, all tracking features will not work. The other Javascripts from installed Shopify apps on the store will not be rendered so the apps will not work. The core Javascript is rendered by the "content_for_header" variable in the Liquid code, you can reach more details about this variable at https://shopify.dev/docs/themes/files/theme-liquid, and the core Javascript will be rendered like the following screenshot https://prnt.sc/ttzhh2 .

So I think we should not ignore the core Javascript to get a high score on Pagespeed, that does not make sense.

[herve76]

Hi @davidkean you just discovered what is a Headless Shopify store.

You don't need the core Shopify Javascripts with Headless sites, you simply use the Shopify Store API to connect to your Shopify backend.

This gives you full freedom of development for your store front-end.

[Dixor]

I am very exited to see that you were able to dev this cool theme. I tested it and indeed the score is just kill all other themes even premium on shopify store.

@herve76 Headless theme is a bullshit. You came to the world of Shopify to get all the features and not develop them yourself, such as the admin panel, analytics, payment gateway, the ability to install additional applications. etc. And now, for the sake of 7 points of mobile speed, you deprive your client of installing applications and tracking the success of advertising campaigns. To me this is a stupid decision.

I will never advices to my clients to build headless websites, i think this technic will die like AMP.

@davidkean 

I recommended to my client your theme and he bought it.

But he drive crazy to use your blocks with 100+ custom settings for styles.

He has need 15+ blocks and there is no way to duplicate blocks with the same styles and only change styles... 

well i know we can do it with json, but ... this is not Client's way.

btw, why you dont add your theme to shopify store?

[chandrasekhar]

Progressive web apps are designed to deliver native mobile apps such as mobile device performance. Installing the Shopify PWA app will transform your ordinary website into a good experience, which looks and behaves just like the original app. It also increases the speed of your store

[ilamsae3]

I also want to improve my shopify store. I'm providing home extension and improvement service on my shopify website. Can you help me regrading this?

[SEOAnt-Zoey]

Hi, I’m excited to participate in this discussion.

However, it’s impossible for a well-established website not to use third-party Shopify apps.

The best way to improve your site’s speed is to have a professional help you optimize the website or use a Shopify app with speed enhancement features.

Google now monitors website speed very strictly. Some experts may use cheating methods to significantly improve your site's speed, but if Google detects this, your website may face penalties, such as your products being removed from Google Merchant Center. Using methods that comply with Google’s policies to speed up your website is a highly technical and time-consuming process, and it can be quite expensive.

That’s why choosing a Shopify app with speed enhancement features might be a better option—you won’t have to worry about violating Google’s rules, and it’s more cost-effective. I recommend SEOAnt - AI SEO Optimizer.

Here are the reasons:

1. All speed enhancement features comply with Google’s guidelines. If an app doesn’t follow the rules, Shopify will remove it from the app store.
2. SEOAnt ‑ AI SEO Optimizer offers comprehensive speed enhancement features:
   • Image Optimization: For most websites, images are usually the last to load. Losslessly compressing page images can reduce page load times.
   • Site Acceleration: When users visit the site, this feature restricts the loading of third-party resources and the execution of unnecessary programs. It prioritizes loading your site’s resources, saving time spent loading third-party resources.
   • Lazy Loading: Preloads and renders potential target pages before the user’s anticipated actions, significantly reducing page transition delay and perceived wait time.
   • Instant Page: The page is preloaded when the user hovers over a link. When a user hovers for 65 milliseconds, there’s a 50% chance they’ll click the link. At this point, instant.page starts preloading, and the page takes an average of 300 milliseconds to preload.
   • AMP: AMP (Accelerated Mobile Pages) is an open-source framework launched by Google to help web content load quickly, especially on mobile devices.

Google has repeatedly emphasized that fast-loading websites not only provide a better user experience but are also more likely to rank higher in search results.

A study by Google and SOASTA found that increasing page load time from 1 second to 5 seconds increases the likelihood of users leaving by 90%. For every additional second of load time, conversion rates drop by an average of 20%. Another finding is that the bounce rate of pages with load times exceeding 3 seconds can increase by 32%.

If you’re interested in trying SEOAnt ‑ AI SEO Optimizer, please click this link to install. On the pricing page, enter the code “SEOAnt-AI SEO40%OFF” to enjoy a 40% OFF on all plans, valid indefinitely.

Wishing you prosperous business!