LCP measures how long it takes the largest visible element, usually a hero image or heading, to finish loading. Google's threshold for a good mobile LCP is 2.5 seconds. The most common fix is compressing or resizing the largest image on the page.
Why it matters
LCP is one of Google's Core Web Vitals and a confirmed part of the page experience signal. A slow LCP can affect ranking, and it is also the part of "site speed" a visitor actually notices: how long they stare at a mostly blank page.
LCP is measured on mobile, on a throttled connection, which is usually the worst-case and most common scenario for real visitors.
How AuditCrow checks this
AuditCrow runs a real PageSpeed/Lighthouse measurement against the page on a simulated mobile connection and reads the LCP timing back, alongside the element Lighthouse identifies as the LCP candidate.
How to fix it
- 1Identify the LCP element. It is usually a large hero image, a background image set in CSS, or a large heading rendered after a web font loads.
- 2If it is an image: compress it (tools like Squoosh or TinyPNG), serve it in a modern format such as WebP or AVIF, and size it to the space it actually occupies rather than shipping a much larger original.
- 3Avoid lazy-loading the LCP image itself. Lazy-loading is for images further down the page; applying it to the very first visible image delays the one metric you are trying to improve.
- 4If the LCP element is text, check whether a web font is blocking render. `font-display: swap` (or preloading the font) lets text show in a fallback font immediately rather than waiting.
- 5In WordPress, an image-optimisation plugin (ShortPixel, Smush) or a caching plugin with image handling covers most of this. Check the theme is not loading a full-resolution header image at a smaller display size.
- 6Re-run a real PageSpeed test after each change; lab scores can vary run to run, so look for a consistent improvement rather than a single reading.
Fix it on your platform
How to fix it on WordPress
WordPress core
- Update to WordPress 6.3 or later. It marks the image most likely to be the LCP with fetchpriority="high" and doesn't lazy-load it.
- Use a normal Image block for the hero, not a page-builder background or slider, so WordPress can detect it.
- Check your theme or a caching plugin isn't adding loading="lazy" to the hero.
Source: Image performance enhancements in WordPress 6.3 · Last checked
Modern Image Formats plugin
Where: Settings > Media
- Install the free Modern Image Formats plugin from the WordPress Performance Team.
- Go to Settings > Media and choose AVIF or WebP in the Modern Image Formats section.
- Re-upload the hero image. Only new uploads are converted.
Source: Modern Image Formats · Last checked
How to fix it on Shopify
Where: Online Store > Edit theme
- Upload one hero image at a sensible size. Shopify serves WebP or AVIF automatically, so there's no need to convert it.
- In Online Store, click Edit theme and select the slideshow or image banner section holding the hero.
- Set Height to Adapt to first image where your theme offers it, and keep the hero in the first section on the page.
Note: Remove any lazy-loading app or script that delays images at the top of the page.
Source: Theme images · Last checked
How to fix it on Wix
- Swap any video background in the top section for a still image. Wix says video backgrounds slow the first load.
- Upload the hero as a normal image. Wix resizes it and converts it to AVIF on the live site.
- Keep the first screen simple: text, buttons and the hero image, without extra video or heavy effects.
Source: Site Performance: Optimizing Site Media · Last checked
How to fix it on Squarespace
- Resize the hero to between 1500px and 2500px wide before uploading.
- Compress it to 500 KB or less.
- Upload it as .jpg, .png or .webp. Squarespace serves WebP automatically, so leave that option on.
Note: Avoid animated GIFs and very large galleries on the same page.
Source: Reducing your page size for faster loading · Last checked
How to fix it on Webflow
Assets panel
Where: Assets panel > Expand Assets panel
- Keep a copy of the original hero file: conversion replaces it and can't be undone.
- Open the Assets panel, click Expand Assets panel and tick the hero image.
- Choose AVIF or WebP, click Compress, then publish.
Note: Don't convert your social sharing (OpenGraph) image: AVIF and WebP aren't supported there.
Source: Image conversion tool · Last checked
Image settings
Where: Element settings panel > Image settings
- Select the hero image and open the Element settings panel.
- Under Image settings, set loading behaviour to Eager. Keep Lazy for images further down.
- Publish, then re-test the page.
Source: Image · Last checked
How to fix it on any other website
- Make sure the hero is a normal image in the page HTML, not one added later by JavaScript.
- Remove loading="lazy" from the hero image and add fetchpriority="high".
- Save it as WebP or AVIF, compressed, at the size it's displayed.
Note: fetchpriority is a hint, so it won't help if the image is hidden behind JavaScript or lazy-loading.
Source: Optimize Largest Contentful Paint · Last checked
Related terms
Related checks
Want to see whether your own site passes this check, and everything else?