Hello @juce ,Your website design and development are good, but your site speed is the worst, as per the Google Page Insights Report, which is the reason for fewer customers and low sales, as customers are not even able to access your website quickly. According to Google, as page load time increases from 1 second to 3 seconds, the probability of a visitor bouncing increases by 32%. As it increases from 1 second to 5 seconds, the likelihood of bouncing increases by 90%. This drop in user engagement leads to lower conversion rates.
Images Not Optimized
As per the report, your images are not optimized, causing LCP to go high.
Suggested Improvement
I would recommend optimizing the images by using the WebP format for images, and you should also use online compression tools to reduce the loading time for it.
As you have used a slideshow for the images. I recommend avoiding lazy loading for the first image in the slideshow. Instead, ensure that it loads immediately (e.g., using loading=“eager” for the first slide).
Like -
![First Slide]()
High Javascript Execution Time
Your js is taking too long to execute, as keeping less JavaScript execution time is essential to improve your website’s performance.
Suggested Improvement
Use dynamic import to split your JavaScript into smaller chunks. When a certain part of the page needs to be loaded, Webpack will only load the corresponding chunk, not the entire JavaScript file.
Example -
import(‘./path/to/your/largeModule.js’).then(module => {
const someFunction = module.someFunction;
someFunction();
});
Additionally, try minifying your js file, there are online tools available to perform this action, but you can do it on your own as well, like-
Before Mification
function sayHello(name) {
let greeting = "Hello, " + name + “!”;
console.log(greeting);
}
After Minification
function sayHello(a){let b=“Hello, “+a+”!”;console.log(b)};
Main Thread Work Issues
Your style and layout are causing a concern for site with HTML not parsing effectively.
Suggested Improvement
Layout shifts are caused by elements (like images, fonts, or dynamic content) that change position as the page is loading. These shifts not only impact user experience but can also affect Core Web Vitals, especially the CLS (Cumulative Layout Shift) metric
Use the width and height attributes for images: This prevents the browser from having to recalculate the layout after images load.
Code example -
![image description]()
Use CSS min-height for dynamic elements like -
.dynamic-content {
min-height: 100px;
}
Alternatively, if you’re stuck on these issues and want to fix automatically, Try Website Speedy - a Shopify app that optimizes LCP, FCP, speed index, and other core web vitals automatically. It comes with a 14-day free trial.
