Product page speed - pause before some product page images load

Highlighted
New Member
1 0 0

We're having some challenges with page load times for product pages. Google Search Console has flagged our product pages as having LCP longer than 4s. We’ve looked at some of the common culprits: image sizes, done an audit of extraneous apps… but haven’t been able to speed up product pages.

 

I’ve been looking for anything that stands out as elements load in the waterfall in Chrome’s developer tools. Thought this might be a good way to identify elements that are taking extraneous time to load or even to queue. Here’s an example for this page

https://donegood.co/products/raw-pequi-hair-oil

 

ss2.jpg

 

The two elements I’ve circled are product images. I'm looking for any insight into what might cause a ~400ms pause between two product images loading and how we might address it.

Any additional suggestions for how we might speed up product page load time would also be most appreciated!

 

Todd

0 Likes
Highlighted
Shopify Partner
79 9 50

HI!

1. I don't think the main product image needs to be lazloaded. If you don't want to remove the lazyloading I recommend you implement pre-loading for the first image in the carousel.

2. Removing all render blocking resources will reduce LCP. You still have two css files that are render blocking, by making those non render blocking you  reduce the time it takes to start loading the image.

3. Replace slick carousel with a more lightweight carousel. I think glide js is cool, its half the size of slick. Keep the js separate from the main theme js and maybe put it above all the other js so that it will start being loaded sooner(but make sure its async)

4. Preload the first image of the slide.

5. Compress the images as much as your willing to. Shopify already implements WEBP and compresses images a bit, but they can usually always be compressed more then what shopify does without much noticeable loss in quality.

6. Implement lazy loading for those images in the "TEADORA'S IMPACT" section,  they distract from loading more important things.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes
0 Likes
Highlighted
Shopify Partner
218 4 16

Hello
Welcome to the Shopify Community!

This is Syed Mustafa a professional Shopify Developer. As I'm sure you well know, page speed has become a factor for ranking in the search engines. That's why if you're investing lots of time and money into getting the rankings you deserve, you shouldn't be blowing it by having a slow website.

Longer load times have also been shown to negatively affect conversions.

“My Aim” is to optimize the website and get the best possible results. It’s helpful to the visitor who visits on your website and spends much time without annoyed. I've gone through your website speed details and the reason behind why the website is slow is that there are lots of unused code of Javascript and CSS and also lots of unoptimized images as well that's why your website loading speed is low and Y speed score is also too much low and slow speed means that you are losing your potential customers and profit so it's a work that can be done by custom coding and I am professionally able to do this for you.

Drop your reply at Syedmustafanadeem99@gmail.com and let's start this project as soon as possible.

Awaiting Response,
speedissue.png
,

If helpful then please Like and Accept Solution.
Do you need custom changes on the store or want a complete speed optimization? Hire me.
Need a dropshipping expert or wants to alive your dead dropshipping store?
Feel free to contact me at Syedmustafanadeem99@gmail.com
0 Likes