stop lazy loading in Spotlight

[Runner]

I am trying to get my site to stop lazy loading images as its slows down my store speed, but I can't find the code in the Spotlight theme I am using to fix that, nor do I know of any other way to stop the images from lazy loading. Any help would be appreciated.

[Dan-From-Ryviu]

Hi @Runner 

You can do that by finding and removing this part of code loading="lazy" or loading: 'lazy' from liquid files

[Runner]

Which liquid files would have those parts of the code? I can not find those parts of the code in my theme.liquid 

[Runner]

To clarify on my side, my store's theme, Spotlight, doesn't have the exact lines of loading="lazy" or loading: 'lazy' in any of its liquid files, so I don't know if it would be in another line of code that would stop the lazy loading for images? Or if it's part of a Javascript file?

[Dan-From-Ryviu]

Hi, you can see theme in listed file below:

• slideshow.liquid
• product-media.liquid
• product-media-gallery.liquid

[Runner]

Hello @Dan-From-Ryviu!

I appreciate the further guidance, I have found the code in those pages and have removed it, but I am not sure if that has exactly worked as, according to Google Lighthouse, the images are still being lazy loaded. Thoughts on this?

[Dan-From-Ryviu]

Which images? Could you share the link to your page? 

[Runner]

Yes, here's the link to my page: www.runnersgogear.com 

[Runner]

It would be the first few images, that I see are the problem.

[Mehran_Ali]

Try using this script and place it in your theme.liquid file

1. Log in to Your Shopify Admin:

   • Go to your Shopify admin dashboard.

2. Navigate to Themes:

   • In the sidebar, click on "Online Store" and then "Themes."

3. Access Theme Code:

   • Find the theme you want to edit, and click on the "Actions" button.
   • Select "Edit code" from the dropdown menu.

4. Locate the theme.liquid File:

   • In the code editor, look for the theme.liquid file. It is usually located in the "Layout" folder.

5. Edit the theme. liquid File:

   • Click on theme.liquid to open it and make your desired changes.
   • Don’t forget to save your changes after editing.

By following these steps, you can access and edit the theme.liquid file in your Shopify store.

<script>
$(document).ready(function() {
  // Remove the standard lazy loading attribute
  $('img[loading="lazy"]').each(function() {
    $(this).removeAttr('loading');
  });

  // Remove custom lazy loading attribute (e.g., data-lazy)
  $('img[data-lazy]').each(function() {
    $(this).removeAttr('data-lazy');
  });
});
</script>

  Note: make sure you check the attribute in the image tag for lazy load then replace that attribute in the script this will remove all lazy load attribute from the page