Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024