How can I optimize the 9.7s LCP for the main banner?

Shopify Discussion
1

Website: www.decoazul.net

The LCP for the banner is 9.7s with loading=“eager” and fetchpriority=" high" the issue is on Mobile only. Any advice? Thanks!

Screenshot 2024-12-04 111638.jpg
Screenshot 2024-12-04 111638.jpg933×460 51.9 KB

Screenshot 2024-12-04 111616.jpg
Screenshot 2024-12-04 111616.jpg940×599 37.1 KB

2

Hey @sclee ,

Hey there! The LCP issue you’re facing (9.7s) on mobile seems to be mostly related to how the banner image is being loaded and rendered. Here are a few suggestions you can try:

Image Optimization:1. The banner image at 1200px wide might be overkill for mobile. Try creating smaller, mobile-optimized versions of the image and use the srcset attribute to serve the right size based on the device.

  1. Pre-compress the WebP image further. You can use tools like TinyPNG or Squoosh for this. A smaller file size can make a big difference.
  2. Add width and height attributes to the image tag to avoid layout shifts and improve rendering speed.

Loading Improvements:1. Since this is a critical element, use to load it earlier in the page lifecycle.

  1. Add decoding=“async” to the tag. This helps browsers process the image faster.
  2. You might also want to experiment with the tag for responsive images. It lets you serve different image sizes based on screen width:

Server Optimizations:1. If you’re not using a CDN, definitely add one to cache and serve assets faster, especially for mobile users.

  1. Check your server’s response times and make sure caching is set up properly for static assets like images.

Other Quick Wins:- Ensure there are no render-blocking scripts or styles delaying the banner’s load. Look for opportunities to defer non-critical resources.

  • Double-check if your fonts and CSS are optimized (e.g., inlining critical CSS).

I’d love to help you make these changes if needed—this is kind of our thing! We’re known for speed optimizations, and I’m confident we can get your LCP down to under 2.5s. Let me know if you want to collaborate!

Cheers!
Shubham | Untechnickle

3

Hi Sclee,
We have just checked the speed of the store, it scored 64 on mobile and 96 on desktop. Here is the detailed link: https://pagespeed.web.dev/analysis/https-www-decoazul-net/1cdze0r26d?form_factor=mobile. We have a few recommendations as follows:

  • LCP: The LCP score is at 10s, 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.