I saw this tool mentioned on another post, so thought I'd give it a go - everyone wants a quicker site, right?
I ran my home page through it on mobile , and it gave me 2 areas that could be improved.
One was to apply lazy loading to some images on my home page. I've had that same thing picked up by GTMetrix and the Google site speed test, and was surpised by it, because I was under the impression that Shopify had lazy loading coded. When I asked Shopify support about it, they confirmed that lazy loading is coded on my site.
So my question is, do I just ignore this, or is there something that can be done? I scored an F for lazy loading, so I think this is an area where I could maybe gain some speed, if it was possible.
Solved! Go to the solution
Thanks for responding. I'm not sure I understand what I need to do. The first image that is picked up is 337kb. That's comparable with my other product images. Can you explain what you mean please?
The last 2 images that are picked up are both in the footer and were added by Shopify so I feel I could go back and ask them to code those 2 correctly.
I appreciate your time in answering me, thank you.
This is an accepted solution.
1. lazyloading works by not loading images till they're visible.
2. You do this by placing the code to the final image somewhere, in most set ups, with a data-src attribute, like <img data-src="image_goes_here.jpg" >
3. You can have a placeholder image that is loaded naturally, that is placed in the src, <img src="place_holder_image.jpg" data-src="image_goes_here.jpg" >
4. when you the image comes into view, the placeholder is replaced with the real image in data-src
In your case, your placeholder image is 300px, so performance tools will say your not lazyloading your images, because the placeholder is too big and defeats the point of lazyloading.
Hi @BonzaDogTreats ,
I'm Richard - CRO Expert at PageFly Free Page Builder.
I just tested your website on both my Samsung and iPhone and PageSpeed Insights app. You can see the reason via its’ report HERE.
Consider partially loading hidden and off-screen images after all your important resources have been loaded to reduce interaction time.
If you want to optimize your images to help your page loading speed faster, you can use some of the image optimization tools like: ImageOptim, Shopify Online Image Resizer, tinypng.com or imagecompressor.com.
And If you have images that go with .PNG file, you can convert them to .JPG or .JPEG files
Finally, you can consider some tips to improve the speed page about How to Speed Up Website and Optimize Page Load Time To Win Sales In 2020.
By the way, I'm working on - PageFly. We are a Shopify page builder to customize your page, our app provides the Lazyload function and it's easy to use with a drag-and-drop system and less code needed. Here is a reference for you.
If you find my comment useful, you can like it. And let me know if you want further assistance.
Have a great day!