How to shorten loading time of Largest Contentful Paint

HappyTail
Excursionist
20 0 3

Hey there,

Google speed report suggests I have a speed issue in my website regarding the Largest Contentful Paint (only on mobile): 

HappyTail_0-1683789204178.png

I changed the LCP (it's the main picture in my homepage) from lazy loading and made the photo smaller but there was no change to the speed and LCP.

What can I do?

Thanks,

Tomer

 

Replies 11 (11)

SAN_MSWEB
Shopify Expert
872 110 115

Hi @HappyTail 


I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

You need to optimize your store.

Few Tips to Speed Up your Shopify store-
1. Use compressed images
2. Optimize use of Shopify apps
3. Implement AMP
4. Consider Professional Help
5. Use a single Hero Image
6. Minify Js/Css files




Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

HappyTail
Excursionist
20 0 3

Hey San, Thanks for the reply.

I am curious specifically about the LCP since according to google, that is the source of the slowdown. For some reason, it's happening on the default product page and on the home-page, but not on a relatively "simple" page like faq. I checked the mobile photo in the homepage that is causing the slowdown there and it's a compressed jpeg in a hero slide (but only with one photo) in "eager" mode. What else can I do in that regard? Why is it happening also on the default product page?

Thanks

Tomer

HappyTail
Excursionist
20 0 3

Basically I'm trying to understand what makes the diffrence between the desktop and mobile?

Desktop:

HappyTail_0-1683813683762.png

 

Mobile:

HappyTail_1-1683813713400.png

 

oreoorbitz
Shopify Partner
237 29 128

Its probably  because of render blocking resources.
Javascript and CSS are priotized over images, so if you have a bunch of JS and CSS that are being priotized first, then that could delay the LCP image. It could also be because the LCP image is  being loaded by JS for some reason.

It's impossible to know your specific situation without seeing the page in question.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
HappyTail
Excursionist
20 0 3

Thanks for the reply. If you could, I have 2 follow-up questions:

1. Will minifying help with the render blocking issues?

2. In another query in the forum the following answer was given for rendering issues:

 

The render-blocking resources are caused by both javascript and CSS files.
For CSS, you can preload the CSS files as shown in the example below:  

<link rel=”preload” as=”style” href=”{{ ‘css_file.css ’ | asset_url  }}”/>

and then add the CSS normally you do in Shopify: 

<link rel=”stylesheet” href=”{{ ‘css_file.css ’ | asset_url  }}”/>

For Javascript files, you can use async and defer attributes to the script tag to remove the issue. 

  • Async - the async attribute lets the script be executed asynchronously with the rest of the page ( the script would be executed as the webpage parsing continues).

<script src=”{{ ‘script_file.js ’ | asset_url  }}” async></script>

  • Defer - the defer attribute ensures that the script has to be executed only after the page has finished parsing. 

<script src=”{{ ‘script_file.js ’ | asset_url  }}” defer></script>

Using the above keywords ensures that the render-blocking issues are removed from the script files. 

 

 

In your mind, will that help? To what Shopify code file should I add these codes?

Thanks,

Tomer

HappyTail
Excursionist
20 0 3

If that's relevant, that's the TBT data from lighthouse:

HappyTail_0-1683990118891.png

What other data can I provide that will help identifying the issue?

oreoorbitz
Shopify Partner
237 29 128

Defering JS will help.
Preload css will not, how its done in the example is pretty much useless.

However, this is a really important gotchya:
Defered JS scripts will still slow down LCP because they are still priotized over images.

The only way to make sure they aren't priotized over images is for them to be defered, and be placed bellow the images, like at the bottom of the <body> tag. However, if you have several pieces of JS, either inline or in files that relate to each other, then moving them all to the bottom of the body can be a complicated task. In which case it's better just to preload the LCP image, but you can't do that for the homepage image since Shopify is structured in such a way that its really really hard to preload the homepage image if you are going to be changing it at some point.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.

flareAI
Shopify Partner
2405 223 535

Hello @HappyTail,

 

I am Gina from flareAI app helping Shopify merchants get $6Million+ in sales from Google Search, on autopilot.


If you have already optimized the Largest Contentful Paint (LCP) element on your website by implementing lazy loading and reducing the size of the main picture but are still experiencing speed issues on mobile, there are a few additional steps you can take to improve LCP and overall mobile performance.


1. Image Optimization
- Compress and optimize images further
Ensure that the main picture and other images on your website are properly optimized for web. Use tools like ImageOptim or TinyPNG to reduce file size without compromising image quality.
- Serve responsive images
Implement responsive image techniques, such as using the `srcset` attribute and the `picture` element, to serve appropriately sized images based on the device's screen size.

2. Minify and Compress CSS and JavaScript
- Minify CSS and JavaScript files
Remove unnecessary whitespace, comments, and code to reduce file size. This can be done manually or by using tools like UglifyJS or CSSNano.
- Enable compression
Enable GZIP compression on your server to further reduce the file sizes of CSS and JavaScript resources.

3. Caching
- Implement browser caching
Set appropriate caching headers for static assets to allow browsers to cache them, reducing the number of requests made to the server on subsequent visits.

4. Prioritize Visible Content
- Use async and defer attributes
Add the `async` or `defer` attribute to your script tags to ensure that non-render-blocking JavaScript does not delay the rendering of critical content.
- Inline critical CSS
Inline the critical CSS needed to render the above-the-fold content, allowing the browser to render it faster without waiting for an additional CSS file to be fetched.

5. Performance Testing and Monitoring
- Continuously monitor and test your website's performance using tools like Google PageSpeed Insights, WebPageTest, or Lighthouse. These tools can provide insights and recommendations specific to your website, allowing you to identify and address performance bottlenecks.


Remember to regularly measure the impact of each optimization you make to ensure you're making progress. Improving LCP and mobile performance requires an iterative approach, and it's important to consider a combination of factors, including network conditions, server response, and overall page structure, to achieve optimal results.


Gina

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing
HappyTail
Excursionist
20 0 3

Hey Gina, Thanks a lot for the detailed reply. I'll go through it and see what helps.

oscprofessional
Shopify Partner
15741 2354 3057

Hello @HappyTail 
Can You Please Share Your Store URL I Will Check Your Issue and Provide a Positive Solution
Thanks

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

Cedcommerce
Shopify Expert
718 76 110

Hello @HappyTail

 

Here are some easy methods to optimize your store speed. 

 

  1. Full-speed optimization Audit.
  2. Check and fix all halting Java scripts, if any.
  3. Check and remove apps' obsolete code, if any.
  4. Check and optimize all website assets (images, CSS, JS, etc.)
  5. Images optimization & compression.
  6. Optimize the video section to an optimized version, if any.
  7. Apply Lazy loading per section wherever required.
  8. Check and defer scripts wherever required.
  9. Improve liquid rendering time.
  10. Improve Largest Contentful Paint LCP [Web Vitals] as per Gtmetrix.
  11. Improve Cumulative Layout Shift [Web Vitals] as per Gtmetrix.
  12. Improve TBT - Total blocking time as per GTmetrix.
  13. Improve FID - First Input delay.
  14. Pre Load critical assets.
  15. Handle third-party script [ app ].
  16. Font loading.
  17. Compress js and CSS files.
  18. Apply CDN where required.
  19. Lazyload images and iframes.
  20. Remove unused JavaScript from the theme.
  21. Preload assets where required.
  22. Optimise videos and Gif
  23. Improve overall page loading time
  24. Implement AMP pages if required.
  25. Improver, overall core web vitals score, based on lighthouse policy.

 

To enhance your site performance and speed, work on the above pointers, this will affect the website's overall performance. This may include image compression and optimization, lazyload images, video, & product descriptions, and compressing & Minifying HTML, CSS, and jQuery.



Hope it helps; let us know if you need more help. 

 

Regards, 

CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here