LCP Explained in Plain English: What It Is, Why It Matters, and 5 Fixes That Work

By Licheo Research Team | | Technical SEO | 11 min read

Let me begin with an analogy that will make all of this clearer. Imagine you walk into a restaurant. The door opens, the hostess greets you, and you start looking for a seat. At some point -- usually a second or two after the door opened -- you catch sight of the main dining room, and you think "yes, I am here, this is the place." That moment, the moment when you perceive that you have arrived somewhere, is the human equivalent of what Largest Contentful Paint measures on a web page.

LCP is the time between when a user requests a page and when the largest visible content element finishes loading. That content element is usually a hero image, a large heading, or a prominent block of text. It is, essentially, the moment a visitor looks at your page and thinks "okay, I am here now."

This seems like a small thing until you consider what happens when it takes too long. If a user clicks your link and nothing visually meaningful appears for five seconds, most of them do not wait. They click back and go somewhere else. Google knows this. Google measures this. And Google has made LCP one of the three Core Web Vitals that factor into search ranking.

This post explains LCP in language that assumes you run a business rather than a codebase, and gives you the five fixes that solve 90% of LCP problems for small business sites. This is part of the Core Web Vitals guide hub, which covers the complete picture.

What Counts as "Largest Contentful Paint"

Before we can fix LCP, we have to understand what Google is actually measuring. The "largest contentful paint" on any given page is the moment when the biggest visible element above the fold (the part of the page visible without scrolling) finishes loading.

That element is usually one of three things:

A hero image. On most small business homepages and landing pages, the LCP element is a large photograph at the top of the page. Restaurant websites have food photography. Dentist websites have smiling patients. Contractor websites have finished work. Whatever image dominates your hero section is almost certainly your LCP element.

A large heading. On content-heavy pages (blog posts, articles, documentation), the LCP element is often a large H1 headline rather than an image. Text loads fast, so this is usually not problematic.

A block of body text. On very minimalist pages with no hero image, the first paragraph or call-to-action block might be the LCP element.

You can find your LCP element by running your page through Google PageSpeed Insights (pagespeed.web.dev) and looking at the "diagnostics" section. It will tell you explicitly: "Largest Contentful Paint element: [your image filename]." This is invaluable because it lets you focus your optimization on the exact thing that matters.

The Thresholds That Actually Matter

Google defines three performance tiers for LCP:

  • Good: Under 2.5 seconds
  • Needs improvement: Between 2.5 and 4.0 seconds
  • Poor: Over 4.0 seconds

In practice, the distinction between "Good" and "Needs improvement" is small for ranking purposes. The distinction between either of those and "Poor" is significant. If your LCP is in the "Poor" zone, Google's algorithms interpret this as a genuinely bad user experience and will factor it into your rankings.

The goal, then, is not to achieve a perfect 1.2-second LCP. The goal is to get out of the "Poor" zone and into "Good" if possible, "Needs improvement" at worst. Chasing microseconds of LCP improvement when you are already at 2.3 seconds is a waste of time -- spend those hours on content instead.

Why Mobile LCP Is Almost Always Worse

There is a point about mobile worth making before we talk about fixes. Almost every small business site has worse LCP on mobile than on desktop, and this is not a bug. Mobile devices have slower processors, slower networks, and smaller caches. A hero image that loads in 0.8 seconds on a fast home connection might take 3.5 seconds on a mobile 4G connection.

This matters because Google uses mobile-first indexing. The LCP that matters for ranking is your mobile LCP, not your desktop LCP. Always test and optimize for mobile. A site with excellent desktop LCP and poor mobile LCP is, from Google's perspective, a site with poor LCP.

Fix 1: Compress and Resize Your Hero Image

This is, by a substantial margin, the most impactful fix for most small business sites. An unoptimized hero image can be 2-4 MB in size, and every byte of that has to download before the LCP element can render. Compressing and resizing that same image to 150-300 KB can shave several seconds off your LCP.

The practical steps:

  1. Resize the image to the actual dimensions it is displayed at. If your hero image is displayed at 1920 pixels wide, the image file should be 1920 pixels wide -- not 4000 pixels wide because that is what came out of your camera. Use any image editor (Photoshop, GIMP, even Preview on Mac) or an online tool like Squoosh to resize.
  1. Compress the image to reduce file size. JPEG images should use quality settings around 70-80%; higher is imperceptibly better and dramatically larger. TinyPNG.com is the simplest online tool for bulk compression. WebP format is even more efficient than JPEG -- use it if your platform supports it (most modern CMSs do).
  1. Serve different sizes for different devices. The srcset attribute on <img> tags lets you declare multiple versions of the same image and have the browser pick the right one based on screen size. Modern image optimization plugins handle this automatically.

This one change alone often moves LCP from "Poor" to "Good" on small business sites. It is the single highest-leverage performance improvement you can make.

Fix 2: Preload Your LCP Image

Even after you compress your hero image, the browser has to discover the image before it can download it. By default, the browser finds the image only after parsing the HTML that references it, which adds a small but measurable delay.

Preloading tells the browser "start downloading this image immediately, before you even finish parsing the page." You do this with a <link rel="preload"> tag in the <head> of your HTML.

On WordPress, plugins like WP Rocket, Perfmatters, and LiteSpeed Cache have options to automatically preload the LCP image. Turn that option on.

On Shopify and other hosted platforms, the theme developer needs to add the preload tag manually -- which may or may not be feasible depending on your theme.

The impact of preloading is usually 200-500 milliseconds of LCP improvement, which is meaningful when you are trying to move from "Needs improvement" to "Good."

Fix 3: Reduce Render-Blocking CSS and JavaScript

Before the browser can render anything visible on the page, it needs to download and parse all the CSS and JavaScript that the HTML declares in the <head>. If those resources are large and slow, nothing renders -- the browser shows a blank screen -- until they finish.

This is called "render-blocking," and it is one of the quieter LCP killers. You can have a perfectly optimized hero image, and still have bad LCP, because a 500KB JavaScript bundle is blocking the render.

The fixes:

  1. Defer non-critical JavaScript. Most JavaScript does not need to load before the initial render. Tracking pixels, chat widgets, analytics, social media embeds -- none of these affect what the user sees. Add the defer or async attribute to their script tags, or load them after the page is interactive.
  1. Remove unused CSS. Modern CMS themes often include CSS for features you are not using. Tools like PurgeCSS (or plugins that use it) can identify and remove unused CSS, shrinking the render-blocking CSS you actually need.
  1. Inline critical CSS. The CSS needed to render the visible part of the page can be inlined directly into the HTML, while the rest of the CSS loads asynchronously. This is technically complex but supported by caching plugins.

For WordPress users, a good caching plugin (WP Rocket, W3 Total Cache, LiteSpeed Cache) handles most of this automatically. Enable the options and let the plugin work.

Fix 4: Upgrade Your Hosting if TTFB Is Slow

Time to First Byte (TTFB) is how long it takes for your server to respond with the first byte of HTML after receiving a request. If TTFB is slow, nothing else you do matters -- LCP cannot start until TTFB finishes.

Signs that TTFB is your bottleneck:

  • PageSpeed Insights shows TTFB consistently over 800 milliseconds
  • Your site is on cheap shared hosting (think $5/month plans)
  • Your site is geographically far from your visitors
  • Your database is slow (old WordPress site with too many plugins is a common cause)

The fix is usually to upgrade hosting. For WordPress sites, managed WordPress hosts like Kinsta, WP Engine, or Cloudways typically produce TTFB under 200 milliseconds. Shopify's own infrastructure is fast. Squarespace and Wix are adequate.

A CDN (Content Delivery Network) can also help by caching your pages at servers close to your visitors. Cloudflare's free tier does this adequately for most small business sites.

If TTFB is currently 1200 milliseconds and you move to better hosting that produces 180 milliseconds, you just saved a full second on every page load. That is the single biggest LCP improvement most badly-hosted sites can achieve.

Fix 5: Don't Lazy-Load Your LCP Image

This fix is counterintuitive, because lazy-loading is usually promoted as a performance improvement. For most images, it is. But for your LCP image specifically, lazy-loading makes things worse.

Lazy-loading means the browser delays downloading an image until it is about to be visible in the viewport. For images below the fold, this saves bandwidth and speeds up initial page load. For the LCP image -- which is, by definition, above the fold and the most important visible content -- lazy-loading delays the one thing you are trying to make fast.

The fix: check your hero image's HTML. If it has loading="lazy" attribute, remove it. Your LCP image should load eagerly (the default), not lazily.

WordPress automatically adds lazy-loading to all images since version 5.5, which has caused this exact problem on countless sites. Many WordPress themes (and plugins) now include logic to exclude the first image on a page from lazy-loading, but you should verify this is happening correctly on your site.

The Order to Apply These Fixes

If you are starting from a "Poor" LCP and want to make rapid progress, apply the fixes in this order:

  1. Compress/resize hero image (biggest impact, smallest effort)
  2. Remove lazy-loading from LCP image (zero effort, sometimes significant impact)
  3. Preload LCP image (easy with the right plugin)
  4. Defer non-critical JavaScript (medium effort, usually significant impact)
  5. Upgrade hosting (bigger commitment, only if TTFB is the bottleneck)

After applying the first three fixes, re-test and see where you are. You may have already moved from "Poor" to "Good" and saved yourself the harder work. If you are still stuck, proceed to the next fixes.

Testing Your Improvements

Use Google PageSpeed Insights (pagespeed.web.dev) for immediate feedback after changes. Pay attention to the "Mobile" scores, not desktop.

Use Google Search Console's Core Web Vitals report for the long-term picture. This shows field data from real users, which is what Google actually uses for ranking. It takes about 28 days to reflect changes fully.

Do NOT obsess over day-to-day fluctuations in PageSpeed Insights. Lab data varies based on network conditions, and small variations are normal. The trend over weeks matters; the individual reading does not.

When LCP Is Not Your Real Problem

One last point. If your LCP is already in the "Good" zone, stop optimizing it. Go work on content, or on INP, or on CLS, or on anything else. The temptation to chase a perfect LCP score is real and the payoff is zero once you are already fast enough. Google does not reward you for being 1.2 seconds instead of 2.3 seconds. Both count as "Good."

For the full Core Web Vitals picture, see the Core Web Vitals guide hub, and specifically our post on how to measure Core Web Vitals without installing anything to confirm your changes are actually working.

And as always, if you want to know whether LCP is currently your biggest problem (or whether something else on your site deserves attention first), run a free audit with Licheo. It will show you where performance sits in the full list of things worth fixing. Thirty seconds, no account needed.