Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
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.
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.
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.
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 -
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.