How to improve your Shopify store Speed & Performance

herve76
Shopify Partner
14 0 3

To make my case, I made this little study.

0_mE1-P7z3PeZ1ptOf.png

0_1_D_ph21R-dw8Qt-.png

0_GMhfLlMokstGmEhq.png

0_m_hyrXJ_rnue8euQ.png

0_Df6ttbh8d4fqno2z.png

0_nQEzOK-K3jy55lbF.png

0_GTL-i0fy_u7XPH3e.png

https://gridsomify.com

 

  • 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

0_c46cJJWWXCX2bSZR.png

0_PxUlKfOd0DpPqN08.jpeg

Building a Shopify Headless store has never been easier.

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

Replies 14 (14)

jasonavada
Shopify Partner
333 11 42

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!

 

I'm Jason Dao, Manager of Research & Development Department at Avada Ecommerce.
herve76
Shopify Partner
14 0 3

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
Shopify Partner
78 0 23

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

Maciej Tokarczyk
davidkean
Shopify Partner
50 1 15

Hi 

David Kean
CoFounder at Boostheme team
https://boostheme.com
herve76
Shopify Partner
14 0 3

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
Shopify Partner
50 1 15

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.

David Kean
CoFounder at Boostheme team
https://boostheme.com
herve76
Shopify Partner
14 0 3

Hi @davidkean,

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

davidkean
Shopify Partner
50 1 15

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!

David Kean
CoFounder at Boostheme team
https://boostheme.com
davidkean
Shopify Partner
50 1 15

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.

David Kean
CoFounder at Boostheme team
https://boostheme.com
herve76
Shopify Partner
14 0 3

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
Shopify Partner
30 3 9

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
Excursionist
62 1 6

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
New Member
5 0 0

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?