If your site is slow to show the main image, headline, or hero block, visitors feel delay before they read a single line. LCP (Largest Contentful Paint) measures that moment: when the largest visible element appears on screen. On a business website — homepage, service landing, or product page — a high LCP often means less trust and more exits.
This article explains what LCP measures, how it relates to INP and CLS, which thresholds matter in 2026, and practical changes that improve the main paint without sacrificing design.
What LCP is and which elements count
LCP records the time until the browser paints the largest visible content element in the viewport. It is often:
- A header image or video.
- A large text block (H1 or lead paragraph).
- A CSS background image.
It does not measure the whole document — only the dominant element on the first screen. The web.dev LCP guide describes eligible elements and when the metric stops updating.
Thresholds: when your site is in the green zone
As a Core Web Vitals reference, many teams use:
- Good: 2.5 seconds or less.
- Needs improvement: between 2.5 and 4 seconds.
- Poor: above 4 seconds.
Evaluate the 75th percentile of real users (CrUX, Search Console, or Analytics with Web Vitals). A single lab run in PageSpeed helps debug but does not replace field data when traffic is steady.
LCP vs INP and CLS
Core Web Vitals cover three angles: LCP (perceived load), CLS (visual stability), and INP (interaction response). Optimising only one leaves gaps: a homepage may paint the hero quickly yet frustrate users when opening the mobile menu.
Prioritise LCP when the complaint is “the page takes ages to load” or when reports flag the main image as the LCP element on mobile.
Common causes on business websites
- Heavy hero images without compression or modern formats.
- High server response time (TTFB) on shared hosting or without cache.
- Render-blocking CSS or fonts before the headline paints.
- JavaScript delaying the main image (lazy loading misapplied to the hero).
- Misconfigured CDN or cache on first visit.
WebP and AVIF plus a well-chosen CDN often shrink the LCP element without redesigning.
How to measure LCP with accessible tools
- PageSpeed Insights: identifies the LCP element in the lab and suggests fixes.
- Chrome DevTools → Performance: timeline with an LCP mark.
- Search Console (Page experience): URL trends from real users.
- Extensions or RUM: useful to compare before/after on critical paths (home, contact, flagship product).
Pick one critical URL per business goal and test on mobile with throttled network: LCP often degrades there even when desktop looks fine.
Actions that usually improve LCP
Optimise the hero image or block
Serve the hero at real display size, not 4000 px wide. Use fetchpriority="high" on the LCP image, avoid loading="lazy" on that asset, and compress aggressively. Image optimisation is usually the highest-return first step.
Reduce TTFB and use cache
Slow HTML delays everything else. Review hosting, page cache, browser cache headers, and Brotli/Gzip compression.
Prioritise critical resources
Preload the LCP image, preconnect to font or CDN origins, and cut blocking CSS above the fold. Minification helps, but removing unused CSS on the homepage often matters more.
Control third-party scripts
Marketing tags and widgets in <head> compete with the hero. Defer non-essentials with the same discipline as third-party scripts.
Mistakes that hurt LCP quietly
- Lazy-loading the above-the-fold image.
- Loading a three-slide carousel when only one image is visible.
- Background video without a light poster frame.
- External web fonts without
font-display: swap.
Checklist before you call it done
- Is the mobile LCP element what you expect (hero, not a small logo)?
- Have you compared the 75th percentile in CrUX or Search Console after two weeks?
- Do home and key landings still pass CLS and INP on the same paths?
- Did you test on simulated 4G and a mid-range device?
Conclusion
LCP answers a simple question: “When do I see what matters on this page?” In 2026, with more mobile traffic and visual heroes on corporate sites, ignoring it gives away seconds of doubt to visitors who already came from search or ads. Measure your critical URLs, optimise the resource that defines LCP, and align server, cache, and images with the same rigour you apply to hero copy.
If you want to prioritise Core Web Vitals improvements with measurable conversion impact, AATSOFT audits key home and landing pages and proposes changes scoped to your current stack.
