Re: High Render Delay (LCP)

How can I improve my site's speed and reduce high render delay time?

Tasos
Shopify Partner
6 0 2

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. 

 

Tasos_0-1709837226516.png

Tasos_1-1709837270213.png

 

 

Replies 10 (10)

oreoorbitz
Shopify Partner
261 31 134

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. 

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949
Tasos
Shopify Partner
6 0 2

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. 

JohnE10
Shopify Partner
118 14 20

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.

 

 

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com
Tasos
Shopify Partner
6 0 2

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?

JohnE10
Shopify Partner
118 14 20

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.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com

oscprofessional
Shopify Partner
16233 2427 3153

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.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free
Tasos
Shopify Partner
6 0 2

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? 

Mymy288
Shopify Partner
3 0 0

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.

Stacy_Zhuk
Shopify Partner
533 22 75

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:

  • minify and combine CSS, JavaScript, and HTML files
  • compress all images across the website
  • reduce the number of HTTP requests
  • implement lazy loading
  • utilize Gzip compression
  • enable browser caching
  • revise your apps and customizations to your current theme

Most probably you would need a developer to do everything properly.
If you need any assistance, please, let me know.

 

Best regards,
Anastasia

Co-founder at Whidegroup, e-commerce development company from Ukraine
- 10+ years of experience with SMBs
- Deep expertise in custom development & optimization
E-mail: anastasia@whidegroup.com

DaisyVo
Shopify Partner
3435 393 475

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution