Solved

Shopify Analyzer from Speedboostr

BonzaDogTreats
Shopify Partner
94 1 16

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.

Accepted Solution (1)
oreoorbitz
Shopify Partner
242 29 129

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.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.

View solution in original post

Replies 7 (7)

oreoorbitz
Shopify Partner
242 29 129

Share your site's url. Most themes have lazyloading, but sometimes they miss things, sometimes the settings need to be adjusted, sometimes tools give ve false positives. 

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
BonzaDogTreats
Shopify Partner
94 1 16
oreoorbitz
Shopify Partner
242 29 129
So what s happening is that you have lazyloading enabled, but the place holder images are too big. They're being loaded at 300px. I recommend you reduce the size, or use a base64 blank image.
Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
BonzaDogTreats
Shopify Partner
94 1 16

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.

oreoorbitz
Shopify Partner
242 29 129

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.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
BonzaDogTreats
Shopify Partner
94 1 16

Thank you

PageFly-Richard
Shopify Partner
4164 935 1586

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.

RichardNguyen_0-1604289375554.png

 

RichardNguyen_1-1604289375551.png

 

  1. The biggest reason that makes your page run slowly is from JavaScript, CSS code… Please check your theme.liquid file and remove unused JavaScript
  2. Removes rendering blocking resources: Resources are blocking the first impression of the page. Consider delivering important JS / Inline Styles (CSS) and deferring any non-critical JS / styles. You can click to this field on report for more detail.
  3. Optimize your images and delayed loading of off-screen images: 

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.

RichardNguyen_2-1604289375529.png

 

And If you have images that go with .PNG file, you can convert them to .JPG or .JPEG files

  1. Besides, you should check both Mobile and Desktop devices in the report. On the desktop, we can see the problem might come from your server's initial response time. Keep the server responsive to the main document as all other requests depend on that timing.

RichardNguyen_3-1604289375533.png

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!

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.