Performance
How do I improve Largest Contentful Paint?
Find what is on the critical path before the largest element can paint, and remove it. Usually a render-blocking stylesheet, a late-discovered font, an oversized image, or a client-rendered page where nothing paints until a bundle executes.
The sequence that works
- Identify the LCP element from field data, not from your own browser
- Make sure it is in the initial HTML rather than injected by script
- Preload only what that element needs — one font, one image
- Serve the image in a modern format at the size the viewport uses
- Remove render-blocking CSS and JavaScript from the critical path
- Then look at server response time, which is a constant added to everything
The two mistakes that undo the work
- Lazy-loading the hero image, which adds a full round trip to your worst metric
- Preloading a dozen resources, which competes for bandwidth and helps none of them
The architectural fix
If the page is the same for everyone, generate it statically. A client-rendered page puts four sequential steps between the request and the first pixel, which is how a site reaches a nine-second LCP without any single file being large.
The longer version
This answer is deliberately short. If you want the full treatment, Core Web Vitals, and the order that actually reduces them covers it in about 3 minutes — free, ungated, written from client work.
Who answered this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan — fifteen live client sites, six of them stores taking real payments. These answers come from those projects rather than from a content brief. More about how I work, or ask me something directly.