Slow speed on pages where products are embedded

[FlurpyHooves]

Hi,

I'm working on trying to increase the speed for this Shopify store. I'm new-ish to the company, which has been around for some time and trying to work my way backwards and figure out what may be causing some of the slow down on some of the pages - and hoping someone here with more experience may be able to to tell me if I'm looking in the right direction.

Some of the slowest pages I'm seeing are ones like this: https://galaxycon.com/blogs/07/feb-20-batman-animated-series

What is really confusing me, is then when I try tools like the Shopify Analyzer, it gives me an A across the board - but it's clearly got something going on.

When I use Google's Page Speed Insights / Lighthouse, it tells me there is an absolutely massive network payload going on. Something like, 325,000 KiB! When I look into this, what I'm seeing is that it *appears* to be massive sizes of variant images in their product images - even though they have Lazy Loading turned on?

But this only seems to be the case when this happens on a blog post with products that are embedded. When I go directly to product pages and test again, for example, https://galaxycon.com/collections/jsa-certified-autographs/Animation, I'm not seeing that same massive payload.

I'm TRYING to narrow down exactly what the major slow down here is for them, but I just seem to get conflicting answers everywhere I go. Is there anyone who can steer me in the right place to look? I'd appreciate it!

[NahinInventoryH]

I checked for the files responsible for slow loading. It seems you have large image files in the page https://galaxycon.com/blogs/07/feb-20-batman-animated-series 

You can use Chrome devtools to check for the files responsibe for big network transfers. You have lazy loading of the images working on the website, but the images visible on initial page load may have big file size.

Here is a screenshot from my Chrome Devtools:

[FlurpyHooves]

Those are product variants, however? They aren't actually visible on the page itself, I'm confused about why they load on this page before I click into the product itself.

And I'm not getting the same type of issues on pages like this one - https://galaxycon.com/collections/jsa-certified-autographs/Animation

[oreoorbitz]

So first thing to note, is that there is no such thing as a universal standard for "Fast".

Google pagespeed insight's has certain metrics it uses to measure how a user experiences the loading process of a site  and creates a score based off these metrics.

SpeedBoostr's analysis tool doesn't use the same metrics, as their opinion is that alot of standards of google's are too hard to reasonably achieve for most shopify sites.

Now as for your actual issue, I took a quick look at your example page:

So, I don't the name of the section I will be referring to, but it has a class list of "sc-pZopv bjKdkd pf-d293036d" so I will use that to refer to it.

So sc-pZopv bjKdkd pf-d293036d basically has a grid of images. Each image is reasonably sized.

https://cdn.shopify.com/s/files/1/0275/9209/7837/products/Duo-Video-Chats_98335215-d9e1-46b7-84f8-a0...

For instance is a reasonable 540x540 intrinsically .

HOWEVER, if you look at the parent element of that image sc-qPjXN eYzxUD pf-8042c8c4 pf-r pf-r-eh, then go through that div and look deeply at all it's children, You'll find  a div with 5data-pf-type="ProductImageList".

Now that DIV has 5 child divs, and each div has an image within it.

And those images are not reasonably sized.

https://cdn.shopify.com/s/files/1/0275/9209/7837/products/62-Glover-Batman-16x20.jpg?v=1610752236  weighs 885kb for instance, that's 1mb. 

So even if the image is not visible , it's still being loaded by this script https://cdn.pagefly.io/pagefly/2.16.2/core/helper.js?t=20210119100157 

The exact reason for all this behavior, I'll leave to you to find out, since I'm not being paid, hopefully this serves as a starting to point to fix the issue.

Since the images are being loaded by pagefly, and the weird class names, I assume this site built using the pagefly page builder.  I would recommend you contact  @PageFly-Victor  since they are always posting on these forums on how their app is fast and ask them why there app results in such wasteful page size.

[FlurpyHooves]

So for one, thank you.

You're going a long way in confirming what I strongly suspect is the issue. I've been working on this for just two weeks, and yes, the owners have been using Pagefly and I've been struggling to work with cleaning some of it up.

[JoesIdeas]

@FlurpyHooves I took a look and saw plenty of low hanging fruit to help you optimize this for your client.

I also ran it through the Shopify Analyzer and you're right it's not picking up, crazy that's quite rare (my team built this tool), but with a visual test the site was loading for ever, and cross checking with webpagetest.org, what I'm thinking is there are some problem scripts that are preventing analysis tools from crawling the page. You can see running it through WPT (https://www.webpagetest.org/result/210120_Di7W_7903b8df896094a8dafe0af52c962a8a/) I'm still waiting 5 minutes for it to run:

I like WPT for testing load speeds, and also it gives a really nice waterfall view (similar to what Nahin showed, but I think WPT is more user friendly if you're not familiar working in the console).

Quick Advice
I see you're loading hundreds of images, and some of them gigantic (this one is 1.9MB and 5000px: https://cdn.shopify.com/s/files/1/0275/9209/7837/products/41-Batman-11x17.jpg?v=1610652721).

I would start there.

1) You can code the theme to load a max size image, my recommendation is 900px on mobile and 1500px on desktop for dimensions, but if you know how to use the html image attribute srcset then you can set different sizes depending on the screen viewing, even better for getting the proper sized images.

2) If you're not compressing the images, do that, it reduces the file weight without a loss in resolution, by removing excess meta data and algorithms to compress color usage. Here's how: https://speedboostr.com/how-to-compress-images-on-shopify.

3) Implement lazy loading so that all those images aren't loading during the initial page load. Here's how to do that: https://speedboostr.com/shopify-lazy-loading.

If you need help with anything, or want one of our Shopify optimization experts to sift through the code and give his advice, reach out to speedboostr.com/contact. If you have the time, I would take make an attempt at those 3 points I mentioned first, then have us come in to give the eagle eye in there. You'll get significant performance gain with that.

[FlurpyHooves]

Thanks! It is crazy that the analyzer isn't picking up on the load speed? I am also suspecting the images - so I'm looking to see if we can grab an optimizer to do that in bulk for us since I know there are so many. I have scanned a LOT of the pages now and I'm confident this is likely the largest culprit.

I'll definitely keep hammering away at the rest of the advice you've given here; and if I need more tips I'll look you up. Thanks so much!!!

[JoesIdeas · Accepted solution]

@FlurpyHooves  you're welcome, happy to help.

Yes it usually just kicks back a failed test when there are weird load problems. For that reason I'm wondering if there may be some bad scripts causing problems, but I ya I would focus on that low hanging fruit first because they'll guarantee improve the performance either way, then reassess.