Does Supply theme have lazy loading built in?

[Joe220678]

Hello guys & gals,

We currently use Supply theme which we have done for a very long time. We are trying to improve the performance speed on our store www.sehome.co.uk

Can anyone inform me if 'Supply' theme has lazy loading feature built into the theme already or do we have to add it manually?

Thanks

Joe

[kazi]

Hello @Joe220678  

I have checked your store there is native lazyload i have included the screenshot from chrome

I have checked the speed in google page speed  https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.sehome.co.uk%2F&form_factor=mobile

There are issues need to be optimized

> Reduce unused JavaScript (Delete unwanted apps, compress, inline JS files)

> Eliminate render-blocking resources (Inline CSS files)

> Reduce unused CSS ( You can add Css files based on pages ex: if {% if template != "index" %} <link href="{{ 'style.css' | asset_url }}" rel="stylesheet" /> {% endif %}  this condition will load the css file in all pages except home)

> Serve images in next-gen formats (Convert the images to webp you will find many online tools)

> Properly size images (Mostly they are large images, resize them or add them smaller size via code)

> Defer offscreen images (Add lazyload to them)

This will improve page load time, scores. If you need help let me know. Thanks.

[Joe220678]

Thanks Kazi, The screenshot you sent is for our homepage. We use an external app for homepage design which puts lazy loading on the images.

My thoughts where that 'Supply' theme on product pages in NOT using lazy loading as per link below?

Matt Black 1 Gang 13A DP Ingot Switched Plug Socket - Black Trim – SE Home

Thanks

Joe

[kazi]

You can edit the product template and add loading="lazy" there

[Cedcommerce]

Hello @Joe220678, 

We have checked your store for the issue and found that the lazy load feature is already enabled in your Shopify store, hence, you need to work on the following issues to optimize your store speed:

1. Reduce unused JavaScript
2. Reduce the impact of third-party code
3. First Contentful Paint (3G)
4. Image elements do not have explicit width and height

If you are not familiar with these or theme codes then you should consider hiring a Shopify expert who can help you with this. 

image.png

Hope it was helpful. Let us know if you need any further help with this. 

All the best, 

CedCommerce

[AliReviews]

Hello @Joe220678 ,

We are AliReviews - All-in-one reviews solution for all businesses.

The 'Supply' theme in Shopify does not have a built-in lazy loading feature for images, you can add lazy loading functionality by using a third-party app or by manually adding lazy loading code to your theme's files. There are several lazy loading apps available in the Shopify App Store that you can use  are: Lazy Loading Images by Pixc, Lazy Image Loader by Nitro Apps, and Lazy Load by Panda Group, etc. 

Besides, we dived into your site and see your great products. However, we notice there are several things you may want to change to improve your design, site speed and boosts your sales:

1. Header:

- You should make your header sticky, this will allow people easily access to any categories that they want while scrolling through your page. 

- Your icons here quite unnecessary and make your store site not look professional. Consider to remove icons here to create a better visualization and also improve your store site speed.

2. Categories:

- Your section here can be listed in your header, this can reduce the unnecessary code and images files and improve your site speed.

- Or else, you can make all the title more visible, this texts color may hard to read for customers.

3. Products section:

- These products on your home page can be more attractive by adding your prices here (maybe include promotion), the products title more visible and make your CTA more clickable.

- Make your products title, price and CTA buttons align together to create a better visualization.

- You can add a star rate next to your price so that people can have a comparison and build your brand trust, this can help you boost your sales a lot.

4. Testimonials:

Testimonials are not just about reviews, it plays a crucial part when it comes to shopping online, people tend to purchase more for products that have a lot of reviews, even they have bad reviews. Adding your testimonials by using a third-party apps is the easiest way, you can manage, import all your reviews and decide how it appear on your home page.

Hope these can help, don't be hesitate to contact us if you have any further questions, we'd love to help. Please hit the Like Button or mark this as Accepted Solution to let us know, it encourage us a lot.

Regards,

AliReviews team.