We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Website incredibly slow even after using Optimizing and speed boosting Apps

Website incredibly slow even after using Optimizing and speed boosting Apps

Purnangsu
Shopify Partner
4 0 2

Hi All,

 

My store: https://www.saarangsarees.in/ has been opening slowly on mobile device for quite some time and it has been affecting sales. 

 

I have tried the following - 

1. Removing unnecessary code and css

2. Removing unnecessary apps

3. Compressing images

4. Removing entire video sections

5. Using several speed boosting and optimizing apps

 

All of them helped for a short period of time. What it is ultimately doing is loading th pictures slowly the 1st time, and if I try to access either the search or the hamburger menu, both functionalities are being shown in a distorted manner which is getting fixed within a few seconds on its own as the rest of the page loads properly. Not sure what else I can try. Any help would be appreciated. 

Replies 3 (3)

Shopnova
Tourist
3 0 0

I’ve dealt with a similar issue before  did all the usual things like compressing images, removing apps, and tweaking code, but the problem kept coming back. What finally fixed it was something most people completely miss.

 

If you’re open, I can take a quick look and point you in the right direction.

Nicola3
Excursionist
50 2 3

Hi @Purnangsu

 

From what you said here, I notice you mentioned that the pictures on your website load slowly the 1st time and then it recovers. This means your pictures on the website take up lots of time to load completely, and it may be one of the causes codes which result in the slow speed situation.

 

On my store, I used two methods below to enhance picture loading issues, and you can have a try meanwhile, to see which one suits you:

 

1. Preload pictures. I got this method from this dev article after spending some time researching.

https://web.dev/articles/preload-responsive-images

 

2. Instant page. This can make your site’s pages instant in 1 minute, from what it said on the official website, and it did increase the speed of my store page in some ways. You can take a look and do a test, also.

https://instant.page/

Website_Speedy
Shopify Partner
151 0 7

Hello @Purnangsu , As you tried some steps to improve website performance which unfortunately is not effective but understanding the main cause for slow website loading speed is the first target . I checked the store -  https://www.saarangsarees.in/ on Google Page Insights Report  and found the results for website slowness. Below showing the information -

new_ss.PNG

As you can see the speed index and LCP are high for your website. You already tried some actions to resolve i recommend to try some techniques to resolve these two issues -

 

 Image Not Size Properly 

Images are not appropriately sized causing the load speed to delay.

 

Suggested Improvement 

To ensure that images are properly sized for various devices (desktop, tablet, and mobile), you can use the srcset attribute, which allows browsers to choose the appropriate image size based on the device's screen width. Implement srcset to serve different image sizes based on the user's screen size. 

 

<img src="{{ product.featured_image | img_url: '400x400' }}" 

     srcset="{{ product.featured_image | img_url: '400x400' }} 400w, 

             {{ product.featured_image | img_url: '800x800' }} 800w, 

             {{ product.featured_image | img_url: '1200x1200' }} 1200w" 

     sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px" 

     alt="{{ product.title }}">

 

Fonts are not optimized 

Fonts can also block rendering if not optimized, contributing to a high Speed Index. Ensure that fonts are loaded efficiently and do not block content rendering.

 

Suggested Improvement 

You can use font-display: swap: This CSS property ensures that text is visible immediately with a fallback font until the custom font has loaded.

For example - 

@font-face {

  font-family: 'YourFont';

  src: url('your-font.woff2') format('woff2');

  font-display: swap;

}

 

Preload Critical Resources

Preloading important resources (like fonts, CSS, and key images) ensures that they are fetched and rendered as quickly as possible, which can help improve LCP.

 

Suggested Improvement 

Preload critical fonts to ensure they load quickly for text rendering.

For example - 

<link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

 

Preload your hero section or any large elements that are important for the page's initial view. For example, preload important CSS or JavaScript files.

Example - 

<link rel="preload" href="main-style.css" as="style">

 

Alternatively, as you seem frustrated and have already tried some solutions to resolve speed issues. I would recommend the speed optimization Shopify App called Website Speedy that will automatically enhance LCP, Speed Index, TBT and other metric scores and  comes with a 14-day free trial to test.