What Is Largest Contentful Paint (LCP) and How to Fix It
LCP measures when the most important visible content on a page has loaded. It is the Core Web Vital most directly tied to perceived speed - and the one most businesses fail. Here is what moves the score and how to fix it.
LCP - Largest Contentful Paint - is the Core Web Vital that measures when the largest visible content element on a page has finished loading. That element is typically a hero image, a large heading, or a video poster frame. The metric matters because it is the closest proxy for when a user perceives the page as "ready." A page that renders text quickly but has a slow hero image will have a poor LCP score even if other elements loaded fast.
Google's threshold for a "Good" LCP score is under 2.5 seconds at the 75th percentile of real user loads. Pages scoring above 4 seconds are rated "Poor" and face a measurable ranking disadvantage in search results. For context on the other Core Web Vitals, see what-is-cls and what-is-inp.
At Through The Glass Creatives, Ravve Jay diagnoses and fixes LCP issues as a standard part of every web build and performance audit. The causes are consistent and the fixes are actionable.
What Causes Poor LCP Scores
Slow Server Response Time (TTFB)
Time to First Byte is the upstream dependency that determines how quickly the browser can begin rendering anything. A slow hosting server, unoptimized database queries on a dynamic site, or a CMS without server-side caching can add 500ms-2 seconds before the browser has even received the HTML. On CDN-delivered static sites, TTFB is typically under 100ms - which is why static site generators have a structural LCP advantage over server-rendered dynamic CMSes.
Render-Blocking Resources
Stylesheets and scripts loaded in the <head> that block rendering delay LCP by preventing the browser from painting anything until those resources are fetched and parsed. Deferring non-critical JavaScript, inlining critical CSS, and removing or delaying third-party scripts are the primary levers for reducing render-blocking time.
Unoptimized LCP Image
If the LCP element is an image, its file size and format directly determine how long it takes to load. Serving a 2MB JPEG hero image where a 150KB WebP would deliver equivalent quality at a fraction of the size is one of the most common causes of poor LCP on business sites. Images should be served in WebP or AVIF format, sized to the actual display dimensions (not oversized and scaled down by CSS), and delivered from a CDN edge node close to the user.
Missing fetchpriority or Preload Directives
The browser's default resource loading order does not always prioritize the LCP element. Adding <code>fetchpriority="high"</code> to the LCP image and a <link rel="preload"> in the <head> instructs the browser to begin loading that resource earlier in the waterfall - often moving LCP by 500ms-1.5 seconds on sites where the image was previously discovered late.
How to Diagnose Your LCP Element
Open Chrome DevTools, go to the Performance tab, record a page load, and look for the "LCP" marker in the timeline. The associated element is shown in the details panel. PageSpeed Insights (pagespeed.web.dev) and the Chrome User Experience Report (CrUX) provide field data - actual LCP scores from real users - rather than lab simulations, which is what Google uses in its ranking system.
"LCP is the metric that most directly answers 'how fast does this feel?' from a user's perspective. Most LCP failures are image optimization problems, not infrastructure problems - they are fixable without a platform migration." - Ravve Jay Prevendido, TTGC
The Fix Priority Order
Identify the actual LCP element via DevTools or PageSpeed Insights before making any changes
Convert the LCP image to WebP or AVIF and size it to the actual display dimensions - this alone typically improves LCP by 30-60% on image-heavy sites
Add fetchpriority="high" to the LCP image and a matching <link rel="preload"> in the <head>
Deliver the LCP image from a CDN edge node with aggressive cache headers
Audit render-blocking scripts and defer everything non-critical to after the first paint
Get a Core Web Vitals audit for your site
Book a free Brand and Growth Assessment and see exactly how Through The Glass Creatives would approach it.
Sources
- Google, "Optimize Largest Contentful Paint" (2025)
- Web.dev, "LCP: What It Is and How to Improve It" (2025)
- HTTP Archive, "State of the Web: Core Web Vitals Report" (2025)
- Cloudflare, "Image Optimization and LCP Impact Study" (2024)
