Slow Product Page Loading (Please help :)

Solved
rsjmiller
Tourist
11 3 0

Sorry to be that annoying product pages are loading slow guy but all of the sudden mine are. I've installed and uninstalled a few apps (ugh) which are probably part of the problem but I can't seem to find out why/how to fix it. Any help would be MOST appreciated!!! 

 

08left.com - is the site. 

 

Thanks! 

 

Ryan

0 Likes
Alex_Lam
Shopify Partner
87 29 24

Hey Ryan!

 

I ran through your product pages, it looks like the problem is with your liquid. There's some inefficient code in there causing your server load times to be super high.

 

There's a large block of JS being loaded 48 times in your code. That indicates to me there's a loop in your product page that's duplicating this code for no reason, and lagging your page as a result. The code being loaded looks like the following (this is just the first couple lines):

 

var Shopify = Shopify || {};
Shopify.optionsMap = {};
Shopify.updateOptionsInSelector = function(selectorIndex) {
    
  switch (selectorIndex) {
    case 0:
      var key = 'root';
      var selector = jQuery('.single-option-selector:eq(0)');
      break;
    case 1:
      var key = jQuery('.single-option-selector:eq(0)').val();
      var selector = jQuery('.single-option-selector:eq(1)');
      break;
    case 2:
      var key = jQuery('.single-option-selector:eq(0)').val();  
      key += ' / ' + jQuery('.single-option-selector:eq(1)').val();
      var selector = jQuery('.single-option-selector:eq(2)');
  }
...

I'd recommend looking for whatever's outputting this code in your product pages and removing that. If your product pages previously weren't this slow, rolling back your product templates like in this guide may work if you're not adept at editing code: https://shopify.dev/tutorials/customize-theme-troubleshooting-roll-back-to-older-version-of-theme

 

Hope that helps!

Is your store fast enough? Compare your store's speed against hundreds of others for free with our benchmarker - https://www.rvere.com/
0 Likes
rsjmiller
Tourist
11 3 0

Thanks so much Alex! Appreciate it. Any ideas as to how to find what is outputting that code? The last revision to go back to is April 24 which makes me a little nervous - I don't think it's been slow that long. 

0 Likes
Alex_Lam
Shopify Partner
87 29 24

Look for the 'include' keyword in your product templates. It looks like the code is meant to do something with picking options or changing variants on the page. If that app was called ABC, looking for something like {% include “abc-script” %} may help. This code may also be in your theme.liquid, but less likely. You could try cloning your current live theme, and edit/preview that to avoid damaging your actual store!

Is your store fast enough? Compare your store's speed against hundreds of others for free with our benchmarker - https://www.rvere.com/
0 Likes
rsjmiller
Tourist
11 3 0

Alex, I sincerely appreciate the help. Is the page still doing it? I've removed a ton of apps and updated the theme but it's still really slow on some of the product pages. Faster on others... 

0 Likes
rsjmiller
Tourist
11 3 0

Hey Alex, 

 

I jus ran an experiment. 

 

I've created two identical products. One loads instantly and the other takes a painful amount of time. 

 

One has no inventory - it's sold out and thus no variants. 

https://08left.com/products/ams-tower-test

 

The other doesn't keep track of inventory. 

https://08left.com/products/ams-amsterdam-tower?variant=20313448284248

 

its got variants. 

 

So, it seems my variants are killing me? 

 

Does that help for the other products that are taking so long to load? 

0 Likes
rsjmiller
Tourist
11 3 0

This is an accepted solution.

Okay, I found the culprit. Some old code from 2017 to remove variants that were not available - removed the code and it's blazing now. Thanks Alex for directing me in the right spots. 

0 Likes
imrankhalid
New Member
1 0 0

need help ! 

my  product page has app for product option which taking too much time  please anyone cane help me how to reduce this time . 

0 Likes
jackscookery
New Member
2 0 0

I have a similar situation of slow load time, but only 2 pages are impacted (google analytics says these 2 pages are significantly higher than the average of all pages):

This one takes approximately 135% longer than average: https://jackscookery.com/products/reusable-rattan-bread-proving-baskets

This one takes approximately 18% longer than average: https://jackscookery.com/products/4-colored-reusable-pastry-bags-and-6-nozzles

I'm not sure how to read the network data in developer tools and find the source of the problem. 

0 Likes
Mark_Webdev
New Member
2 0 0

Hey, 

I noticed a couple of errors in dev tools, regarding a lazy loading, it doesn't seem like you've added the correct class and data-src markup to the product pages images, if you open up the network tab in chrome and select the "img" button in the top grey bar area, this filters the network tab to only show images, this will help you see the problem you are having (to see all network elements just click the "all" button.

Is appears you are not lazy loading your product thumbnails as the cod eis missing from those as well

Also
You may have already done this, it if not it is always worth running your images through a minify service to compress and also remove unneeded meta info etc.
https://kraken.io/web-interface

Feel free to reply if yo want a bit more help, good luck!
Hope this helps

0 Likes