How to improve your Shopify store Speed & Performance

herve76
Shopify Partner
11 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.

0 Likes
jasonavada
Shopify Partner
327 11 40

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
11 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?

 

0 Likes

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
Shopify Expert
0 Likes
davidkean
Shopify Partner
41 1 13

Hi 

David Kean
CoFounder at Boostheme team
https://boostheme.com
herve76
Shopify Partner
11 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
41 1 13

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
11 0 3

Hi @davidkean,

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

0 Likes
davidkean
Shopify Partner
41 1 13

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
0 Likes