Slow LCP? How to Fix Largest Contentful Paint — Beginner's Guide

1 What is LCP?

LCP stands for Largest Contentful Paint. Let us break every word of that down so it makes complete sense.

What does Largest Contentful Paint mean?

"Paint" is what browsers call the moment a piece of content appears on screen — the browser "paints" it there. "Largest Contentful" means the biggest visible thing on the page. So LCP is the moment the biggest visible element on your page finishes loading and appears on screen.

That biggest element is usually one of these things:

• A large hero image at the top of the page
• A large product photo
• A large heading or block of text if there is no big image
• A video poster image

Why does Google measure LCP?

Google uses LCP as a proxy for how fast your page feels to a real visitor. Think about what it is like to load a webpage — you do not care about tiny invisible elements loading. What you care about is when the main content of the page appears so you can start reading or using it. LCP measures exactly that moment.

LCP is one of Google's three Core Web Vitals — the three page speed metrics Google uses as ranking signals. A poor LCP score directly affects where your page appears in search results.

What counts as a good LCP?

What causes a slow LCP?

2 Find out what your LCP element is

Before you can fix your LCP, you need to know what element Google is measuring. You might assume it is your hero image — but it might be something else entirely. Here is how to find out.

1. 1 Go to Google PageSpeed Insights Open a new browser tab and go to https://pagespeed.web.dev.
2. 2 Enter your page address and click Analyse Type the full address of your page — for example https://yourdomain.com — and click Analyse. Wait about 30 seconds for the test to complete.
3. 3 Find your LCP score at the top At the top of the results page you will see coloured circles showing your Core Web Vitals scores. LCP is one of them. It shows your time in seconds and whether it passes (green), needs improvement (orange) or is poor (red).
4. 4 Find the LCP element in the diagnostics Scroll down past the scores to the Diagnostics section. Look for Largest Contentful Paint element. This tells you exactly which element on your page Google is measuring. It will usually show you the HTML of that element — for example <img src="hero.jpg"> or <h1>Your Page Heading</h1>. Write this down.
5. 5 Also run the AIPageSEO audit Go to https://aipageseo.com/seo-audit-platform.html and run the audit on your page. The Performance section will show your LCP score and flag the specific issues causing it to be slow.

3 Is your LCP element an image or text?

The fix depends on what your LCP element is. Read the section that matches what you found in Section 2.

4 Fix — Compress and resize your LCP image

If your LCP element is an image, the most common cause of a slow LCP is that the image file is too large. A 3MB hero image takes much longer to download than a 150KB version of the same image at the same display size. Here is how to compress it properly.

Step 1 — Find the image file

1. 1 Find what the image is called From the LCP element information in Google PageSpeed Insights, note the image filename — for example hero.jpg or banner-image.png. This is what you are looking for on your server.
2. 2 Download the image using FileZilla Open FileZilla and connect to your server. Navigate to httpdocs or public_html. Look for an images folder — usually called images or img. Find your LCP image file. Right-click it and choose Download. Save it to your Desktop.

Step 2 — Check the current file size and dimensions

1. 3 Check the file size Right-click the image on your Desktop and choose Properties (Windows) or Get Info (Mac). Look at the file size. If it is over 200KB, it needs compressing. If it is over 500KB, it definitely needs compressing. If it is over 1MB, this is almost certainly your entire LCP problem.
2. 4 Check the image dimensions In the same Properties or Get Info window, look at the dimensions — width × height in pixels. Compare this to the actual size it appears on your page. If the image is 3000×2000 pixels but only displays at 800×533 pixels, the image is much larger than it needs to be and is wasting download time.

Step 3 — Compress the image

1. 5 Go to Squoosh Open a new browser tab and go to https://squoosh.app. This is a free image compression tool made by Google. Click Open an image and select your downloaded LCP image.
2. 6 Resize the image if it is too large On the right side of the screen you will see a Resize option. If your image is larger than 1200 pixels wide, turn on Resize and change the width to 1200 (or whatever the actual display width is on your page). The height will adjust automatically.
3. 7 Choose the output format In the right panel under the Compress section, change the output format to WebP. WebP is a modern image format that is typically 25–35% smaller than JPG or PNG with no visible quality loss. Google PageSpeed Insights will reward you for using it.
4. 8 Adjust the quality slider Below the format selector there is a Quality slider. Start at 80. Look at the preview on screen — does the image still look good? If yes, try 75. The lower the quality number, the smaller the file. Stop when the image starts to look noticeably different. Most images look fine at 75–80.
5. 9 Check the new file size At the bottom of the screen Squoosh shows you the original file size and the new compressed size side by side. Aim for under 150KB for a hero image. Under 100KB is excellent.
6. 10 Download the compressed image Click the download icon at the bottom right of the screen. The compressed WebP image will save to your Downloads folder. Note the new filename — it will have a .webp extension.

Step 4 — Update your HTML to use the new image

1. 11 Upload the new image using FileZilla In FileZilla, navigate to your images folder on the server. In the left panel navigate to your Downloads folder and find the new WebP image. Right-click it and choose Upload. The new image is now on your server.
2. 12 Download your HTML page file Navigate to your main website folder in FileZilla. Right-click the HTML file for the page with the slow LCP and choose Download. Save a backup copy first, then download a working copy to your Desktop.
3. 13 Open the HTML file in Notepad++ Open Notepad++ → File → Open → navigate to your Desktop → click the HTML file → click Open.
4. 14 Find the image tag for your LCP image Press Ctrl + F and search for the old image filename — for example hero.jpg. Notepad++ will jump to the image tag.
5. 15 Update the filename to the new WebP version Change the image filename in the src attribute from the old name to the new WebP filename. For example:
   <!-- Before --> <img src="/images/hero.jpg" alt="Description" width="1200" height="600"> <!-- After --> <img src="/images/hero.webp" alt="Description" width="1200" height="600">
6. 16 Save the file Press Ctrl + S. The red dot on the tab disappears when saved.
7. 17 Upload the updated HTML file In FileZilla, right-click the updated HTML file on your Desktop in the left panel and choose Upload. Click Overwrite when prompted.

5 Fix — Tell the browser to load your LCP image first

By default, the browser reads your HTML file from top to bottom. It does not start downloading your LCP image until it reaches the image tag in the code — which might be halfway down the file. A preload tag tells the browser to start downloading the LCP image immediately, before it has even read the rest of the page.

How to add a preload tag

1. 1 Open your HTML file in Notepad++ if not already open If you just did Section 4, your file is already open. If not, download it from FileZilla and open it in Notepad++.
2. 2 Find the closing head tag Press Ctrl + F and search for </head>. Click at the beginning of that line and press Enter to create a new blank line above it.
3. 3 Add the preload link tag On the new blank line, type the preload tag for your LCP image. Replace the filename with your actual image filename:
   <link rel="preload" as="image" href="/images/hero.webp" />

   This single line tells the browser: "Before you do anything else, start downloading this image right now." It can reduce LCP by 0.5 to 1.5 seconds on its own.

4. 4 Save and upload Press Ctrl + S to save. Upload the file back to your server using FileZilla.

6 Fix — Remove render-blocking resources

Render-blocking resources are CSS or JavaScript files that the browser must fully download and process before it can show anything on the page. Every millisecond spent downloading these files delays your LCP.

How to identify render-blocking resources

1. 1 Check Google PageSpeed Insights diagnostics In your PageSpeed Insights results, scroll down to the Diagnostics section and look for Eliminate render-blocking resources. It will list each file that is blocking your page from loading. Write down the filenames.
2. 2 For JavaScript files — add the defer attribute Open your HTML file in Notepad++. Press Ctrl + F and search for <script. Find the script tags for non-essential JavaScript files. Add the word defer inside each script tag like this:
   <!-- Before --> <script src="/js/analytics.js"></script> <!-- After --> <script src="/js/analytics.js" defer></script>

   The defer attribute tells the browser to download the script in the background and run it only after the page has finished loading. This removes the render-blocking delay.

3. 3 For CSS files — only defer non-critical stylesheets Never defer your main CSS file — the page will look unstyled without it. Only defer CSS files that are not needed for the initial view of the page — for example a stylesheet that only affects content far down the page or on other pages. This is more advanced and if you are unsure, leave CSS files as they are and focus on JavaScript deferral instead.
4. 4 Save and upload Press Ctrl + S to save. Upload the file back to your server using FileZilla.

7 Fix — Slow server response time is delaying your LCP

If your server takes a long time to respond (high TTFB), LCP cannot start until the server responds. A slow TTFB adds directly to your LCP time. If your LCP is slow and your TTFB is also flagged as slow, fix TTFB first — it will automatically improve LCP too.

To fix your TTFB, follow the TTFB tutorial which covers caching, hosting upgrades and CDN setup in full detail. Come back to this tutorial after improving your TTFB to see how much your LCP has improved as a result.

8 Verify your LCP has improved

1. 1 Re-run Google PageSpeed Insights Go to https://pagespeed.web.dev and test your page again. Compare the new LCP score to the one you noted at the start. You should see a measurable improvement.
2. 2 Re-run the AIPageSEO audit Go to https://aipageseo.com/seo-audit-platform.html and run the audit again. The LCP result in the Performance section should now show green if your score is under 2.5 seconds.
3. 3 If LCP is still slow, go through each fix in order If your LCP is still above 2.5 seconds after compressing your image and adding a preload tag, work through Sections 6 and 7. Each fix addresses a different cause — you may need more than one to get below the threshold.

9 Common mistakes to avoid

1. ⚠ Adding a preload tag for the wrong image Only add a preload tag for the actual LCP element identified by Google PageSpeed Insights. Adding preload tags for multiple images wastes bandwidth and can actually slow things down by competing for the browser's download capacity.
2. ⚠ Forgetting to update the HTML after changing the image filename If you compress your image and save it as a WebP file with a new name, you must update the src attribute in your HTML to match the new filename. If you upload the WebP file but the HTML still points to the old JPG, the browser will load the old unoptimised image.
3. ⚠ Using defer on scripts that must run immediately Some JavaScript files must run before the page renders — for example scripts that control navigation menus or critical page functionality. Adding defer to these breaks the page. Only add defer to non-essential scripts like analytics, chat widgets or social share buttons.
4. ⚠ Compressing images too aggressively Reducing image quality too far makes images look blurry or pixelated — which damages trust and looks unprofessional. Always check the visual result in Squoosh before downloading the compressed version. A 150KB image that looks great is better than a 60KB image that looks terrible.
5. ⚠ Only testing on desktop Google PageSpeed Insights shows separate scores for mobile and desktop. Google primarily uses the mobile score for ranking. Make sure you check the mobile tab — your LCP on mobile may be significantly worse than on desktop because mobile connections are slower and mobile browsers have less processing power.