Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello there, I am trying to figure out how to improve the page speed experience. Generally, the speed of the site is good however I am getting a very high render delay time affecting the LCP score and as a result failing at the google web vitals. Am i missing something very obvious or this is normal? Does anyone know how I can figure this out, or any insight on my store and improving the speed?
Thank you for your time.
Render delaying means that everything is ready, but other elements are being priotized before the image. Usually this is render blocking resources, and just any html above the image, as html is processed from top to bottom.
If you don't understand any of the above, I'd reccomend just hiring someone.
Thank you very much for explaining that. I am trying to learn more about the page speed optimization, so that’s why I didn’t outsource that out yet and instead post the question.
Hi,
As previously mentioned, a high render delay usually means that there are other resources, usually render-blocking CSS and/or JavaScript, that are preventing the LCP image from rendering as soon as it's loaded. So, what needs to be done is figuring out a way to decrease the download time for those CSS and JavaScript resources, which is done on a case-by-case basis depending on the code being used.
Hope that helps.
Thank you, John, for your additional info. So, I have to identify the not critical/unnecessary JavaScript I execute before rendering the hero banner. I am trying to figure out what is rendered before the hero image with the Performance tab at Chrome DevTools. Am I in the right path?
You bet.
Yes, you're definitely on the right path. Try webpagetest.org also. In addition to showing a waterfall, it denotes render-blocking files, which can help narrow down which files need to be addressed.
Hello, @Tasos,
To address LCP issues, incorporating liquid code is necessary, particularly as these issues commonly stem from images. Images are often slow to load due to lazy loading. It's important to note that during your site's loading process, the initial image isn't subject to lazy loading, while subsequent images are.
Hello @oscprofessiona,
Thanks for taking the time to add valuable information to my problem. I use lazy load for the images below the fold. For the banner, which is above the fold I don’t lazy load it. This isn’t a good practice?
Hi @Tasos , You can try to change the type of image LCP. use the fetchpriority = high for the image. Remove lazyloading for the LCP element.
Hello @Tasos,
It is hard to give an exact answer in your case, I need some more details to assist you. Removing unused JS and optimizing images are just a part of the job.
Here’s a list of tips to improve page load speed:
Most probably you would need a developer to do everything properly.
If you need any assistance, please, let me know.
Best regards,
Anastasia
Hi Tasos,
We have just checked the speed of the store, it scored 60 on mobile and 82 on desktop. Here is the detailed link: https://pagespeed.web.dev/analysis/https-acollectionboutique-gr/0pnho5sodt?form_factor=mobile. We have a few recommendations as follows:1. TBT: Third-party apps are affecting the store's speed. Here is the detailed image: https://prnt.sc/xTep1QRxNjDh.
2. LCP: The LCP score is at 11s, which is quite high on mobile. You should optimize the store's images. A good score would range between 5-7s.We recommend using this Avada SEO Image Optimizer app so that the store can improve its speed and provide a better user experience.
Best Regards,
Daisy Vo
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025