how can i fix Largest contentful paint (lcp) issue for mobile

Question

  <div className={styles.imgContainer}>
                <Image
                  style={{ objectFit: "cover" }}
                  src="https://res.cloudinary.com/di7j408eq/image/upload/v1685516535/outdoor-living-slider_1_nsnsnr.webp"
                  fill
                  sizes="100vw"
                  alt="calgary landscaping"
                  priority
                />
              </div>

in desktop lcp score in 1.1sec which is good score but for mobile lcp score is greater than 4.5sec how can i fix lcp score for mobile

Answer 1

Theres really not enough information in your question to answer this. But here's some more info and things to look at next:

I can see you are using the Next.js Image component and are using the preload attribute. Those are good and are the optimal way of loading the image in Next.js, and it should automatically preload the image and render it as quickly as it can when that component is rendered.

Are you server-side rendering the site or is this client-side rendered? The latter will have a delay as it takes time to execute the JavaScript before creating the HTML to allow the browser to render the page.

Also are you sure you are looking at the right thing?

Is your image definitely the LCP element on mobile? It's common to have other elements being larger on mobile (for example cookie banners).

Where are you seeing a slow LCP time for mobile? Is it on PageSpeed Insights in the "Discover what your real users are experiencing" section? Or in Lighthouse? You should always look at the former where this data is available as the Lighthouse data is just a simulated run (under quite slow conditions) and may not be be representative of the LCP experienced by your actual users.

Also check whether the LCP is for that particular URL you are looking at or the whole origin (where it might be based on other pages that don't even have images).

Finally, check whether the rendering is actually the problem by looking at TTFB and FCP. If you have a long TTFB then no mater how much you optimise your front-end code, it will only help so much. If there is a large gap between TTFB and FCP then that suggests the site is JS-dependent (CSR) and similarly if there is a large gap between FCP and LCP then that suggests the LCP section of the page is just rendering last.

See also the information at:

• Optimize LCP
• Optimize TTFB