How to shorten loading time of Largest Contentful Paint

HappyTail · ‎05-11-2023

Hey there,

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

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

INA_MSWEB · ‎05-11-2023

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 · ‎05-11-2023

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 · ‎05-11-2023

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

Desktop:

Mobile:

oreoorbitz · ‎05-11-2023

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 pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949

HappyTail · ‎05-13-2023

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:

and then add the CSS normally you do in Shopify:

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).

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

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 · ‎05-13-2023

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

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

oreoorbitz · ‎05-14-2023

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 pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949

flareAI · ‎05-11-2023

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 · ‎05-13-2023

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

oscprofessional · ‎05-16-2023

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

Cedcommerce · ‎05-17-2023

Hello @HappyTail,

Here are some easy methods to optimize your store speed.

Full-speed optimization Audit.
Check and fix all halting Java scripts, if any.
Check and remove apps' obsolete code, if any.
Check and optimize all website assets (images, CSS, JS, etc.)
Images optimization & compression.
Optimize the video section to an optimized version, if any.
Apply Lazy loading per section wherever required.
Check and defer scripts wherever required.
Improve liquid rendering time.
Improve Largest Contentful Paint LCP [Web Vitals] as per Gtmetrix.
Improve Cumulative Layout Shift [Web Vitals] as per Gtmetrix.
Improve TBT - Total blocking time as per GTmetrix.
Improve FID - First Input delay.
Pre Load critical assets.
Handle third-party script [ app ].
Font loading.
Compress js and CSS files.
Apply CDN where required.
Lazyload images and iframes.
Remove unused JavaScript from the theme.
Preload assets where required.
Optimise videos and Gif
Improve overall page loading time
Implement AMP pages if required.
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

How to shorten loading time of Largest Contentful Paint

How to shorten loading time of Largest Contentful Paint

Community Blog Articles