Largest Contentful Paint is the time until the biggest image or text block in the visible part of the page has been drawn. Google counts 2.5 seconds or less as good, for 75% of real visits. A slow LCP means visitors stare at an empty or half-built page.
Find the LCP element
Run the page in PageSpeed Insights or Lighthouse. Under the diagnostics, Largest Contentful Paint element names it, usually a hero image, a product photo or a large heading. Everything below is about getting that one element on screen sooner.
Find which part is slow
LCP breaks down into four parts. Lighthouse and the Chrome DevTools Performance panel show them:
| Part | What it is | If it is large |
|---|---|---|
| Time to first byte | Until the HTML starts arriving | Server or hosting is slow |
| Resource load delay | From the first byte until the browser starts loading the LCP image | The image is discovered late |
| Resource load duration | Downloading the image | The image is too heavy |
| Element render delay | From downloaded to drawn | Scripts or styles block rendering |
Fixes for each part
Slow server (TTFB). Cache HTML pages (a page cache or CDN), upgrade slow shared hosting, reduce slow database queries. On WordPress, a page cache plugin or host-level caching usually helps the most.
Late discovery. The browser should find the LCP image in the HTML, not after running JavaScript or reading CSS:
- Use a normal
<img>rather than a CSS background or a JavaScript slider for the main image. - Do not lazy-load it. Add
fetchpriority="high". - If it must be a background, preload it:
<link rel="preload" as="image" href="hero.avif" fetchpriority="high">.
Heavy image. Serve it at the size it is shown (with srcset), in WebP or AVIF, and compressed. A 2,000-pixel-wide image on a 400-pixel phone screen is a common cause.
Render delay. Large CSS files and scripts in the <head> block drawing. Inline the critical CSS, defer non-essential scripts, and remove scripts that hide the page until they run (some A/B testing tools do this).
Platform notes
WordPress: the hero image often comes from a page builder slider; replace it with a static image block on mobile. Check that your optimisation plugin does not lazy-load the first image.
Shopify: themes usually set image sizes well; LCP problems often come from apps that inject scripts. Remove apps you no longer use, and check the theme's hero section settings.
How to check that it worked
- Lighthouse shows a lower LCP and a smaller value for the part you worked on.
- Field data in PageSpeed Insights and Search Console improves over the next four weeks (28-day window).
What SignalCrawler checks here
The audit runs Lighthouse on representative pages of each template, measures LCP in its own browser pass, shows real-user Core Web Vitals where Google has data, and reports the causes it can see: a lazy-loaded LCP image, heavy and legacy-format images, render-blocking files, unused JavaScript and CSS, slow server responses and third-party scripts.