How to Find the LCP Element on a Webflow Page

Why it matters

Largest Contentful Paint (LCP) is the time it takes for the largest visible image, text block or video to finish rendering. Good is 2.5 seconds or less. Poor is more than 4.0 seconds. Google measures this at the 75th percentile of page loads, split by mobile and desktop.

If you fix the wrong element, LCP will not improve.

These elements can count: images, images inside SVG, video poster images, elements with a CSS background image, and block-level elements that contain text. Elements with zero opacity do not count. Neither do elements that cover the full viewport, which are likely backgrounds.

How to check it

1. Run PageSpeed Insights. Test the page on both the Mobile and Desktop tabs. The LCP element can differ between them.
2. Read field data first. It is under "Discover what your real users are experiencing." web.dev says to prioritize this data over Lighthouse when they disagree.
3. Use the LCP filter in the diagnostics. Open "Largest Contentful Paint element." It shows the element and its subpart breakdown.
4. Decide if it is an image or text. A text element on a system font needs no resource load. Text on a web font depends on that font loading.
5. Match it in the Designer. Find the same image or text block on your page.
6. Try the Chrome DevTools Performance panel. The live metrics view shows your local LCP next to the field LCP. A performance trace also lists LCP subpart timings.
7. Read the four subparts. They are Time to First Byte, resource load delay, resource load duration and element render delay. web.dev gives ideal shares of about 40%, under 10%, about 40% and under 10%. It calls these guidelines, not exact targets.
8. Test more than once. The browser reports a new LCP candidate whenever a larger element renders. Reporting stops once the user taps, scrolls or presses a key.

How to fix it in Webflow

1. Confirm the element. Select it in the Designer. Check its type, size and position.
2. Swap a background image for an Image element. Webflow creates responsive variants for inline images, not for background images. web.dev says CSS background images are not discoverable from the HTML.
3. Load the LCP image eagerly. Select the image, open Settings panel, then Image settings. Under Set loading behavior, choose Eager. web.dev says never to lazy-load the LCP image.
4. Keep responsiveness on. In Image settings, make sure Disable responsiveness is unchecked.
5. Shrink the file. Compress the image first. Use the WebP conversion tool in the Assets panel. Keep display size close to natural size. Webflow says large images are the most common reason for slow loading.
6. Keep the image in the page itself. web.dev says images inserted by JavaScript are not discoverable from the HTML. Avoid adding the hero image with custom code.
7. For text, trim fonts. In Site settings, then Fonts, delete unused fonts. Remove unused weights and styles.
8. Check interactions on the LCP element. Webflow says each interaction adds load time. Remove any that you do not need.
9. Fix the biggest subpart. If load duration is the largest, work on the file size first.
10. Publish and test again. Run PageSpeed Insights on mobile. Field data covers 28 days, so it updates slowly.

Checklist

• The LCP element is named for mobile and desktop.
• You know if it is an image or text.
• The element is matched in the Designer.
• The LCP image is an Image element, not a background.
• Loading behavior is set to Eager.
• Disable responsiveness is off.
• The image is compressed and in WebP.
• Unused fonts and weights are removed.
• Interactions on the element are reviewed.
• The largest subpart is identified.
• The page was tested again after publishing.

FAQ

Is the LCP element the same on mobile and desktop?

Not always. PageSpeed Insights tests them separately. A different screen size can make a different element the largest.

Why did my LCP element change between tests?

The browser reports a new candidate each time a larger element renders. A different load order can change the final result.

Can text be the LCP element?

Yes. A block-level element that contains text can count. If it uses a web font, the font load can affect LCP.

Dealing with this on a live Webflow site? It is the kind of work I do in Speed. Send me your site and I will tell you what I would fix first.