Make your main content appear faster (LCP)

Get the largest element on screen painted within 2.5 seconds on mobile.

1–2 hours

why this matters

LCP is when the page looks usable. Past 2.5 seconds bounce rate climbs sharply, and it is a Google ranking signal on top of that.

1
Identify the LCP element
Run PageSpeed Insights or Chrome DevTools' Performance panel — both name the exact element. It is almost always the hero image or headline.
2
Preload it and never lazy-load it
If it's an image, load it eagerly with high priority and preload it in the head. Lazy-loading your hero image is the single most common cause of a bad LCP.
```
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
<img src="/hero.webp" width="1200" height="600" fetchpriority="high" alt="..." />
```
3
Shrink the image
Serve WebP or AVIF, size it to the largest space it actually occupies, and provide srcset so phones don't download a desktop-sized file. A hero image should be well under 200KB.
4
Remove render-blocking resources from the head
Inline the small amount of CSS needed for the top of the page and load the rest asynchronously. Defer every script that isn't required to paint.
```
<script src="/app.js" defer></script>
```
5
Preconnect to the origin serving it
If the LCP image or font comes from another domain, preconnect so DNS, TLS and TCP happen in parallel with parsing.
```
<link rel="preconnect" href="https://cdn.example.com" crossorigin />
```