Slow store due to image sizing for mobile

[rutadrungilaite]

Hello,

The mobile version of my product page is showing a very low speed score on (32) and I think it is mainly driven by images not being resized properly for mobile view- screenshots below.

I have tried enabling the max image height for mobile through the Theme Slider plug in I have added and tried different image heights for mobile, but that only slowed down the product page further.

How can I improve my product page speed? I don't have the technical knowledge, so please explain in simple language.

My site: https://atwistofdate.co.uk/ 

Product page: https://atwistofdate.co.uk/products/cocktail-making-class 

Thanks a lot,

Ruta

[BananaMoon]

Hello Ruta,

Well to start with you can look at image sizes, the first image I downloaded on your site is 400kb, which is quite fat. It should sit around 50-100kb if the first image of your eshop.

Then, your eshop is quite fast, images are just too big overall. You can have a look at some tips to make images for web/mobile, there are tons of tutorials over the web. 

You can also use the built-in feature of Shopify to transform jpg images into webp, a very powerful feature.

Have a nice day,

[rutadrungilaite]

Hello,

Thanks a lot for your reply.

I will look to reduce the size of the images. Do I need different sizes for desktop and mobile or just one smaller size for both?

Thanks,

Ruta

[BananaMoon]

Hello again,

Well if your Shopify theme is well made it will do most of the work automatically (resize for smartphones so on). You just need to compress images to 72/92 DPI before.

After depends what you want to do, for social maybe you'll want to transform images vertically? That's another story I guess.

[rutadrungilaite]

Thank you, I will try that.

[MS_WEB_DESIGNER]

Hi @rutadrungilaite 

This is Alex from MS Web Designer. I will be happy to help you with your store speed.

Since product pages contain higher quality photos and more images than other static pages, images not loading on product pages is a prevalent problem on both desktop and mobile platforms.

As you mentioned, you are using some plugins, and plugins are frequently to blame for website slowdowns.

I will recommend you to add the lazysizes.js library to your theme assets folder, if you haven't already. Also, There are a variety of performance optimization techniques for loading images as the user scrolls down the page.

Thanks

Alex

[rutadrungilaite]

Hello Alex,

Thank you for your reply.

I have hand coded image slider added into my store, purchased from a certified Shopify partner.

This code has lazyload inbuilt in it. The images are automatically resized for mobile and I can see that my images are being transformed from jpg to webp format on my store already. However, the speed score of my mobile product page is still showing as extremely low.

Would you be able to advise what else can I do specifically? I haven't been able to fix the issue yet.

Thanks,

Ruta

[Made_by_Lanzi]

Hi @rutadrungilaite, thank you for visiting the Shopify Forum

Speed is critical for a good customer experience & to get more conversions. It also helps with Google Ranking. If you look at it from the Shopify dashboard you'd want a score at least over 50.Some tips to increase speed without getting into code include:

• Reducing image size (you can use tinypng.com before uploading)
• not using Page Builders (like Shogun)
• Deleting unnecessary apps

To make it crazy fast we do need to get into code: to defer and async JS and CSS, remove old app code, minify files, setup lazy loading and more. We offer seven days delivery and unlimited revisions. Clients routinely see 2x to 3x store increase. if we don't increase your speed we offer 100% Money back guaranteed. Please contact us at info@madebylanzi.com to request this service

Hoped it helped

Happy Sales,

~ Lanzi ~

PD: If this answer helped you please accept it