How to fix issues which are slowing down my store

[kenkai]

Hi 

I am getting these issues on my store. I have tried to optimise the images, change the image formats and download speed site plugins, but can't get all these issues fixed.

Have tried searching one by one, but I think thats the issue with Shopify. Depending on the theme and what no

[PMike]

I don't know if this will help you, but you can try installing apps to optimize view page speed. One app that I recommend is Avada's SEO:Image Optimizer Page Speed app.

[kenkai]

Hi,

I am using this app at the moment as well. It's ok, but doesn't seem to fix many issues. These google page insights are actually while using that very app.

Thank you though

[INA_MSWEB]

Hi @kenkai 

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Your website is slowing down, if you can Get Better Results, then you need to optimize your store.

Few Tips to Speed Up your Shopify store-
1. Use compressed images
2. Optimize use of Shopify apps
3. Implement AMP
4. Consider Professional Help
5. Use a single Hero Image
6. Minify Js/Css files

Regards,

San

[flareAI]

Hello @kenkai,

This is Gina from flareAI app helping Shopify merchants get $6Million+ in sales from Google Search, on autopilot.

Below are some suggestions for each of the issues you mentioned.

1. Efficiently encode images
Ensure that your images are optimized for the web by compressing them without compromising their quality. You can use tools like TinyPNG to compress your images without losing their quality.

2. Serve images in next-gen formats
Next-gen image formats like WebP are more efficient than traditional image formats. Consider using a tool like the Shopify app Image Optimizer to convert your images into next-gen formats.

3. Preconnect to required origins
Preconnect can help speed up page loading times by establishing early connections to required origins. Consider using a preconnect tag to connect to important third-party resources.

4. Reduce the impact of third-party code
Third-party code can slow down your site's performance. Consider removing or optimizing third-party code that is not essential for your site's functionality.

5. Largest contentful paint image was lazily loaded
Lazy loading can help improve page loading times by loading images only when they are needed. However, make sure that the largest contentful paint (LCP) image is not lazily loaded, as this can negatively impact your site's performance.

6. Image elements do not have explicit width and height
Make sure that your image elements have an explicit width and height specified in their HTML or CSS. This helps the browser allocate the correct amount of space for the image, which can improve page loading times.

7. Minimize main thread work
The main thread is responsible for rendering your site's content. Minimizing the amount of work done on the main thread can help improve your site's performance. Consider reducing the number of scripts or stylesheets loaded on the main thread.

8. Serve static assets with an efficient cache policy
Make sure that your static assets, like images and CSS files, are served with an efficient cache policy. This can help improve page loading times by reducing the number of requests made to the server.

9. Reduce JavaScript execution time
JavaScript can slow down your site's performance, especially if it's executed on the main thread. Consider optimizing your JavaScript code to reduce execution time.

10. Avoid enormous network payloads
Large network payloads, like images or videos, can slow down your site's performance. Consider compressing or optimizing large files to reduce their size.

11. Avoid an excessive DOM size
A large DOM can slow down your site's performance, especially on mobile devices. Consider optimizing your HTML and CSS code to reduce the size of your DOM.

Implementing these suggestions can help improve your site's performance and potentially resolve the issues you are facing. However, keep in mind that some of these issues may be related to the specific theme or app you are using on your Shopify store.

Hope this helps

Gina

[oscprofessional]

Hello @kenkai 

Hope you are doing well. 

Below are some factors that might impact the speed of your online store, and how you can address them.

1. Defer offscreen images

So you can use a lazy load for these images.

• To defer the loading of offscreen images on your Shopify site, you will have to modify your Theme (theme. liquid file) to leverage the lazySizes library. Here's how:
• Download the lazy sizes Javascript library from here and upload it to your theme's /assets folder. 
• Note(once check ‘lazy sizes Javascript library’ in assets repo. has available or not)
• Add the following lines to your theme. liquid just before the </head> tag:

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

• Change the image tags in your theme by adding the class "lazyload" to the image tags and changing the src attribute to the data-src attribute. 

{% for img in product.images %}

 {% assign img_url = img | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

 <img class="lazyload" 

 src="{{ img | img_url: '300x' }}"

 data-src="{{ img_url }}"

 data-widths="[720, 1080]"

 data-aspectratio="{{ img.aspect_ratio }}"

 data-sizes="auto">

{% endfor %}

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.