Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element on your page — usually a hero image, a heading, or a background — to render. Google wants that number under 2.5 seconds on real mobile connections. It’s the Core Web Vital most WordPress sites fail, and it’s also the one you have the most direct control over.
The good news: to improve LCP in WordPress you don’t need to rebuild your theme. You need to find the exact element LCP is measuring, then attack the four things that delay it — slow server response, render-blocking resources, a heavy or late-loading image, and fonts. This guide walks through each in priority order, with the specific fixes that actually move the number.
First, find your LCP element
You can’t fix what you can’t see. Before changing anything, identify what LCP is actually measuring on your slowest page (usually a post or your homepage on mobile).
- Run the URL through PageSpeed Insights. Expand the “Largest Contentful Paint element” entry in the diagnostics — it names the exact DOM node.
- In Chrome DevTools, open the Performance panel, record a load, and look for the “LCP” marker on the timeline.
- Note whether it’s an image (hero, featured image, logo, background) or text (a large heading). The fix path differs.
Also separate lab data (a single simulated test) from field data (real visitors, shown as the Core Web Vitals assessment). Google ranks on field data, so your goal is a good 75th-percentile score across real users — not a perfect one-off lab run. For the full ranking picture, see our guide on how to pass Core Web Vitals in WordPress.
Step 1: Cut server response time (TTFB)
LCP can never be faster than the time it takes your server to send the first byte. If your Time to First Byte (TTFB) is 800ms, you’ve already burned a third of your budget before the browser sees a single pixel. This is the single highest-leverage fix for most WordPress sites.
A full-page cache is the answer. Instead of booting WordPress, running plugins, and querying the database on every request, a page cache serves a static HTML snapshot in milliseconds. On a well-cached site TTFB drops to 100–300ms, and LCP improves for free.
- Disk page cache stores HTML on your server and serves it before WordPress fully loads.
- Edge cache (via Cloudflare) serves that HTML from a data center near the visitor, cutting network latency too. You can do this on the free Cloudflare plan with modern Cache Rules.
- Object cache (Redis) speeds up the dynamic, uncacheable requests — logged-in users, carts, admin — by caching database query results. Learn more in what is a Redis object cache.
Beyond caching, TTFB is a hosting story: PHP 8.1+, a modern server stack, and a data center near your audience all matter. We cover the details in how to reduce TTFB in WordPress.
Step 2: Optimize the LCP image
If your LCP element is an image — and for most WordPress sites it is — this step matters most. A 900KB hero JPEG that loads late is the classic reason to fail LCP.
Serve modern formats and correct sizes
Convert images to WebP (or AVIF for even smaller files) and serve them at the dimensions they actually display. A 3000px-wide image squeezed into a 800px container wastes bandwidth and delays paint. See WebP vs AVIF for WordPress and our full image optimization guide.
Never lazy-load the LCP image
This is the most common self-inflicted LCP wound. Lazy loading is great for below-the-fold images, but if you lazy-load the hero, the browser deliberately delays your LCP element. Make sure your above-the-fold hero and featured image load eagerly. Our guide on lazy loading the right way explains how to exclude the hero.
Preload and prioritize it
Add fetchpriority="high" to the LCP image and, where appropriate, a preload hint so the browser fetches it immediately instead of discovering it late in the parse. Quality tools do this automatically once they detect the LCP element.
Step 3: Kill render-blocking CSS and JavaScript
Even with a fast server and a lean image, LCP stalls if the browser must download and parse a wall of CSS and JavaScript before it can paint. Every render-blocking file in the <head> pushes your LCP later.
- Critical CSS + Remove Unused CSS: inline only the styles needed to paint the visible area, and defer the rest. This lets the browser render immediately. See how to remove unused CSS.
- Delay and defer JavaScript: most scripts don’t need to run before paint. Deferring them frees the main thread. Read fix “reduce unused JavaScript”.
- Minify CSS and JS to shrink transfer size — safely, without breaking your layout. See how to minify CSS and JavaScript safely.
One caution: aggressive JS delay can break analytics and ad scripts if done carelessly. A good implementation never delays AdSense, GTM, GA4, or the Meta Pixel.
Step 4: Fix your fonts
If your LCP element is text — a big heading — the culprit is often a web font. When a font loads late, the browser either shows nothing (a “flash of invisible text”) or swaps fonts mid-paint, and LCP waits.
- Self-host Google Fonts instead of loading them from Google’s servers. This removes a third-party connection and lets the font ship from your own (cached) origin.
- Use
font-display: swapso text renders in a fallback font immediately, then swaps. - Preload the one or two font files used above the fold; drop weights and styles you don’t use.
The priority order that actually works
If you do nothing else, do these in order. Most WordPress sites see the biggest LCP gain from steps 1 and 2 alone.
- Enable full-page caching (disk + edge) to slash TTFB.
- Optimize the LCP image: modern format, correct size, eager load, high priority.
- Inline critical CSS and defer the rest; defer non-essential JS.
- Self-host and preload fonts.
- Measure field data over a few weeks and iterate.
Where an all-in-one plugin fits
Every fix above is a separate setting — and in the typical WordPress stack, a separate plugin or paid service. That’s where the tooling landscape matters. Here’s how the common options handle the LCP-relevant pieces:
| Capability | Speed of Light | WP Rocket | FlyingPress | LiteSpeed Cache |
|---|---|---|---|---|
| Disk page cache | Yes | Yes | Yes | Yes |
| Cloudflare edge cache (free plan) | Yes, via Cache Rules | Needs Cloudflare APO | Via FlyingCDN | Via QUIC.cloud |
| Redis object cache built in | Yes | No | No | Yes |
| Image optimization | Yes, on your server (WebP + AVIF) | Paid add-on (Imagify) | Yes (WebP/AVIF) | Via QUIC.cloud (metered) |
| Critical CSS + Remove Unused CSS | Yes | Yes | Yes | Yes |
| LCP + CLS tuning | Yes | Yes | Yes | Partial |
Speed of Light is built around this exact problem: it bundles disk caching, free-plan Cloudflare edge caching, a native Redis object cache, on-server WebP/AVIF image optimization, critical CSS, JS delay/defer, self-hosted fonts, and dedicated LCP and CLS tuning under one license — with an intelligent preloader and first-party Real-User Monitoring so you can watch your field LCP improve. Because it’s all-in-one, the LCP fixes coordinate: the same engine that detects your LCP image sets its priority, excludes it from lazy loading, and preloads it — no add-ons, no metered services, no separate object-cache plugin.
It won’t do everything — it doesn’t ship an image CDN, and it deliberately avoids risky JS combining — but for the LCP fundamentals it’s a genuinely strong, honest all-in-one option. If you’re weighing tools, compare the field in best WordPress caching plugins in 2026.
Frequently asked questions
What is a good LCP score for WordPress?
Under 2.5 seconds at the 75th percentile of real mobile visitors is “good.” Between 2.5 and 4 seconds “needs improvement,” and over 4 seconds is “poor.” Aim to comfortably clear 2.5s on field data, not just in a single lab test.
Why is my LCP so high even with caching?
Caching fixes TTFB, but if your LCP element is a large, unoptimized, or lazy-loaded hero image, it will still render late. The most common cause of stubbornly high LCP on a well-cached site is an oversized image that’s also being lazy-loaded. Optimize and eagerly load that element.
Does lazy loading hurt LCP?
Only when you lazy-load the LCP element itself. Lazy loading below-the-fold images helps overall performance, but the above-the-fold hero or featured image should always load eagerly with high priority.
Can I improve LCP without a plugin?
Some of it — you can compress images manually, add fetchpriority, and self-host fonts by hand. But a full-page cache, edge caching, critical CSS generation, and an object cache are impractical to do reliably without tooling. An all-in-one plugin removes the guesswork and keeps the pieces coordinated.
Is LCP the only thing I should optimize?
No. LCP is one of three Core Web Vitals, alongside CLS (visual stability) and INP (interactivity). A big, late layout shift can undo a good LCP experience, so pair this with fixing Cumulative Layout Shift for a page that both loads and behaves well.
Want the whole LCP checklist handled in one place? Speed of Light combines disk, edge, and object caching with image optimization, critical CSS, and dedicated LCP tuning under a single license — with a 14-day money-back guarantee.
