How to optimize my hero section loading speed

How to optimize my hero section loading speed

JBshop1
Shopify Partner
13 0 4

Hi, I'm developing my store's landing page. 

 

As it's a product landing page, I have several rich png images (around ~15) for the landing page which I believe increases time for loading and harms site quality. My images are around 300-500kb and I can't compromize any further quality since the product imags are so crucial. 

 

Now my question is, I believe Shopify, by default, applies lazy loading for images. 1) Is there a way that I can check whether it's working as expected? 2) I wonder if there is a way that I can prioritize to load the hero image than other images so that I can make sure users can get seamless experience while subsequent images may load on the back end as users are at the hero section. 

 

Thanks!

Reply 1 (1)

Jenny6
New Member
25 0 0

Hi @JBshop1

 

I find out this article which explains the way how to optimize hero section loading speed, you can take a look here:

https://www.corewebvitals.io/pagespeed/fix-slow-hero-images-core-web-vitals