What Is Largest Contentful Paint (LCP)? Complete Guide (2026)
Hi, I'm Saar - a software engineer, SEO specialist, and lecturer who loves building tools and teaching tech.
View author profile →What Is Largest Contentful Paint?
Largest Contentful Paint (LCP) is a Core Web Vital that measures how long it takes for the largest visible elementon your page — usually a hero image, banner, or main headline — to fully render in the viewport. It is one of Google's three Core Web Vitals and directly influences both your search rankings and your overall performance score.
Key Facts (TL;DR)
- Good LCP: ≤ 2.5 seconds — Google's threshold for a passing Core Web Vital.
- Needs Improvement: 2.5 – 4.0 seconds — visitors notice the delay and bounce rates climb.
- Poor: > 4.0 seconds — Google flags this as a poor user experience; rankings and conversions both suffer.
- Performance score weight: LCP accounts for approximately 25% of your overall web performance score — the single largest weighted metric.
- Core Web Vitals: LCP is one of Google's three Core Web Vitals alongside Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS). Passing all three is a confirmed ranking signal.
- Business impact: Vodafone improved their LCP by 31% and saw an 8% increase in sales. COOK reduced LCP and recorded a 7% boost in conversions (Google Web Vitals case studies).
Think of LCP the way you think of a physical store's storefront. A customer walks up — if the window display (your hero content) is still loading when they arrive, many will walk away before they see what you're selling. LCP measures exactly how long that window stays blank.
Why LCP Matters for Rankings and Revenue
LCP directly affects how visitors perceive your website's speed and quality — and how Google weighs your pages:
- Google ranking factor: LCP is part of the Page Experience signal. Pages that pass Core Web Vitals thresholds receive a ranking boost in competitive queries where quality is otherwise equal.
- Bounce rate: Google's research shows that as page load time increases from 1s to 3s, the probability of a mobile visitor bouncing increases by 32%. At 5s, it jumps to 90%.
- Conversions: Walmart found that every 1-second improvement in load time increased conversions by 2%. The Vodafone and COOK data above reinforce the pattern.
- Performance audit score: Because LCP carries 25% of the overall performance score weight, fixing it is typically the highest-ROI single action you can take to improve your audit results.
- AI search visibility: Google AI Overviews and tools like Perplexity increasingly favor fast, technically sound pages when selecting sources to surface. Slow LCP can reduce crawl frequency and citation likelihood.
What Elements Count as the LCP Element?
The browser identifies the largest element visible in the viewport at the time of rendering. LCP tracks the following element types:
- <img> elements — hero images, product photos, banner images.
- <image> inside <svg> — SVG-embedded images.
- Poster images on <video> elements — the thumbnail shown before a video plays.
- Elements with a CSS background-image — large background images that are the dominant visual.
- Block-level text elements — <h1>, <p>, <div> with substantial text, when text is the largest element.
What does not count: navigation menus, headers, footers, sidebars, and images below the fold are excluded. The LCP element can change as content loads — the browser reports the largest element at the final stable state.
| Website Type | Typical LCP Element | Primary Optimization |
|---|---|---|
| E-commerce | Hero banner or product image | Image compression + responsive serving + CDN |
| Blog / News | Featured article image or headline | Image optimization + preload + fast hosting |
| SaaS / Business | Hero section image or H1 text block | Inline critical CSS + preload hero asset |
| Portfolio | Showcase image | Balance image quality vs. file size; use AVIF/WebP |
| Landing Page | Hero image or primary CTA block | Minimal render-blocking resources; preload hero |
How to Check Your LCP Score
LCP is measured in two ways: lab data (simulated, controlled) and field data (real user measurements). Google weights field data (CrUX — Chrome User Experience Report) more heavily for rankings.
- Greadme's deep scan — surfaces your LCP score alongside all other Core Web Vitals, identifies the LCP element on each page, and pairs every issue with an AI-generated fix or one-click GitHub PR. This is the recommended starting point.
- Greadme's crawler scan — measures LCP across every indexable page on your site so you can spot which templates or sections are dragging your Core Web Vitals down.
- Google Search Console → Core Web Vitals report — shows LCP performance across your entire site based on real user data (CrUX), segmented by mobile and desktop. Free and authoritative for ranking-relevant field data.
- Browser developer tools → Performance tab — record a page load locally and look for the LCP marker in the timeline to identify exactly which element is causing the delay.
8 Proven Ways to Improve Your LCP Score
1. Optimize Your Hero Image
The LCP element is most often a hero image. Compressing it is the single highest-impact action you can take. Aim for under 200 KB for mobile and under 400 KB for desktop without visible quality loss.
How: Run images through any image-compression workflow and convert to WebP or AVIF for 25–50% smaller file sizes at equivalent visual quality. Most modern build pipelines (Next.js' <Image>, framework-native image components, etc.) handle this automatically.
2. Preload the LCP Element
Add a <link rel="preload"> tag in your HTML <head> pointing to your hero image. This tells the browser to fetch it immediately — before it discovers the image in the body — shaving hundreds of milliseconds off LCP.
For responsive images: Use imagesrcset and imagesizes attributes on the preload tag so the correct size is preloaded for each device.
3. Eliminate Render-Blocking Resources
CSS and JavaScript that block rendering delay everything, including your LCP element. Inline only the critical CSS needed for above-the-fold content; defer or async-load the rest. Move non-essential JavaScript below the fold or use defer.
4. Serve Responsive Images
Serving a 2000px desktop image to a 375px mobile device wastes bandwidth and inflates LCP on mobile — where most of your traffic is. Use srcset and sizes to serve device-appropriate image dimensions.
5. Use a Content Delivery Network (CDN)
A CDN serves your images and static assets from servers geographically close to each visitor, reducing network transfer time. For image-heavy sites, a CDN alone can improve LCP by 30–60% for distant users.
6. Improve Server Response Time (TTFB)
LCP cannot start until the browser receives the first byte of HTML. If your Time to First Byte (TTFB) is slow (> 600ms), your LCP will be slow regardless of how well you optimize images. Use server-side caching, upgrade hosting, or switch to edge rendering.
7. Lazy-Load Below-the-Fold Images (Not the LCP Element)
Apply loading="lazy" to images that are not in the initial viewport. This frees up bandwidth for the LCP element to download faster. Do not lazy-load the LCP element itself — that is one of the most common causes of poor LCP scores.
8. Reduce Third-Party Script Impact
Analytics trackers, chat widgets, and social embeds compete with your LCP element for main-thread time and network bandwidth. Audit all third-party scripts; defer or remove those not critical to the initial page view.
Common LCP Problems and Fixes
Problem: Hero Image Takes 4+ Seconds to Load
What's happening: The image is uncompressed, not preloaded, or being served from a slow origin without a CDN.
Fix: Compress to WebP/AVIF, add a preload hint in <head>, and serve via CDN. These three changes together typically cut image LCP by 40–60%.
Problem: LCP Element Has loading="lazy"
What's happening: The LCP image was incorrectly given lazy loading, causing the browser to delay fetching it until it enters the viewport — which is too late.
Fix: Remove loading="lazy" from the LCP element. Only apply lazy loading to images below the fold.
Problem: LCP Varies Dramatically Between Visits
What's happening: Inconsistent server response times, no caching, or the LCP element is loaded dynamically via JavaScript after page paint.
Fix: Enable server-side caching, use a CDN, and ensure the LCP element is present in the initial HTML — not injected by JavaScript after load.
Problem: Mobile LCP Much Worse Than Desktop
What's happening: The same large desktop image is being served to mobile users, and mobile connections amplify the file size penalty.
Fix: Implement responsive images with srcset so mobile devices receive a proportionally smaller image. A 400px-wide image for mobile should be far smaller than the 1600px desktop version.
FAQ
What is a good LCP score?
Google defines a good LCP as 2.5 seconds or less. Scores between 2.5s and 4.0s "need improvement," and anything above 4.0s is considered poor. These thresholds apply to the 75th percentile of real-user page loads (field data), not just lab measurements.
Is LCP a direct Google ranking factor?
Yes — LCP is one of Google's three Core Web Vitals, which became a confirmed ranking signal in June 2021 via the Page Experience update. Google uses the 75th-percentile field data from the Chrome User Experience Report (CrUX) — real user measurements, not synthetic lab scores — for this ranking signal.
What is the difference between LCP and FCP?
First Contentful Paint (FCP) measures when any visible content first appears — even a small logo or spinner. LCP measures when the largest meaningful element finishes rendering. FCP tells you when the page starts to look alive; LCP tells you when the main content is actually usable.
Why does LCP account for 25% of the performance score?
Most modern performance audits weight LCP most heavily because perceived load speed — how quickly the primarycontent is visible — correlates most strongly with user satisfaction and business outcomes in Google's research. The other weighted metrics (TBT, FCP, Speed Index, CLS) each measure a different facet of the experience.
Does LCP affect how AI search engines like ChatGPT and Perplexity rank my site?
Indirectly, yes. AI-powered search engines like Perplexity and Google AI Overviews tend to cite pages that are already ranking well in traditional search — and LCP is part of that ranking signal. Additionally, slow pages are crawled less frequently by AI bots (GPTBot, PerplexityBot), which can reduce how current your content appears in generative results. A fast LCP supports both visibility vectors.
Can JavaScript frameworks cause bad LCP?
Yes. Client-side rendered apps (React, Vue, Angular) that inject the LCP element via JavaScript after the initial HTML is parsed often have poor LCP because the browser can't discover or preload the element early. Server-side rendering (SSR) or static generation (SSG) ensures the LCP element is present in the initial HTML, which is a prerequisite for a fast LCP.
How do I find out which element on my page is the LCP element?
Run a Greadme deep scan and the report will identify the LCP element on each audited page along with its load timing. For local debugging, open your browser's developer tools, go to the Performancetab, record a page load, and look for the "LCP" marker in the timings row — clicking it highlights the element in the DOM.
Conclusion
LCP is the single most weighted metric in any modern performance score and a confirmed Google ranking factor. Passing the ≤ 2.5s threshold typically requires tackling three things together: compressing and preloading your hero image, eliminating render-blocking resources, and ensuring fast server response times (TTFB). Get those right and the rest of your Core Web Vitals usually follow.
The business case is clear — Vodafone's 31% LCP improvement drove an 8% sales lift. Run a Greadme deep scan to identify your LCP element on every page, then work through the optimizations above in order of impact.