Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello all!
I'm wanting to lazy load my Debut Theme, mostly focusing on my homepage first.
I see there are many configurations to implement this function so I'm a little lost.
I see I have a file called lazysizes.js in my Assets folder. I may have added this years ago, or maybe it came with this theme?
I also see I have two snippets of code in my theme.liquid
- One on line 25 (within the <head>) which looks like this: <link rel="preload" href="{{ 'lazysizes.js' | asset_url }}" as="script">
- Another on line 153 (within the <head>) andit looks like tis: <script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
I watched a YouTube video on how to implement lazy loading and they pointed me to this article which says to add tis code: <script src="lazysizes.min.js" async=""></script> to the <head> of my theme.liquid.
I also installed a piece of code a while ago to show different-sized images for desktop and mobile. For example, on desktop, you see the desktop size version of my header image, but if you switch to mobile you'll see the mobile-sized version of that image, but I uploaded two separate images to my homepage editor. I have about 4 sections on my homepage displaying different images for both desktop and mobile but I guess all 8 images are loading slowing down my page speed.
Second, my product images show the second product image when you mouse over it, so both images are loading at the same time.
Here's my Google Page Speed showing the images that do not need to load:
My website is pinealvisionjewelry.com
Any help would be greatly appreciated!
You're almost there, you just need to edit the image elements so they don't load the image on page load, but instead on scroll (the lazysizes library will look for these elements then load the image at scroll).
Usually you can just swap out the src attribute for data-src. Only do this for image below the fold.
You only need to load 1 lazysizes library, it looks like you're loading a bunch, which just means extra scripts and slower loading site. I would try deleting all the extra lazy sizes libraries so you just have 1 (do on a backup theme of course).
Those 2 things might take some experimenting but sounds like you mostly have it set up.
If you need a guide you can reference ours (created by team of Shopify optimization specialists) - https://speedboostr.com/shopify-lazy-loading
My apologies, I didn't see your reply before.
When you say I'm loading a bunch of lazysizes libraries what do you mean? Should I delete the snippets of code from line 25 and line 153 in my theme.liquid, and only keep the lazysizes.js in my Assets folder?
Much appreciated.
@Brittany_Witt it's hard to say, you'd have to experiment but from the screenshot it looks like there is duplicate code in the lazysizes.js file. I would follow that guide I shared and start with a fresh lazysizes library.
You need to keep the command in theme.liquid so that it loads the file.
Am i missing something? i need to turn lazy load off because its apprenty already on in my debut theme? any help in trying to turn it off?
@Brittany_Witt
Hello,
Welcome to the Shopify Community.
I can easily solve your problem by implementing some code in img attribute.
{%- assign preview_image = product.featured_media.preview_image -%}
{%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ preview_image.aspect_ratio }}"
data-sizes="auto"
data-image>
Thank you for this snippet of code.
Now, considering all the lazysizes code I already have in my theme (see my original post), where should I include this piece of code you just shared with me? And should I remove any of the current lazysizes code I already have in my theme?
Thanks
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024