Largest Contentful Paint is the number most site owners notice first when a Core Web Vitals report turns red, and it is often the one that refuses to move no matter how many plugins get installed. LCP is one of the three Core Web Vitals Google uses as part of its search rankings, alongside Cumulative Layout Shift and Interaction to Next Paint, so a slow LCP is not only a user experience problem. This guide walks through how to identify the element holding you back and how to fix Largest Contentful Paint on the pages that matter most.
What Largest Contentful Paint Actually Measures
LCP is a web performance indicator that measures how quickly the main content of a website becomes visible to users. It marks the rendering milestone when visitors can see the largest page element.
That definition matters because LCP is not a measure of when the entire page finishes loading. Scripts, footer widgets, tracking pixels, and chat bubbles can all still be loading while LCP has already been recorded. The metric watches a single thing: the biggest element in the visitor's viewport at the moment the page first paints. On most sites that is a hero image. On others it is a large heading, a paragraph, or a video poster frame.
Google publishes the current scoring thresholds in its Core Web Vitals documentation, and it pays to check those official numbers rather than trusting figures quoted in older articles, because the guidance has been revised over time.
Find the LCP Element Before You Change Anything
Optimizing blind is the fastest way to waste a week. The first job is naming the exact element that is being measured, because the fix for a 400 KB hero JPEG looks nothing like the fix for a heading that waits on a web font.
Tools that identify the element for you
Several tools will analyze, debug, and report on LCP for you. Google's Lighthouse audits, browser developer tools, and third party performance platforms such as DebugBear all surface the LCP element and how long it took to appear. Run the audit on a real page rather than the homepage by default, and pay attention to the mobile result since that is where most paid traffic lands.
Test before and after, every single time
Performance work is guesswork until you measure it. Check your scores locally before and after each change using Lighthouse, and keep a short log of what you altered and what it did to the number. A change that helps one page can hurt another if it competes for bandwidth with a more important resource, so verify rather than assume.
Fixing an Image-Based LCP
Images make up a large part of most websites, and they are frequently the largest element that first appears on the page. That makes them the most common LCP culprit and the most rewarding place to start.
Use modern formats and serve the correct size
Two changes deliver most of the gain here. First, use modern image formats such as WebP and AVIF instead of legacy formats. Second, serve responsive images so smaller screens download smaller files rather than scaling down a desktop sized asset. Serving the optimal image size for each viewport reduces the bytes the browser has to fetch before it can paint the hero.
Take lazy loading off the LCP image and preload it instead
Lazy loading is a common self-inflicted wound on hero images. If the largest element is set to load lazily, the browser deliberately delays it until it believes the image is near the viewport, which pushes LCP later. The recommended approach is to remove lazy loading from that element and preload it instead, so the browser starts fetching it as early as possible. Confirm the change with a local Lighthouse run before and after.
Remove image transitions and animations on the LCP element
Fade-ins, slide-ups, and other entrance animations can delay when the image is considered painted. There is documented evidence of how much this costs. One ecommerce team worked with Case-Mate to fix this issue on their website, which produced a 6 second improvement in Largest Contentful Paint. If your hero has a transition applied, test removing it and check the score.
Fixing a Text-Based LCP
When the largest element is a heading or paragraph, images are not the problem. Render-blocking stylesheets and slow fonts usually are.
Trim and defer CSS
Unused CSS still has to be downloaded and parsed before the browser paints anything. The standard remedies are to remove unused CSS, defer non-critical CSS so it loads after the main content, and minify and compress the CSS that remains. Splitting a large global stylesheet so that above-the-fold rules load first often moves LCP more than any image tweak.
Reduce web font impact
Web fonts block text from rendering in its final form, and a large heading waiting on a font file is a slow LCP by definition. Reducing web font weight, limiting the number of families and character sets you load, and loading fonts efficiently are all listed among the core LCP optimizations. Fewer fonts is almost always faster than cleverer font loading.
Reduce JavaScript Execution and Main Thread Blocking
Even a perfectly optimized hero image can be held back by JavaScript. If the main thread is busy running scripts, the browser cannot paint the largest element on time. The fix is to reduce JavaScript execution and main thread blocking time by auditing and trimming redundant or unused JavaScript, then deferring or removing anything that is not needed for the first paint. Third party tags are a frequent offender, so review what each script actually contributes before defending it.
A Practical Order of Operations
If you want the shortest path to a better score, work in this sequence and re-measure after each step.
- Identify the LCP element with a Lighthouse audit or a performance tool.
- If it is an image, remove lazy loading from that image and preload it.
- Convert the image to WebP or AVIF and serve the correct size per device.
- Strip transitions or animations applied to the LCP element and retest.
- Remove unused CSS, defer non-critical CSS, and minify what is left.
- Reduce web font weight and the number of font files loaded.
- Audit JavaScript and cut anything not required for the first paint.
- Re-run Lighthouse on mobile and desktop to confirm the improvement held.
Why This Matters for Paid Traffic
A slow LCP does not only affect organic rankings. When you are paying for every click from a Google Ads campaign, the seconds between the click and the first meaningful paint are seconds you have already funded and cannot recover. A landing page that renders its hero immediately gives visitors something to look at and something to act on, and a page that stalls simply gives them time to hit back.
FastModernSites builds fast-loading, conversion-focused websites and landing pages, and the studio works on a limited capacity model of 8 project slots per month, so each build gets proper performance attention rather than a template with a caching plugin bolted on. Core Web Vitals work also continues after launch through maintenance and support plans, because third party scripts, new campaigns, and content updates all tend to reintroduce the same problems.
Frequently Asked Questions
What causes a poor LCP score?
A poor LCP usually comes from one of four places: a slow server response, a heavy image resource that takes too long to download, lazy loading or animations delaying the LCP element, or CSS, fonts, and JavaScript blocking the main thread. The score alone will not tell you which. Use a tool to identify the element and trace the delay back to its source.
How do I find which element is my LCP element?
Run a Lighthouse audit in your browser developer tools, or use a performance monitoring platform such as DebugBear that reports LCP alongside other Core Web Vitals. These tools measure LCP and identify the element responsible. Test the actual page you care about on a mobile viewport, because the LCP element can differ between desktop and mobile layouts.
Should I lazy load my hero image?
No. Lazy loading tells the browser to defer the image until it is needed, which pushes the paint later and hurts exactly the metric you are trying to improve. The recommended approach for an LCP image is to remove lazy loading and preload it instead. Reserve lazy loading for images further down the page that are not visible on load.
Can a heading or paragraph be the LCP element?
Yes. LCP tracks the largest element in the viewport, and that element is sometimes a large heading or block of text rather than an image. When that happens, the fixes shift toward CSS and fonts: removing unused CSS, deferring non-critical CSS, minifying and compressing stylesheets, and reducing web font impact so text can render sooner.
How much can LCP actually improve?
It depends on what is wrong, but the gains can be substantial. One documented case involved fixing image transitions on an ecommerce site and produced a 6 second improvement in Largest Contentful Paint. Most sites see smaller but still meaningful results. Measure before and after with Lighthouse so you know what each change contributed rather than assuming progress.