Please guide us on how to make the website load faster and reduce LCP, FCP, INP & TTFB.
Also, the Core Web Vitals Assessment should be passed.
After using the boostify app, it doesn’t improve the store’s performance.
The video above is too large, try to compress it, or lazy load it. For mobile users, auto load a large file doesn’t make sense.
Hii @LookandAdorn , Thanks for sharing the important details with us. As you have already done some actionable steps for improving Core Web Vitals you need to apply some more advanced steps for making the change happen.
Issues With Document Request Latency
Document Request Latency is the problem of delay in fetching the HTML document (the core structure of your page) from the server.It can significantly impact Time to First Byte (TTFB) and Overall Load Time.
Suggested Improvement
Optimize App and Script Load
Third-party apps or scripts can increase document request latency due to additional server calls. To optimize, first try to remove apps you no longer need and ensure that only essential apps are active. Additionally Defer or asynchronously load third-party scripts so they don’t block the initial document load. Example -
Reduce Unnecessary HTTP Requests
Every time you make an HTTP request it actually adds time to document fetching. To resolve this try to combine CSS and JavaScript files and additionally Minify CSS, JavaScript, and HTML to reduce the size of the files being transferred.
For example, this CSS before minifying :
/* Main Styles */
body {
background-color: white;
font-size: 16px;
}
After minifying :
body{background-color:white;font-size:16px;}
Javascript execution time too high
As we see your javascript execution time is high you need to make changes to fix this.Slow JavaScript execution can lead to a delayed user experience, which can negatively affect SEO rankings and conversion rates.
Suggested Improvement
Optimize Event Listeners
Event listeners for actions like clicks, scrolls, or mouse movements can block the main thread if they’re too heavy or if there are too many. Below example of optimizing it -
let timer;
document.querySelector(‘.search-input’).addEventListener(‘input’, function(event) {
clearTimeout(timer);
timer = setTimeout(() => {
// Action after a delay
console.log(event.target.value);
}, 300); // 300ms means you have to wait for 300ms before executing the action
});
DOM Size not optimized properly
A bloated or overly complex DOM can significantly slow down your page rendering, increase memory usage, and negatively impact Core Web Vitals
Suggested Improvement
Implement Conditional Loading of Content
As For larger content that is not critical for initial rendering, consider conditional loading. This technique ensures that only the essential elements load first, while others are deferred until the user scrolls to them or interacts with the page.
For Example -
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Lazy-load content
entry.target.classList.add(“load”);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.5 }); // Trigger when 50% of the element is in view
document.querySelectorAll(“.lazy-load”).forEach(element => {
observer.observe(element);
});
Alternatively, if you are still not able to fix the issues and want to fix them automatically you can try our speed optimization Shopify App called Website Speedy that comes with a 14-day free trial. It will do the optimization automatically for you.