Investigate a slow LCP

Do not start by compressing every image. First identify the LCP element and find where its time went.

An LCP resource such as a hero image can be delayed in four broad places:

1. The first HTML response arrives late.
2. The browser discovers or prioritizes the resource late.
3. The resource takes a long time to transfer.
4. The resource is ready, but rendering is delayed.

Each delay has a different fix. Server and connection work affect the first response. A hero URL hidden behind client-side rendering or a stylesheet is discovered later than an <img> in initial HTML. An oversized file increases transfer time. Long JavaScript, styles, fonts, or hidden content can delay the paint after the bytes arrive.

Use DevTools to build an evidence chain:

1. Record a fresh load in the Performance panel and select the LCP marker.
2. Identify the element and, if applicable, its resource URL.
3. Find that request in Network and inspect its start time, priority, initiator, and duration.
4. Compare the request’s completion with the LCP time.

If the request starts late, improve discovery or priority. If it transfers slowly, reduce bytes or improve delivery. If it finishes early but LCP remains late, investigate main-thread and rendering work instead.

Run a small experiment by temporarily replacing the LCP image with a tiny local file. If LCP barely changes, image transfer was not the dominant cause. Revert the experiment and optimize the delay the trace actually shows.