Why are product images loading slowly on some devices?

[FTUndies]

Hi Shopify Community,

On some people's devices, our product images are taking a really long time to load. I recently used the app Crush.pic to compress our images and it hasn't seemed to help. We are currently using an app called 'Starapps Variant Image' so you can toggle between colours. However, I'm not sure if this is maybe the cause for slowing things down? Our website is firstthing.com.au

Would love some help please!

[oscprofessional]

@FTUndies ,

You need to work on the following points :

• Theme Upgrade if there is a scope and upgraded theme available
• Reduce JS Payload.
• Use Critical CSS.
• Replace GIFs With Static Images
• Reduce Large Image Sizes
• Migrate Tracking Codes To Google Tag Manager
• Compress Images
• Limit Third-Party JavaScript & Shopify Apps
• Preload Web Fonts. 
• I suggest limiting it to one and using a standard web font.

Theme Upgrade :

Its benefits include improved loading speeds, which can help with both user experience and store conversion rates, and search engine optimization. 

Refer to this blog : 

https://www.oscprofessionals.com/shopify/improve-your-shopify-stores-speed-performance-score-by-upgr...

How to Optimize Total Blocking Time :

After determining the Long Tasks and the code blocks and web page assets that are causing them, optimizing Total Blocking Time can be possible. To optimize the Code Blocks that busy the main thread longer than 50 MS, the methods below can be used.

• Reduce the Request Count of the Third-Party Scripts
• Reduce the Size of the Third-Party Scripts
• Minimize the Browser’s Main Thread Work
• Clean the Unused Javascript and CSS Codes
• Compress the Javascript and CSS Files
• Implement the Code Splitting for Javascript Assets

You can choose from several fonts for the text in your online store. To avoid downloading a new font to your customer's computer, you can use a system font.

How to avoid showing invisible text :

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers.

Remove unused CSS and unused JS:

• Check the assets folder of the theme and remove unused CSS and JS file
• Check and remove unused apps
• If your store has not installed any app you can comment {{ content_for_header }} code in the theme.liquid (not recommended if you don't have knowledge about the liquid)

By fixing these issues, your website speed score can definitely improve.

For more details please check the link below. 

https://www.oscprofessionals.com/blog/shopify-speed-optimization-guide/

If anything needs to be included or clarified then feel free to ask.  We will surely help you. 

Have a nice day!

[flareAI]

Hello @FTUndies,

I am Gina from flareAI app helping Shopify merchants get $5Million+ in sales from Google Search, on autopilot.

There could be several reasons why your Shopify store product images are taking a long time to load on some devices.

Here are a few potential causes.

1. Large image file size
Even if you have compressed your images, they may still be too large for some devices to handle quickly. Consider reducing the dimensions of the images, which can significantly reduce the file size without sacrificing quality.

2. App compatibility issues
It's possible that the "Starapps Variant Image" app may be causing some compatibility issues with your store's other apps or themes. Try disabling the app temporarily to see if it makes a difference in the loading time.

3. Server response time
If your server response time is slow, it could affect the loading speed of your store's images. You may need to contact your hosting provider to investigate the issue.

4. Optimize your images for web
When compressing your images, make sure to use the appropriate file format (e.g. JPEG for photographs, PNG for graphics) and reduce the image dimensions to the maximum size they will be displayed on your site. You can also use image optimization tools such as TinyPNG to further reduce the file size without losing quality.

5. Minimize HTTP requests
The more HTTP requests your site requires to load, the slower it will be. Try to minimize the number of images and scripts that need to be loaded on each page.

6. Use lazy loading
Lazy loading is a technique that defers the loading of images until they are actually needed. This can help reduce the initial load time of your site and improve the user experience. There are several lazy loading plugins available for Shopify, such as Lazy Loader or Lazy Image.

7. Optimize your site's code
If your site's code is poorly optimized, it can slow down the loading time of your images. Consider using a tool like Google PageSpeed Insights to analyze your site's performance and identify any areas that need improvement.

I recommend reviewing each of these potential causes to determine the root of the issue.

Let me know if you require any further guidance.

Gina