How to Fix Largest Contentful Paint (LCP) - The Plain English Guide
by Christopher Welshgeneral2501 wordsHow to Fix Largest Contentful Paint (LCP) - The Plain English Guide
I've audited hundreds of small business websites, and if there's one Core Web Vital that consistently causes headaches, it's Largest Contentful Paint. CLS (layout shift) can often be fixed with a one-line change. INP (responsiveness) usually needs some JavaScript tidying. But LCP? That can require server upgrades, hosting changes, or even rebuilding how your page renders.
Let me walk through what LCP is, what makes it slow, and the fixes that work. If you're new to Core Web Vitals, read my Core Web Vitals Explained guide first.
What Is Largest Contentful Paint?
Largest Contentful Paint measures the time from when a user navigates to your page until the largest element visible on screen finishes loading. Think of it as the answer to: "when does the user actually see the main content?"
The largest element is usually one of these:
- A hero image at the top of the page
- A large headline
- A background image banner
- A big block of text
It's whatever takes up the most space in the viewport when the page loads. Google chose this metric because the largest element is the one the user's eye is drawn to first. If that element appears quickly, the page feels fast. If it takes ages, the user thinks your site is broken.
LCP is measured in seconds, and Google evaluates it using the 75th percentile of real user data from the Chrome User Experience Report (CrUX). If 25% of your visitors see a slow LCP, your site fails.
What Counts as a Good LCP Score?
Google sets clear thresholds for LCP, and these have been stable since the metric launched in 2020:
| Rating | LCP Time | |--------|----------| | Good | Under 2.5 seconds | | Needs improvement | 2.5 to 4 seconds | | Poor | Over 4 seconds |
These thresholds apply to the 75th percentile across mobile and desktop, but Google reports them separately. Mobile is almost always the problem child because phones have slower CPUs, less memory, and slower network connections.
I've seen small business sites with LCP times of 8, 12, even 15 seconds on mobile. One plumber's site I audited last month had a 6.2MB hero image served as a JPEG with no compression. That single image dragged their LCP to 9.3 seconds. We got it down to 1.8 seconds by the end of the week.
If you want to understand where LCP fits in the broader Lighthouse scoring system, check out my Lighthouse score guide.
What Causes Slow LCP?
Before you can fix LCP, you need to know what's causing it. In my experience auditing sites, here are the culprits in rough order of how often I see them.
1. Large unoptimised images (the most common cause)
This is the number one reason for slow LCP, by a wide margin. Someone uploads a 4MB photo straight from their phone or a stock library, drops it into the page as the hero image, and wonders why the site crawls.
The browser has to download that entire file before it can paint it. A 4MB image on a 4G mobile connection takes several seconds just to download, never mind decode and render. I see this on roughly 70% of the sites I audit.
2. Slow server response times (TTFB)
TTFB stands for Time to First Byte. It measures how long your server takes to start sending data back to the browser after receiving a request. If your server takes 2 seconds just to respond, you've already burned most of your LCP budget before the browser has downloaded a single image.
Common causes include cheap shared hosting, heavy database queries, no caching, and plugins that run on every page load. WordPress sites on budget hosting are particularly prone to this. Google says your TTFB should be under 0.8 seconds.
3. Render-blocking CSS and JavaScript
Before the browser can display anything, it needs to parse your CSS and JavaScript. If you have large CSS files or scripts in the <head>, the browser has to download, parse, and execute them before it can render content.
This is common on WordPress and Wix sites that load dozens of plugin scripts on every page. I audited one site that loaded 14 CSS files and 22 JavaScript files in the head, most of which weren't needed for the initial page view.
4. Client-side rendering
If your site uses a JavaScript framework like React, Vue, or Angular, the browser might receive a nearly empty HTML file and build the page with JavaScript. The user sees a blank screen until the JavaScript finishes downloading, parsing, and rendering. This is less common for small business sites, but some marketing agencies build everything in React without server-side rendering, and the result is a page that feels blank for several seconds.
5. Web fonts delaying text
When you use a custom web font, the browser sometimes waits for the font file to download before rendering text. If your LCP element is a large headline using a custom font, and that font file is slow to load, your LCP suffers. People optimise their images, upgrade their hosting, and still see slow LCP because a 300KB font file is blocking the headline.
How to Measure LCP
You can't fix what you can't measure. Here are the three tools I use when auditing LCP for clients.
PageSpeed Insights
This is the one I recommend to every business owner. Go to pagespeed.web.dev, type in your URL, and hit Analyze. You'll get lab data (a simulated Lighthouse test) and field data (real user data from CrUX). The field data is what Google uses for rankings. Look for the LCP value in the "Discover what real users are experiencing" section.
Lighthouse
Lighthouse is the engine behind PageSpeed Insights, but you can also run it in Chrome. Open your site, right-click, select Inspect, go to the Lighthouse tab, and generate a report. It tells you which element is your LCP target, how long each phase of loading takes, and specific opportunities to improve. My Lighthouse score guide breaks down what the overall scores mean.
Google Search Console
Search Console shows you field data for all your pages at once. Go to the Core Web Vitals report, and you'll see which URLs have poor LCP, which need improvement, and which are passing. This is the tool for monitoring trends over time. I check it monthly for my own site and for clients on ongoing plans.
If you want the full picture of how slow sites hurt your business, read how slow websites lose customers. The conversion data is sobering.
Practical Fixes for LCP
Now for the part you came for. Here are the fixes I apply, ordered roughly by how much impact they typically have.
Compress images and serve WebP or AVIF
This is the fix that solves LCP problems on the majority of sites I audit. Three steps:
First, resize the image to the dimensions it actually displays at. If your hero image shows at 1600 pixels wide, don't upload a 4000-pixel photo. The browser doesn't need those extra pixels.
Second, compress the image. Use tools like Squoosh, TinyPNG, or ImageOptim. Aim for a file size under 200KB for most hero images. Large banners might go up to 500KB, but if you're over 1MB, you've got work to do.
Third, serve modern image formats. WebP produces files 25-35% smaller than JPEG at the same quality. AVIF is even better, at 50% smaller. Most modern browsers support both.
If you're on WordPress, plugins like ShortPixel or WebP Express handle this automatically. On a static site or custom build, you can convert images with tools like cwebp or sharp.
One client's site went from a 4.1 second LCP to 1.9 seconds just by compressing their hero image from 3.8MB to 180KB and converting it to WebP. No other changes.
Use a content delivery network (CDN)
A CDN stores copies of your images and static files on servers around the world. When a user in Glasgow visits your site, the files are served from a London or Edinburgh edge server instead of your origin server in wherever-it-is.
CDNs reduce download time, which directly improves LCP. Cloudflare offers a free tier that works well for small sites. Cloudinary and ImageKit specialise in image delivery with automatic format conversion and resizing.
I put most small business clients on Cloudflare's free plan. It takes about 15 minutes to set up and typically knocks 0.5 to 1 second off LCP.
Upgrade your hosting
If your TTFB is over 0.8 seconds, hosting is likely your problem. Cheap shared hosting (the £2-5/month plans) puts your site on a server with hundreds of others competing for the same CPU and memory.
Upgrading to a VPS, managed WordPress hosting, or a platform like Netlify or Vercel can dramatically reduce TTFB. I've seen sites go from a 2.5 second TTFB to 0.3 seconds just by moving off budget shared hosting. For WordPress, I typically recommend Cloudways, Krystal, or 20i. For static sites, Vercel, Netlify, or Cloudflare Pages. All have plans under £15/month.
Defer non-critical CSS and JavaScript
If Lighthouse flags render-blocking resources, you need to defer or delay anything the browser doesn't need for the initial paint.
For CSS, identify the critical CSS needed for above-the-fold content and inline it in the <head>. The rest can be loaded asynchronously. Tools like CriticalCSS automate this.
For JavaScript, add defer or async attributes to scripts that don't need to run immediately. On WordPress, plugins like Autoptimize or WP Rocket handle this. On custom builds, you'll need to do it manually.
Be careful here. Deferring the wrong script can break interactive elements. I've seen sites where deferring jQuery broke the mobile menu. Test thoroughly after making these changes.
Preload the LCP element
If your LCP element is an image, you can tell the browser to start downloading it immediately, before it parses the rest of your HTML. Add this to your <head>:
<link rel="preload" as="image" href="/images/hero.webp" fetchpriority="high">
This gives the browser a head start on downloading the most important file on the page. It's a small change that can shave 0.3 to 0.5 seconds off LCP.
If your LCP element is text with a custom font, preload the font file instead:
<link rel="preload" as="font" href="/fonts/heading.woff2" type="font/woff2" crossorigin>
Consider server-side rendering
If your site uses client-side rendering, switching to server-side rendering (SSR) sends a complete HTML page to the browser immediately. The user sees content right away instead of staring at a blank screen.
This is a bigger change than the other fixes. It might mean rebuilding parts of your site. But if you're using React, Vue, or another framework and your LCP is stuck above 4 seconds, SSR is often the only real solution. Next.js, Nuxt, and SvelteKit all support SSR out of the box. If your agency built your site as a single-page application without SSR, ask them about migrating.
Fix web font loading
Two changes make a big difference for font-related LCP issues. Use font-display: swap in your @font-face declaration, which tells the browser to show text in a fallback font immediately and swap to your custom font once it loads. The user sees text right away instead of a blank space.
@font-face {
font-family: "MyHeading";
src: url("/fonts/heading.woff2") format("woff2");
font-display: swap;
}
Second, preload your most important font file, as shown above.
Why LCP Is the Hardest Core Web Vital to Fix
I've now written guides for all three Core Web Vitals. How to fix CLS is mostly about adding width and height attributes to images and reserving space for ads. How to fix INP is usually about removing or optimising slow JavaScript handlers. Both can often be sorted in an afternoon.
LCP is different. The fixes I've described above range from quick wins (compress an image) to significant projects (migrate to a new host, rebuild with server-side rendering). LCP involves your server, your CDN, your images, your CSS, your JavaScript, and sometimes your entire architecture.
That's why I see so many sites with green CLS and INP scores but red LCP. People fix the easy ones and give up on the hard one. Don't. LCP matters more than the other two for user perception. A page that loads its main content in 1.5 seconds feels instant. A page that takes 6 seconds feels broken, regardless of how stable the layout is.
A Real Example
I worked with a small e-commerce site in Edinburgh last year. Their LCP was 5.8 seconds on mobile. We compressed the hero image from 2.1MB to 95KB (WebP), added Cloudflare CDN, preloaded the hero image, deferred 6 non-critical JavaScript files, and upgraded from budget shared hosting to a managed plan.
Result: LCP dropped to 1.6 seconds. Bounce rate fell from 58% to 41%. Mobile conversions went up 23% over the next two months. Total cost: about £30/month for the new hosting. The image compression took an hour. The code changes took an afternoon.
Common Mistakes I See
People often try to fix LCP by doing things that don't help.
Resizing an image in CSS without actually resizing the file. Setting width: 100% on an image doesn't make the file smaller. The browser still downloads the full 4MB file. You need to resize the actual image file.
Adding a loading spinner or skeleton screen. This doesn't improve LCP at all. LCP measures when the real content appears, not when a placeholder shows up.
Installing a caching plugin and assuming everything is fixed. Caching helps with TTFB for repeat visitors, but it doesn't help first-time visitors and it doesn't fix large images or render-blocking scripts. Caching is one tool, not the whole solution.
Want Help With Your LCP?
If you've run PageSpeed Insights and your LCP is in the red, you don't have to figure this out alone. I've fixed LCP problems on hundreds of sites, from simple brochure sites to complex e-commerce builds.
Start with a free audit at wltech.pro. I'll run your site through the same tools I use for paying clients and tell you exactly what's dragging your LCP down and what it'll take to fix it. No obligation, no sales pressure.
If you want to dig deeper after that, my $150 Developer Report gives you a full technical breakdown with specific fixes. My $250 Quick Fix handles the top three issues, and full fixes start at $500.
LCP is fixable. It just takes the right diagnosis and the right changes. Let's get your site loading fast.
Related Reading
Want to check your own website?
Run our free 60-second audit to see how your site scores on speed, SEO, and AI visibility.
Start Free Audit →