How to Improve LCP Score: 7 Proven Techniques for Faster Loading

What Is Largest Contentful Paint (LCP) and Why Does It Matter?

Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element on your page to fully load. That element is usually a hero image, a large text block, or a background video. Google uses LCP as a Core Web Vital, which means it directly affects your search rankings, user experience, and bounce rates.

Before you can improve LCP, you need to understand what Google considers a good score:

LCP Score	Rating	What It Means
0 to 2.5 seconds	Good	Your page loads fast and users are happy
2.5 to 4.0 seconds	Needs Improvement	Users may start to lose patience
Over 4.0 seconds	Poor	High bounce risk and potential ranking penalties

Now that you know the benchmarks, let’s walk through the seven most effective ways to bring that number down.

Step 1: Identify Your LCP Element First

This is where most people skip ahead and waste time. You cannot fix what you have not identified. Before applying any optimization, figure out exactly which element Google is flagging as your Largest Contentful Paint element.

Here is how to find it:

Open Google PageSpeed Insights and enter your URL.
Scroll down to the Diagnostics section.
Look for the item labeled “Largest Contentful Paint element”.
Note exactly what that element is: an image, a heading, a video thumbnail, or something else.

You can also use Chrome DevTools. Open your page, press F12, go to the Performance tab, record a page load, and look for the LCP marker in the timeline. It will highlight the exact element.

Once you know the culprit, every technique below becomes far more targeted and effective.

Step 2: Optimize Your LCP Image

In the vast majority of cases, the LCP element is an image. A hero banner, a product photo, or a featured image at the top of a blog post. If that image is too large, in the wrong format, or not properly served, your LCP score will suffer.

Use Modern Image Formats

Switch from traditional JPEG and PNG files to WebP or AVIF. These modern formats deliver the same visual quality at significantly smaller file sizes.

Format	Average File Size Reduction vs JPEG	Browser Support
WebP	25-35% smaller	All modern browsers
AVIF	40-50% smaller	Chrome, Firefox, Safari 16.4+

Serve Responsive Images

Do not serve a 2400px-wide image to a phone screen that is only 400px wide. Use the srcset attribute in your image tags so the browser downloads the appropriately sized version for each device.

Compress Without Losing Quality

Use tools like ShortPixel, Squoosh, or TinyPNG to compress images before uploading them. Aim for file sizes under 200KB for hero images whenever possible.

Set Explicit Width and Height

Always include width and height attributes on your image tags. This prevents layout shifts and helps the browser allocate space immediately, speeding up the rendering process.

Step 3: Preload Your LCP Resource

Even if your image is perfectly optimized, the browser might not discover it fast enough. By default, the browser has to parse the HTML, then the CSS, and only then does it find and start downloading the image. That delay hurts LCP.

The fix is simple. Add a preload tag in your page’s <head> section:

<link rel="preload" as="image" href="/images/hero-banner.webp" fetchpriority="high">

This tells the browser: “Start downloading this image immediately, even before you finish parsing the rest of the page.”

Key tips for preloading:

Only preload your LCP image, not every image on the page.
Add fetchpriority="high" to give it top priority in the download queue.
If you use a CDN, make sure the preload URL matches the CDN URL exactly.
For WordPress users, plugins like Perfmatters or WP Rocket can handle this automatically.

Step 4: Reduce Server Response Time (TTFB)

Your LCP score includes the time it takes for the server to respond with the first byte of data. This is called Time to First Byte (TTFB). If your server is slow, everything else is delayed.

Common Causes of Slow TTFB

Cheap shared hosting with overcrowded servers
No server-side caching enabled
Heavy database queries running on every page load
Server located far from your primary audience

How to Fix It

Upgrade your hosting. If you are on a budget shared hosting plan and your site gets meaningful traffic, consider moving to a managed hosting provider or a VPS. The difference in response time can be dramatic.
Enable server-side caching. Tools like Varnish, Redis, or built-in hosting caches store pre-built versions of your pages so the server does not have to rebuild them for every visitor.
Use a CDN (Content Delivery Network). A CDN like Cloudflare, KeyCDN, or BunnyCDN stores copies of your site on servers around the world. When someone visits your site, they get served from the nearest location. This can cut hundreds of milliseconds off your LCP.

Can a CDN improve LCP? Absolutely. A CDN reduces latency by serving content from a geographically closer location. For sites with a global audience, this is one of the highest-impact changes you can make.

Step 5: Eliminate Render-Blocking CSS and JavaScript

When a browser encounters a CSS or JavaScript file in your HTML, it often stops everything to download and process that file before continuing to render the page. These are called render-blocking resources, and they directly delay your LCP element from appearing.

For CSS

Inline critical CSS. Extract the CSS needed to render the above-the-fold content and place it directly in the <head> of your HTML. The rest of your CSS can load afterward.
Minify your stylesheets. Remove whitespace, comments, and unnecessary characters. Tools like CSSNano or your caching plugin can do this automatically.
Remove unused CSS. Many sites load entire CSS frameworks when they only use a fraction of the styles. Tools like PurgeCSS can identify and strip out what you do not need.

For JavaScript

Defer non-critical scripts. Add the defer attribute to JavaScript files that are not needed for the initial page render. This lets the browser continue building the page while the scripts download in the background.
Remove unnecessary third-party scripts. Every analytics tool, chat widget, tracking pixel, and social media embed adds weight. Audit your third-party scripts and remove anything that is not essential.

If you are on WordPress, plugins like WP Rocket, Autoptimize, or LiteSpeed Cache can handle CSS and JavaScript optimization with a few clicks.

Step 6: Avoid Lazy Loading Your LCP Image

This is a mistake we see constantly. Lazy loading is great for images further down the page, but you should never lazy load the image that is your LCP element.

Here is why: lazy loading tells the browser to wait until the image is about to scroll into view before downloading it. But your LCP image is already in the viewport when the page loads. Adding lazy loading to it actually delays its download, making your LCP score worse.

What to do:

Remove loading="lazy" from your hero image or any above-the-fold image.
Instead, add fetchpriority="high" to signal that this image should be downloaded as soon as possible.
Continue using lazy loading for all images below the fold.

In WordPress, some themes and plugins automatically add lazy loading to all images. Check your theme settings or use a plugin that lets you exclude specific images from lazy loading.

Step 7: Optimize Web Fonts

If your LCP element is a text block (like a large heading), then web fonts can significantly impact your score. Custom fonts need to be downloaded before text can render, and if that download is slow, your LCP suffers.

Best Practices for Font Optimization

Preload your primary font. Add a preload link for the font file your LCP text uses:

<link rel="preload" as="font" href="/fonts/main-font.woff2" type="font/woff2" crossorigin>
Use font-display: swap. This CSS property tells the browser to show text immediately using a fallback font, then swap in the custom font once it has loaded. Users see content faster.
Host fonts locally. Instead of loading fonts from Google Fonts or another external service, download the font files and serve them from your own server or CDN. This removes an extra DNS lookup and connection.
Limit font variations. Only load the weights and styles you actually use. Loading Regular, Bold, Italic, Light, and SemiBold when you only need Regular and Bold wastes bandwidth.

Bonus: A Quick LCP Audit Checklist

Use this checklist to audit any page on your site:

Check	Action	Done?
Identify LCP element	Use PageSpeed Insights or Chrome DevTools	☐
Image format	Convert to WebP or AVIF	☐
Image compression	Compress to under 200KB if possible	☐
Preload LCP resource	Add preload tag with fetchpriority high	☐
No lazy loading on LCP image	Remove loading lazy from above-the-fold images	☐
Server response time	Check TTFB and consider CDN or better hosting	☐
Render-blocking resources	Inline critical CSS and defer non-essential JS	☐
Font optimization	Preload fonts, use font-display swap, host locally	☐

What Causes Poor LCP? A Quick Summary

If your LCP score is in the red, one or more of these issues is almost certainly the cause:

Unoptimized images that are too large, in outdated formats, or not compressed
Slow server response from budget hosting or lack of caching
Render-blocking CSS and JavaScript that delay the browser from painting content
No resource prioritization meaning the browser discovers the LCP resource too late
Lazy loading applied to the LCP image which actually delays it instead of helping
Heavy or unoptimized web fonts that block text rendering
Too many third-party scripts competing for bandwidth and processing time

How to Improve LCP on Mobile Specifically

Mobile LCP scores are almost always worse than desktop scores. Mobile devices have less processing power, and mobile connections are slower. Here are extra tips specifically for mobile:

Serve smaller image sizes using responsive images with the srcset attribute.
Reduce the number of resources loaded. On mobile, every extra HTTP request hurts more.
Test on real devices, not just emulators. Chrome DevTools throttling does not perfectly replicate real-world mobile conditions.
Consider AMP or lighter page templates for content-heavy pages that struggle on mobile.
Check your mobile TTFB separately. Some hosting configurations serve mobile requests differently.

Measuring Your Progress

After implementing these changes, track your results using multiple tools:

Google PageSpeed Insights for lab data and field data (real user metrics).
Google Search Console under the Core Web Vitals report. This shows your site-wide LCP performance over time.
Chrome User Experience Report (CrUX) for real-world performance data from actual Chrome users.
WebPageTest.org for detailed waterfall charts that show exactly where time is being spent.

Focus on the 75th percentile (p75) score. Google uses this metric, meaning 75% of your page loads need to hit the target for your page to be considered “good.” A few fast loads do not offset a majority of slow ones.

Frequently Asked Questions

What is a good LCP score?

A good LCP score is 2.5 seconds or less. Scores between 2.5 and 4.0 seconds need improvement, and anything over 4.0 seconds is considered poor by Google.

How can we improve LCP quickly?

The fastest wins usually come from compressing and converting your LCP image to WebP or AVIF, adding a preload tag for that image, and removing lazy loading from above-the-fold images. These three changes alone can cut seconds off your LCP.

Can a CDN improve LCP?

Yes. A CDN serves your content from servers closer to your visitors, reducing latency and download times. For sites with geographically diverse traffic, a CDN can significantly lower both TTFB and overall LCP.

What causes poor LCP?

The most common causes are oversized images, slow server response times, render-blocking CSS and JavaScript, unoptimized web fonts, and lazy loading applied to above-the-fold content.

How do I improve LCP on Shopify?

On Shopify, focus on compressing your theme’s hero images, minimizing the number of installed apps (each adds scripts), using Shopify’s built-in CDN, and ensuring your theme does not lazy load the main product image or hero banner. Consider using Shopify’s native image optimization features and a lightweight, well-coded theme.

How do I improve LCP in WordPress?

Install a caching plugin like WP Rocket or LiteSpeed Cache. Use an image optimization plugin like ShortPixel or Imagify to convert images to WebP. Inline critical CSS, defer JavaScript, preload your LCP image, and make sure your hero image is not lazy loaded. Choosing quality managed WordPress hosting also makes a big difference.

Does LCP affect SEO rankings?

Yes. LCP is one of Google’s three Core Web Vitals, which are confirmed ranking factors. A poor LCP score can negatively affect your search visibility, especially on mobile where competition for top positions is tight.