ServicesFree AuditWorkInspirationBlogAbouthello@optimaflow.id
← All articles

Technical SEO · 2026-06-12

What Is Largest Contentful Paint and How Do You Improve It?

Largest Contentful Paint measures how fast your page's biggest element loads. Aim under 2.5s. Fix images, servers, and render-blocking code.

What Is Largest Contentful Paint and How Do You Improve It?

TL;DR

Largest Contentful Paint (LCP) is a Core Web Vital that measures how long it takes for the largest visible element on your page—usually a hero image, banner, or headline block—to fully render in the viewport. A good LCP is under 2.5 seconds; between 2.5s and 4s needs work, and over 4s is poor. Faster LCP means better rankings and lower bounce.

Google measures LCP because it reflects perceived load speed. Users don't care when your first byte arrives—they care when the main thing they came for shows up. LCP tracks that moment. It's one of three Core Web Vitals (alongside INP and CLS) that feed directly into Google's page experience signals and, increasingly, into how AI answer engines judge whether a page is worth citing.

Start by finding your LCP element and current score. Run your URL through PageSpeed Insights or the Chrome DevTools Lighthouse panel—both flag the exact element (image, text block, or video poster) causing your LCP. For real-world data, check the Core Web Vitals report in Google Search Console, which uses field data from actual Chrome users rather than lab tests. Field data is what Google ranks on.

The biggest LCP killer is usually images. Compress your hero image to WebP or AVIF, size it to the exact display dimensions (a 4000px image displayed at 800px wastes seconds), and add fetchpriority="high" to the LCP image so the browser loads it first. Never lazy-load the LCP image—lazy loading delays it. On Shopify, use the theme's responsive image tags and drop oversized third-party sliders that inject heavy assets.

Server response time matters more than most merchants think. Aim for a Time to First Byte (TTFB) under 800ms. Use a CDN like Cloudflare or Fastly so assets serve from a location near the user, enable caching, and cut slow database calls or bloated apps. On Shopify or WordPress, audit installed apps and plugins—each one that runs on page load can add hundreds of milliseconds before your LCP element even starts rendering.

Render-blocking resources are the third major cause. CSS and JavaScript in your <head> block the page from painting until they download and parse. Inline the critical CSS needed for above-the-fold content, defer or async non-essential scripts, and remove unused code. Preload key resources with <link rel="preload">—especially fonts, since a font swap can shift and delay your headline LCP.

Web fonts deserve their own fix. Add font-display: swap so text renders immediately in a fallback font instead of staying invisible, preload the specific font file your LCP text uses, and self-host fonts rather than pulling them from a third-party domain that adds an extra DNS lookup and connection.

Treat LCP as an ongoing metric, not a one-time fix. After each change, re-test in PageSpeed Insights and watch the field data in Search Console over the following 28 days—that's the rolling window Google uses. Prioritize the LCP element first, because improving it typically moves the score more than any other single change, and re-check after adding new apps, images, or theme updates.

Frequently asked

What is a good LCP score?

Under 2.5 seconds is good, 2.5–4 seconds needs improvement, and over 4 seconds is poor. Google uses the 75th percentile of your real users, so most visitors must load faster than 2.5s to pass.

What usually causes a slow LCP?

The most common causes are oversized or lazy-loaded hero images, slow server response times (TTFB over 800ms), and render-blocking CSS or JavaScript in the page head. Images are the top culprit for most sites.

Does LCP affect SEO rankings?

Yes. LCP is a Core Web Vital and part of Google's page experience signals, so a poor score can hold back rankings—especially on competitive queries where sites are otherwise evenly matched.

How do I measure LCP on my site?

Use PageSpeed Insights or Chrome DevTools Lighthouse for lab data, and the Core Web Vitals report in Google Search Console for real-user field data, which is what Google actually ranks on.

Free, concrete, yours to keep

Want this done for you — properly?

Get a free audit of your rankings and AI-answer presence. Real findings within days, no sales deck.

Get a free audit