How can I effectively reduce LCP?

Technical Q&A
1

Hi,

Help me to reduce LCP

ami55_0-1713960636681.png
ami55_0-1713960636681.png1125×540 17.3 KB

ami55_1-1713960692742.png

2

@ami55 Hello can you share the store URL?

3

@kazi_1 sheopals.com

4

@ami55 I have checked your store in google page speed https://pagespeed.web.dev/analysis/https-sheopals-com/h7xmisz7zh?form_factor=mobile

lcp.png
lcp.png1366×629 40.8 KB

You need to optimize slider images, resize and convert them to lightweight .webp

Fix render blocking resources - Inline CSS/JS . Defer JS files as needed

Properly size images - Resize images for mobile

Defer offscreen images - Lazyload images below the fold

If you need help fixing them you can contact me anytime. Thank you!

5

Hi,

Images are already in .webp

used defer tag for js

But still showing the same

6

Hello,

Thank you for sharing your Store URL

Here are some proven steps that will improve your website speed dramatically for both mobile and desktop.

Select a light Weight Shopify Theme
Remove all Unwanted Shopify App ( That you have installed but not using)
Minify Javascript, CSS
Reduce the Large Image Size
Eliminating the halting problem in Javascript
Apply Lazy loading per section wherever required
Replace Gifs with the Static Images
Resize Products images using Shopify App ( for Bulk )

Check the page speed using Google page Insight and GTmetrix.

By fixing these issues, your website speed score can improve
If you want a Free complete Website Optimization Audit Report (All the Actionable steps for your store), let me know |

If you have any concerns feel free to ask me!

Good Luck!
Regards,
San

7

Ok, so ignore most of the other suggestions.

Two things to improve PDP LCP

  1. You have one render blocking resource, which will delay pageload in general, so that shoulldl be defered, it will help FCP and LCP. The resource is includes.min.js, hosted on sheopals.com. I assuming its from a third party vendor, like an app
  2. Your LCP image is apperantly being lazyloaded, I assume this based on the class “flickity-lazyloaded ls-is-cached lazyloaded”. the first slider image should not be lazyloaded.
  3. Preload your LCP image. use a preload hint, making sure to include imagesrcset, I don’t think the shopify preload tag really works for preloading images at the moment, so use a default html one and include the correct imagesrcset.

Doing the above correctly should reduce the LCP time of your PLPs by half.

8

  1. compress image

  2. preload image

9

Hi Ami55,
We have just checked the speed of the store, it scored 62 on mobile and 65 on desktop. Here is the detailed link: https://pagespeed.web.dev/analysis/https-www-sheopals-com/0v732h3q55?form_factor=mobile. We have this recommendation as follows:

Best Regards,
Daisy Vo.