How to Improve LCP (Largest Contentful Paint) in Webflow

In this tutorial, Sandro, co-founder of Gemeos Webflow agency, shows you how to improve your Webflow site’s LCP (Largest Contentful Paint). LCP measures how long it takes the largest visible element to appear. Google considers anything under 2.5 seconds good.

1. Identify your LCP element

In PageSpeed Insights, the LCP element is shown in the report. On most Webflow sites, it’s the hero image or the main H1 heading. Open Chrome DevTools > Performance > LCP to confirm it.

2. Optimize the LCP image

If your LCP is an image, set Loading: Eager in Webflow, add the custom attribute fetchpriority: high, and add a preload in the head. If the image is a CSS background, preload is mandatory because the browser won’t detect it automatically.

3. Optimize the LCP heading

If your LCP is an H1 heading using a custom font, that font needs to be preloaded. Add a WOFF2 preload in the head and make sure font-display: swap is applied to avoid FOIT.

4. Reduce TTFB (Time to First Byte)

A high TTFB (>600ms) points to a server-side issue. Webflow uses a Fastly CDN, so your TTFB should be under 200ms. If it isn’t, check that your custom domain is connected through the Webflow CDN and not through a third-party proxy that adds latency.

Conclusion

An LCP under 2.5s is the main goal of Core Web Vitals. Use cases:

• Ad landing pages with a hero image
• Homepage pages with a custom-font heading
• Ecommerce product pages with a main image