What Is Largest Contentful Paint (LCP) and Why Should You Care?
Largest Contentful Paint, commonly referred to as LCP, is one of Google’s three Core Web Vitals. It measures how long it takes for the largest visible element in the viewport to fully render when a user first lands on your page.
That largest element is usually a hero image, a large heading block, a video poster, or a background image sitting above the fold. In simple terms, LCP tells you how quickly your visitors see the main content of your page.
Google considers a good LCP score to be 2.5 seconds or less. Anything between 2.5 and 4 seconds needs improvement, and anything above 4 seconds is rated poor.
| LCP Time | Rating | What It Means |
|---|---|---|
| 0 – 2.5 seconds | Good | Users perceive the page as fast and responsive. |
| 2.5 – 4.0 seconds | Needs Improvement | Noticeable delay; users may start losing patience. |
| Above 4.0 seconds | Poor | High bounce risk and potential ranking penalties. |
Because LCP directly influences both search engine rankings and user experience, improving it should be a top priority for any website owner or designer in 2026.
What Causes a Poor LCP Score?
Before jumping into solutions, it helps to understand the most common culprits behind a slow LCP. From a design and front-end perspective, these are the usual offenders:
- Unoptimized hero images that are too large, served in outdated formats, or not properly sized for the device.
- Render-blocking web fonts that delay text from appearing until the font file is fully downloaded.
- Heavy above-the-fold elements like sliders, carousels, auto-playing videos, or complex CSS animations.
- Unused or bloated CSS and JavaScript that blocks the browser from rendering visual content.
- Slow server response times (TTFB) that delay everything before rendering even begins.
- No use of a CDN, meaning assets travel long distances to reach users in different regions.
- Lazy loading applied to the LCP element, which ironically delays the one thing you need loaded first.
Now let’s walk through exactly how to fix each of these issues.
Step 1: Identify Your LCP Element
You cannot improve what you have not measured. The first thing you need to do is figure out which element on your page is being flagged as the LCP element.
How to Find It
- Open Google Chrome DevTools (press F12 or right-click and select “Inspect”).
- Go to the Performance tab.
- Click the reload button to record a page load.
- Look for the LCP marker in the timeline. It will highlight the element responsible.
You can also use Google PageSpeed Insights or Lighthouse. Both tools will tell you exactly which element is your LCP and give you a time measurement.
Common LCP elements include:
- Hero images or background images
- Large
<h1>text blocks - Video poster images
<img>elements inside carousels or sliders
Once you know the element, you can target your optimization efforts precisely.
Step 2: Optimize Your Hero Image
In the vast majority of cases, the LCP element is a hero image. This single fix often delivers the biggest improvement.
Serve Modern Image Formats
If you are still serving hero images as PNG or JPEG, you are leaving performance on the table. Switch to WebP or AVIF formats. These modern formats offer significantly better compression without visible quality loss.
| Format | Avg. File Size Reduction vs JPEG | Browser Support (2026) |
|---|---|---|
| WebP | 25-35% smaller | Universal |
| AVIF | 40-50% smaller | Widely supported |
| JPEG | Baseline | Universal |
| PNG | Often 2-5x larger | Universal |
Use the <picture> element to serve AVIF with a WebP fallback:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Description" width="1200" height="600">
</picture>Serve Responsive Images
Do not serve a 2400px wide image to a mobile device with a 400px viewport. Use the srcset and sizes attributes to let the browser pick the right size:
<img
src="hero-800.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
alt="Hero image description"
width="1200"
height="600"
>Always Set Width and Height Attributes
Including explicit width and height attributes on your <img> tags prevents layout shifts and helps the browser allocate space before the image downloads.
Never Lazy Load the LCP Image
This is a very common mistake. If your hero image is the LCP element, do not add loading="lazy" to it. Lazy loading tells the browser to wait before loading the image, which is the opposite of what you want for LCP. Instead, use eager loading (the default) and consider adding a preload hint.
Step 3: Preload Your LCP Element
A preload link tells the browser to start downloading a critical resource as early as possible, even before it encounters it in the HTML.
Add this to your <head>:
<link rel="preload" as="image" href="hero.webp" type="image/webp" fetchpriority="high">The fetchpriority="high" attribute gives the browser an extra signal that this resource is critical. This combination of preload and high fetch priority is one of the single most effective ways to improve LCP.
If your LCP element is a CSS background image, preloading becomes even more important because the browser normally will not discover that image until the CSS file has been fully parsed.
Step 4: Eliminate Render-Blocking Web Fonts
Custom web fonts are a common design choice, but they can severely impact LCP when the largest element is a text block. If the font file has not loaded yet, the browser may display invisible text (known as FOIT, Flash of Invisible Text) until it arrives.
Actionable Font Fixes
- Use
font-display: swapin your@font-facedeclarations. This tells the browser to show a fallback system font immediately and swap to the custom font once it loads. This ensures your text is visible right away.@font-face { font-family: 'CustomFont'; src: url('customfont.woff2') format('woff2'); font-display: swap; } - Preload your primary font file so the browser starts downloading it immediately:
<link rel="preload" as="font" href="customfont.woff2" type="font/woff2" crossorigin> - Use WOFF2 format only. It offers the best compression for web fonts. There is no need to serve TTF or OTF files to modern browsers in 2026.
- Limit the number of font weights and styles. Every additional weight (bold, italic, light, etc.) is another file to download. Only load what you actually use.
- Consider self-hosting your fonts instead of loading them from Google Fonts or other third-party servers. Self-hosting eliminates the extra DNS lookup and connection time.
Step 5: Simplify Heavy Above-the-Fold Elements
From a design perspective, what sits above the fold has an outsized impact on LCP. Here are some common design patterns that hurt performance and what to do about them.
Replace Sliders and Carousels With a Static Image
Image sliders and carousels are a well-known LCP killer. They typically load multiple large images, rely on JavaScript to function, and add complexity that delays rendering. Replace them with a single, well-optimized static hero image. It is better for performance and, frankly, better for conversions too.
Avoid Auto-Playing Video Backgrounds
A full-screen background video might look impressive, but it is one of the heaviest elements you can place above the fold. If you must use video, consider loading a static poster image first and deferring the video load until after the page has fully rendered.
Reduce CSS Animation Complexity
Fade-ins, parallax effects, and complex entrance animations on above-the-fold elements force the browser to do extra work before the content becomes visible. Consider removing or simplifying animations on LCP-critical content. Let the content appear instantly and apply subtle animations only to secondary elements further down the page.
Inline Critical CSS
Instead of loading your entire stylesheet before rendering anything, extract the CSS needed for above-the-fold content and inline it directly in the <head> of your HTML. This way, the browser can start painting immediately without waiting for an external CSS file.
Tools like Critical (by Addy Osmani) or built-in features in many modern build tools can automate this process.
Step 6: Remove Unused CSS and JavaScript
Render-blocking resources are a major contributor to slow LCP. Every CSS and JavaScript file that the browser must download and parse before it can render content adds delay.
- Audit your CSS using Chrome DevTools Coverage tab to find unused rules. Remove them.
- Defer non-critical JavaScript using the
deferorasyncattributes on script tags. - Minify and compress all CSS and JS files. Use Gzip or, better yet, Brotli compression on your server.
- Remove unused plugins, widgets, and third-party scripts that you no longer need. Each one adds weight.
Step 7: Improve Server Response Time (TTFB)
Time to First Byte (TTFB) is the foundation of LCP. If your server takes a long time to respond, everything else is delayed. Even perfectly optimized images and fonts cannot compensate for a slow server.
- Use a Content Delivery Network (CDN). A CDN caches your content on servers around the world, reducing the physical distance between your server and your users. This can dramatically reduce both TTFB and asset delivery time.
- Choose reliable, fast hosting. Budget shared hosting often leads to slow and inconsistent response times. Consider managed hosting or a modern edge hosting platform.
- Enable server-side caching. Page caching, object caching, and database query caching all reduce the work your server has to do on each request.
- Use HTTP/2 or HTTP/3. These protocols allow multiplexed connections, meaning the browser can download multiple resources simultaneously instead of waiting in line.
Step 8: Optimize the Critical Rendering Path
The critical rendering path is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into visible pixels on the screen. The fewer steps and the less data involved, the faster your LCP.
Here is a summary of how to streamline it:
| Action | Impact on LCP | Difficulty |
|---|---|---|
| Inline critical CSS | High | Medium |
| Preload LCP image with fetchpriority | High | Easy |
| Convert images to AVIF/WebP | High | Easy |
| Use font-display: swap | Medium | Easy |
| Defer non-critical JS | Medium | Easy |
| Implement a CDN | High | Easy |
| Remove sliders/carousels above the fold | High | Medium (design change) |
| Remove unused CSS | Medium | Medium |
| Self-host and preload fonts | Medium | Easy |
| Reduce server response time | High | Varies |
Step 9: Test on Mobile, Not Just Desktop
LCP scores often differ significantly between desktop and mobile. Mobile devices have slower processors, smaller bandwidth, and different viewport sizes. Google uses mobile-first indexing, so your mobile LCP score is the one that matters most for rankings.
Make sure you are testing with:
- PageSpeed Insights (uses real-world field data and lab data)
- Lighthouse in Chrome DevTools (simulates mobile conditions)
- Google Search Console Core Web Vitals report (shows real user data grouped by page type)
- WebPageTest.org (lets you test from specific locations and devices)
Pay special attention to mobile hero images. An image that loads fine on a desktop with a fast connection can be devastatingly slow on a 4G mobile connection if it is not properly sized and compressed.
Step 10: Monitor Continuously
Improving LCP is not a one-time task. New content, design updates, plugin changes, and third-party script additions can all cause regressions. Set up ongoing monitoring using:
- Google Search Console for real user metrics over time.
- Real User Monitoring (RUM) tools to track LCP across different pages, devices, and geographies.
- Automated Lighthouse CI in your deployment pipeline to catch performance regressions before they reach production.
Quick Checklist: Improve Largest Contentful Paint
Use this checklist as a quick reference when auditing any page:
- Identify the LCP element using DevTools or PageSpeed Insights.
- Convert images to WebP or AVIF.
- Serve responsive images with srcset and sizes.
- Preload the LCP image with
fetchpriority="high". - Remove lazy loading from the LCP element.
- Set explicit width and height on images.
- Use
font-display: swapand preload critical fonts. - Self-host fonts in WOFF2 format.
- Inline critical CSS for above-the-fold content.
- Defer non-critical CSS and JavaScript.
- Remove or minimize sliders, carousels, and video backgrounds above the fold.
- Use a CDN for static assets.
- Optimize server response time (TTFB).
- Minify and compress all assets.
- Test on both mobile and desktop.
- Set up continuous monitoring.
Frequently Asked Questions
What is a good Largest Contentful Paint score?
Google considers an LCP of 2.5 seconds or less to be good. Between 2.5 and 4 seconds needs improvement, and above 4 seconds is rated poor. Aim for under 2.5 seconds on both mobile and desktop.
What causes the Largest Contentful Paint to be slow?
The most common causes are unoptimized images (wrong format, oversized, not preloaded), render-blocking CSS and JavaScript, slow server response times, heavy above-the-fold design elements like sliders and video backgrounds, and web fonts that block text rendering.
Can a CDN improve LCP?
Yes. A CDN caches your content on servers distributed globally, which reduces the time it takes for assets to reach users regardless of their location. This directly improves both TTFB and asset delivery speed, both of which contribute to faster LCP.
Should I lazy load my hero image?
No. If your hero image is the LCP element, you should not use lazy loading on it. Lazy loading defers the download, which delays the LCP measurement. Instead, load it eagerly and preload it with a high fetch priority.
How do I improve LCP on mobile specifically?
Focus on serving properly sized responsive images for smaller viewports, reduce the number and size of resources loaded above the fold, use a CDN, and make sure your server responds quickly. Mobile devices have less processing power and often slower connections, so every optimization matters more.
Does LCP affect SEO rankings?
Yes. LCP is one of Google’s Core Web Vitals, which are confirmed ranking signals. A poor LCP score can negatively impact your search visibility, especially on mobile where Google uses mobile-first indexing.
How often should I check my LCP score?
You should monitor LCP continuously. Check Google Search Console’s Core Web Vitals report at least monthly, and set up automated testing in your deployment pipeline so you catch regressions as soon as new code or content is published.
Improving Largest Contentful Paint is one of the highest-impact performance optimizations you can make for both user experience and search rankings. Most of the fixes above are straightforward and can be implemented in a single sprint. Start with identifying your LCP element, optimize it aggressively, and work outward from there.
If you need help auditing and improving your website’s Core Web Vitals, reach out to our team at Pixelbright. We specialize in building fast, beautifully designed websites that perform where it counts.