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

Tasos
Tourist
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 9 (9)

oreoorbitz
Shopify Partner
257 31 132

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
Tourist
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
112 14 19

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
Tourist
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
112 14 19

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
15905 2378 3087

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
Tasos
Tourist
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
456 21 65

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