Trying to improve the LCP on my site

Store Design
1

I am trying to improve the LCP on my site. It was recommended that I can improve the image responsiveness with the following code:

srcset="

{{ section.settings.image | image_url: width: 375 }} 375w,

{{ section.settings.image | image_url: width: 550 }} 550w,

{{ section.settings.image | image_url: width: 750 }} 750w,

{{ section.settings.image | image_url: width: 800 }} 800w,

{{ section.settings.image | image_url: width: 900 }} 900w,

{{ section.settings.image | image_url: width: 1100 }} 1100w,

{{ section.settings.image | image_url: width: 1500 }} 1500w,

{{ section.settings.image | image_url: width: 1780 }} 1780w,

{{ section.settings.image | image_url: width: 2000 }} 2000w,

{{ section.settings.image | image_url: width: 3000 }} 3000w

"

sizes=“(min-width: 1000px) {{section.settings.desktop_width}}px, 100vw”

I don’t know what to do with that. Can anyone guide me or do it for me?

2

try using preload you can search the exact syntax though giving you an example

3

<link rel="preload" as="image" href="{{ section.settings.image | image_url: width: 1500 }}" imagesrcset=" {{ section.settings.image | image_url: width: 375 }} 375w, {{ section.settings.image | image_url: width: 750 }} 750w, {{ section.settings.image | image_url: width: 1500 }} 1500w " imagesizes="(min-width: 1000px) {{ section.settings.desktop_width }}px, 100vw">

4

Hello, LCP not only depend on image reponsiveness it also depends on image size. If your image is big size and not compress in that case it will take time to load and which cause in LCP. you can use image compressor app like like

Or other image compressor app

to compress your image. it will help you to increase LCP also

thank you

6

Hi @disantisp

Could you send me your store URL? I can check the implementation and provide a proper solution for improving the LCP. Once I review the theme and the image section, I’ll let you know exactly where the code should be added and can help you implement it correctly.

Best regards,
Devcoder :laptop:

7

Do not blindly apply all the edits recommended.

Not matching the sizes attribute properly, or adding a preload which does not match the actual image will make your pagespeed score worse.

Your main problems for the homepage are:

  1. Slideshow images are not responsive, meaning you’re always loading the same size image no matter what browser width is used. The code you’ve quoted is intended to fix this, but it needs amending for you rtheme/section.
    For this you need someone to look over your theme code.

  2. Your main LCP image on mobile is not the first slide, but the second. Slideshow starts autoplay and, in real life it’s hard to predict which of the images will become LCP.

    Your options here – do not autoplay slideshow (or at least, until visitor scrolls) or replace slideshow with hero section. If you need slideshow – add it as a second/third section.

An option to fix responsive image issue and lazy loading – get a slideshow section from an app like “Sections store” – they are usually done better then section from your ancient theme.

Another option is to ask Shopify AI Sidekick to generate a section for you, mentioning all the requirements. Sidekick uses modern patterns and should come up with better code then your theme has.

Also worth considering – update to a modern theme.

8

My URL is thebestshop4u.com

9

Hi @disantisp

we need to resolve all of these points.

Image optimization (compression + proper sizing + next-gen formats)
Reduce HTTP requests and remove unused assets
Implement lazy loading for images and sections
Optimize and minify CSS & JavaScript
Remove or replace heavy/unnecessary apps
Improve mobile performance and responsiveness
Advanced theme code optimization (Liquid + JS cleanup)
Speed audit using tools like PageSpeed Insights

image
image1104×505 20.9 KB

image
image1253×530 19.1 KB

image
image1180×474 21.6 KB

**
Best regards,
Devcoder :laptop:**

10

How do I do that?

I have an app that reduced all the images from PNG to JPG. I thought it took care of the lazy loading also. I guess not.

Is this work I can do? I’m not a coder.

11

Hi @disantisp

Converting images from PNG to JPG helps reduce image size, but it doesn’t automatically handle lazy loading or other speed optimizations.

To properly improve site speed and LCP, we need to check several things such as image loading, lazy loading, responsive image sizes, and any render-blocking scripts. If you’re not comfortable with coding, no worries—I can help review your store and handle the optimization for you.

Best regards,
Devcoder :laptop: