Your LCP is 4 seconds. How do you diagnose and improve it?

First find the LCP element, then split its time into parts and fix the slowest part. LCP (Largest Contentful Paint) is when the largest image or text block on screen appears.

Find the element. Use the DevTools Performance panel, or the attribution build of the web-vitals library.

Split the time into four parts:

• TTFB (Time To First Byte): how long until the first byte of the HTML arrives.
• Resource load delay: how late the image starts downloading.
• Resource load duration: how long the download takes.
• Element render delay: the wait between download and the element appearing.

Fix each part:

• A slow TTFB needs server work, caching or a CDN (content delivery network: servers near the user).
• A late start usually means the browser discovers the image late. For example, it is a CSS background or JavaScript injects it. Put it in the HTML as an <img>. Add fetchpriority="high" or a preload. Never put loading="lazy" on it.
• A long download means the image is too big. Use modern formats, responsive srcset and compression.
• Render delay often comes from render-blocking CSS and JavaScript, or from client-side rendering. Reduce blocking resources, or render the content on the server.