Shopify Speed Optimization

Shopify Partner
14 0 2

Hey, 

 

I'm a Front end developer and I'm very curious if there is more technique to optimize shopify store loading speed

 

Techniques I already Know:

 

Minify JS and CSS

Compress Image

Bundle JS and CSS in one file

Lazy loading

Remove uninstalled Shopify app injected file

Update Shopify theme

Preload Web Fonts, CSS and JS

Add Google Tag Manager

 

I'm so excited to learn new web performance techniques for shopify stores

 

 

 

 

 

 

0 Likes
Shopify Partner
1346 22 208

Hey there,

 

I am not Karl or Jason but here are my 2 cents, maybe I can help.

Your list is solid, good things in there.

 

I try to avoid large CSS and JS bundles and prefer progressive rendering: https://jakearchibald.com/2016/link-in-body/

  <link rel="stylesheet" href="/article.css">
  <main>…</main>

  <link rel="stylesheet" href="/comment.css">
  <section class="comments">…</section>

  <link rel="stylesheet" href="/about-me.css">
  <section class="about-me">…</section>

Don't limit the preload to fonts, CSS and JS.

Especially on product pages it makes a good difference to also preload the featured product image

 

Google Tag Manager is not always your friend.

Usually this is loaded async as it needs to run relatively fast for tracking purposes.

Async execute immediately once they finish downloading, this does not ensure that the HTML document is done being parsed.

GTM injected scripts may render block even if gtm.js is async.

- as a side note do keep an eye on what is added to GTM. At some point we've found 3 different versions on jQuery in there added by the marketing guys.

 

Compress images and use responsive images to deliver appropriate image sizes based on the screen resolution

<picture> is my fave here and Shopify img_url filters are great with it.

WebP from time to time can be used when opacity is needed, it doesn't play nice with Shopify but really good quality and size make this worth it.

 

And of course a big part of an optimization process is testing things out.

My tool of choice is https://www.webpagetest.org/

 

Hope it helps

https://sections.design tips, tricks & Shopify sections
2 Likes
Shopify Partner
14 0 2

Hey, 

 

Thank you for your help and also for your article about preloading and self-hosting web font . for splitting CSS files may cause an increase in the number of requests and for my javascript, all are loaded async and I just want to review my Step-by-Step guide about speed optimization for shopify which I demonstrate all things I knew about optimization and which I mentioned your web font technique . All the things I mentioned are tested and have a great impact. I want to know if there are another which can be added 

 

Thanks 

0 Likes
Shopify Partner
1346 22 208

Hey,

 

Had a look over your article.

Done right, this is a good step by step approach.

 

Looking forward for more opinions.

Nice work

https://sections.design tips, tricks & Shopify sections
1 Like
Shopify Partner
14 0 2

Thank you so much

 

Are there any other techniques missing in the guide?

 

Thanks Again,

Ilias

0 Likes
Excursionist
41 0 5

Hello!
There are several ways of optimizing Shopify Speed depending on the reasons.

  1. Unresponsive theme. Solution: make a website mobile responsive; update your current theme by changing its code; or create a custom theme from scratch.
  2. Too many apps. Solution: sort out unused apps and remove them from the store; optimize apps with useful functionality.
  3. The thumbnail image size. SolutionYou can make some changes to the Liquid code – just use the “srcset” attribute, and set different screen resolutions for images; use the Lazy Load technique which will load images only as soon as each of them appears in the viewport.

Here you may find more tips on how to optimize a Shopify website.

1 Like
Tourist
3 0 0

There are several reasons why your website can load slowly. Let me clarify them:

 

#1 Too many Shopify apps installed. Solutions:

  • Run an audit of all the installed apps and sort them. Probably, you’ll find that some applications aren’t so necessary. So, you can carefully remove them from the store. To do this right, learn thoroughly support documentation and uninstall instructions.
  • As for the applications which you find useful and necessary for the website – you can optimize them by merging all the app’s stylesheets into one single file. 

#2 Utilizing slow, unresponsive theme. Solutions:

  • Look for any theme updates from its provider and install them to your store.
  • When choosing a theme for the store, make sure it’s responsive. It makes tons of sense since nowadays around 60% of traffic comes from mobile devices, and customers want to get the best mobile shopping experience possible. 

Here is a detailed list of reasons and their solutions - https://wholesalenfljersey.biz/ecommerce/how-to-optimize-shopify-store-for-high-sales/

0 Likes