Loadzen

← All articles

WordPress7 min read

How to Fix Largest Contentful Paint (LCP) on WordPress

LCP failing on your WordPress site? Here is a practical guide to diagnosing and fixing the most common causes — images, fonts, and slow server response.

What is Largest Contentful Paint?

Largest Contentful Paint (LCP) measures how long it takes for the largest visible element in the viewport to finish loading. Google considers anything under 2.5 seconds good. Above 4 seconds is poor.

On WordPress sites, LCP is almost always one of three things: a hero image, a large text block, or a banner rendered by a page builder.

The most common WordPress LCP causes

1. Unoptimized hero image

The hero section is usually the largest element above the fold. If you are using a full-width JPEG at 2–4 MB, LCP will be slow regardless of your hosting.

Fix:

  • Convert hero images to WebP. Tools like Squoosh, ShortPixel, or Imagify handle this in bulk.
  • Serve the image at the correct display size rather than scaling it down with CSS.
  • Add `fetchpriority="high"` to the hero `<img>` tag so the browser downloads it before other assets.
  • Remove `loading="lazy"` from above-the-fold images — lazy loading delays the LCP element.

    • 2. Render-blocking resources delaying image discovery

    If CSS or JavaScript files load before the browser can discover your hero image, LCP suffers even if the image itself is small.

    Fix:

  • Use a caching plugin (LiteSpeed Cache, WP Rocket, or W3 Total Cache) to eliminate render-blocking resources.
  • Inline critical CSS for above-the-fold content so the page starts rendering immediately.
  • Defer non-critical JavaScript with the `defer` or `async` attribute.

    • 3. Slow server response (TTFB)

    If Time to First Byte is above 600ms, everything downstream — including LCP — will be delayed.

    Fix:

  • Enable server-side page caching. Most WordPress caching plugins do this.
  • Add an object cache (Redis or Memcached) to reduce database queries.
  • Use a CDN (Cloudflare, BunnyCDN) so visitors load assets from a server close to them.
  • If TTFB remains high after caching, consider upgrading hosting.

    • 4. Late-loaded fonts causing text LCP to delay

    If your LCP element is a large heading that uses a custom font, font loading can push LCP past the threshold.

    Fix:

  • Preload your primary font: `<link rel="preload" as="font" href="/fonts/your-font.woff2" crossorigin>`
  • Use `font-display: swap` so text renders immediately in a fallback font while the custom font loads.
  • Limit font variants — every weight and style is a separate download.

    • How to measure your WordPress LCP

    Run a free speed check with Loadzen to see your current LCP score alongside LCP, INP, and CLS in one view. The fix plan tells you which issue to address first based on impact.

    Google PageSpeed Insights and Search Console's Core Web Vitals report also show field data — what real visitors experience, not just a lab snapshot.

    Summary

    Most WordPress LCP problems come down to four root causes: a large unoptimized hero image, render-blocking assets, slow server response, and delayed font loading. Fix these in order of measured impact and retest after each change.

    Check your own site

    Run a free speed check with Loadzen and get a prioritized fix plan for your specific platform.

    Run free speed check