LCP Checker and Element Finder

A page-level LCP value tells you when the largest visible content rendered, but it does not tell you what that content was. LCP Finder highlights the reported element in a screenshot and provides its selector, element type, rendered dimensions, and resource details when available.

The LCP element is often a hero image, banner, product image, article heading, or large text block. Visual confirmation prevents wasted work on a resource that looks important in source code but was not actually the largest eligible element in the tested viewport.

Mobile, tablet, and desktop layouts can select different LCP candidates. Responsive images may use different source files, navigation can change height, text can wrap into a larger area, and a component may move above or below the fold at a breakpoint. The tool runs three viewport profiles so these differences are visible in one report.

Compare the selected element, screenshot, timing, resource URL, and transfer size for each profile. A fast desktop result does not rule out a mobile discovery delay or an oversized image downloaded by a smaller device.

Time to First Byte covers navigation until the first response byte arrives. High TTFB can delay every later discovery, so review origin processing, redirects, cache status, CDN placement, and network latency. The resource load delay is the gap between TTFB and the start of the LCP resource request.

A large load delay often means the browser discovered the resource late. Put important images in the initial HTML, avoid relying on client-side JavaScript or a late stylesheet to reveal them, do not lazy load the LCP image, and use preload or fetchpriority only when the request is genuinely critical.

Resource load duration measures the transfer of an image or other external LCP resource. Resize oversized assets, choose an efficient format such as AVIF or WebP, configure compression and caching, and serve the resource close to users. A responsive srcset helps each viewport download an appropriate file instead of the largest original.

Element render delay is the time between resource completion and the final paint. Render-blocking CSS, web fonts, long JavaScript tasks, hydration, animations, and hidden containers can all extend this phase. For stylesheet bottlenecks, the Critical CSS Generator can help you test a smaller above-the-fold CSS payload.

Start with the phase that consumes the most time. A faster image codec will have limited effect when the request starts several seconds late, while a preload will not solve a slow origin or a long render delay. Record the baseline element and timing breakdown, make one meaningful change, then rerun the same viewport.

Watch for side effects. Replacing a hero can make a heading become the new LCP candidate, and aggressive loading priority can compete with CSS, fonts, or other critical resources. The goal is a faster user-visible result, not simply a faster individual request.

Lab tests are reproducible and expose the element, resource, and timing phases for a specific run. Field LCP represents real Chrome users across devices, locations, cache states, and network conditions over time. Field data is the better indicator of broad user impact, while lab data is usually more actionable during development.

Check the URL with the Core Web Vitals Checker to review Chrome UX Report data, diagnose the element here, deploy the optimization, and monitor whether the 75th percentile improves as new field data arrives.