How Can I Improve Largest Contentful Paint on My Website?

Largest Contentful Paint, or LCP, measures when the largest eligible visible content element is rendered during page loading. It often relates to a hero image or prominent text block, but you should inspect the actual page rather than assume the largest image file is responsible.

Google’s web.dev guidance defines a good LCP as 2.5 seconds or less, assessed at the 75th percentile of page visits. A single quick test is not evidence that most customers receive that experience. See the LCP metric explanation.

Find the element before choosing a fix

Test a representative page in PageSpeed Insights or browser performance tools and identify the reported LCP element. Repeat for mobile and desktop if the layouts differ.

Record the page address, test conditions and element. A homepage photograph, service-page heading and product image may each have different causes of delay.

Start with the pages customers actually use. Our website speed guide explains why chasing one homepage score can miss more important problems.

Separate the stages of the delay

LCP can be delayed before the server responds, before an asset starts downloading, during its download or before the browser displays it. The LCP optimisation guide describes these components and why fixing one does not necessarily solve the others.

Use that distinction to ask better questions:

• Did the document arrive slowly?
• Was the important image discovered late?
• Was the image unnecessarily large?
• Was downloaded content hidden or waiting for other work?

Compressing a photograph will not fully solve a page that waits for a large script before revealing it.

An illustrative diagnosis

The following example is invented to show the reasoning, not a measured AfterWorks client result.

A local landscaping website has a large photograph above its main enquiry button. The mobile test identifies that photograph as the LCP element.

Observation	Next investigation
HTML arrives promptly	Do not start by replacing hosting
Photograph request starts late	Check lazy loading and how the image is inserted
Download is much larger than its displayed size needs	Review dimensions and encoding
Image still appears late after download	Inspect rendering dependencies and hidden states

The proposed first change is to make the important image discoverable early and remove inappropriate lazy loading. Image resizing is a separate change, measured afterwards.

This sequence avoids replacing several unrelated systems without knowing which one helped.

Match the fix to the page

If the document response is slow, investigate time to first byte. If the LCP element is an image, check its actual display dimensions and responsive sources before exporting smaller files; the image compression guide gives a practical workflow.

Important above-the-fold imagery should not be treated like a photograph far down the page. Our lazy-loading guide explains that distinction.

If text is the LCP element, look at font delivery and any styling or script that delays its appearance. Do not sacrifice readable typography simply to make one laboratory result look better.

Ask the developer to document the suspected cause and the expected effect of each change. That makes a disappointing result useful evidence rather than a reason for random adjustments.

Re-test under comparable conditions

Keep the page, viewport and testing method consistent. Run several comparisons, retain the results and note whether caches were cold or warm.

Then test the customer journey. Does the heading remain readable? Is the image crop appropriate? Does the enquiry button appear where expected? A technically faster page still needs to communicate clearly.

Field data represents accumulated visitor experience and will not instantly reflect a new release. Laboratory tests are useful for diagnosis, while field measurements help establish what visitors experience over time. Keep those two forms of evidence labelled separately.

Keep LCP in proportion

LCP is one part of Core Web Vitals, alongside responsiveness and visual stability. A page that appears quickly but jumps around or ignores clicks still needs work.

Avoid a redesign whose only success measure is a score. Prioritise the content people need to make a decision, deliver it promptly and check the result on realistic devices.

A smaller, simpler page can also support the practical aims of sustainable website design, but performance measurements alone do not establish a precise carbon saving.

Thinking about your own rebuild?

Tell us about your business, your current website and what you would like to improve. We will help you work out the next step.

Tell us about your project↗

• Website performance
• Small business