How can I fix the lazy loading issue on the Dawn Theme?

steve771
Tourist
3 0 1

Hello, I am getting a 4.5 second Largest Contentful Paint image was lazily loaded on my first banner image on my site. I have tried a couple of things to turn off lazy loading but nothing has worked, it is still being lazy loaded. How do I fix this on the Dawn Theme? Thanks,


Steve

Replies 4 (4)

oscprofessional
Shopify Partner
15846 2371 3074

@steve771 
Hello, Can You Please Share Your Store URL and Store Details I Will Check and Provide a Proper Solution Thanks

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
steve771
Tourist
3 0 1

Hello @oscprofessional, thanks, I think I have figured it out but I appreciate the offer to take a look. Cheers,

Steve

steve771
Tourist
3 0 1

Hello @haxxan23 thanks for this. I think I managed to figure this out by googling. Not sure why the Dawn or other themes lazy load such images when it clearly slows down your site by 5 seconds or more. Out of the box, shopify would appear slow which is not ideal either, most people, myself included, don't have the money to throw at someone to "speed-up" the site. I gave done most of my SEO and keywords which has helped but the whole shopify process touted on youtube seems so easy but still, after 12 months I have sold nothing lol! but I have learnt a lot. Thanks.

SEOKart
Trailblazer
168 4 23

Hello Steve771,

 

Thanks for reaching out!

 

Well, enabling and disabling the lazy loading feature on Shopify can be a little complex process, as there is not any effective tool or app available on Shopify for lazy loading.

 

So, you should consider doing this:

 

Identify all the LCP elements in your website’s HTML code, and inside the code that renders the LCP image add a setting to enable or disable lazyload, by doing the following:

 

  1. Add the loading=‘lazy’ to all the images
  2. Create a toggle to disable the attribute or disable lazy loading on certain images

 

Now, you can enable or disable this setting for specific LCP elements.

 

Hope it helps!

 

Leesha

SEOKart

https://apps.shopify.com/seokart