Product page speed - pause before some product page images load

[toddlido]

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

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

[oreoorbitz]

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.