Webflow Core Web Vitals: How to Hit Green on Every Metric

Core Web Vitals Are a Ranking Factor—Here Is What Matters

Google uses three Core Web Vitals—Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS)—as ranking signals. In 2024, INP replaced First Input Delay (FID), raising the bar for JavaScript-heavy sites. For Webflow projects, the good news is that you rarely deal with complex client-side frameworks. The bad news is that unoptimized images, render-blocking fonts, and layout-shifting interactions can still tank your scores.

Fixing Largest Contentful Paint (LCP)

LCP measures how quickly the largest visible element—usually a hero image or heading—renders. Webflow sites most often fail LCP because of oversized hero images served without explicit width and height, or custom fonts that block rendering. The fastest fix: compress your hero image to under 200 KB, serve it in WebP format, and set fetchpriority='high' via a custom attribute in Webflow’s element settings.

1. Compress hero images to under 200 KB using Squoosh or ShortPixel.
2. Add fetchpriority='high' as a custom attribute on the LCP image element.
3. Preload critical fonts with a tag in the page’s custom code.
4. Avoid lazy-loading the above-the-fold hero image—Webflow’s default lazy load should be disabled for it.
5. Remove or defer third-party scripts that block the main thread (analytics, chat widgets).

Fixing Cumulative Layout Shift (CLS)

CLS measures visual stability. The biggest CLS offenders in Webflow are images without explicit dimensions, web fonts that cause FOUT (Flash of Unstyled Text), and interactions that resize elements above the fold. Always set width and height on images—Webflow does this automatically if you use the native image element, but background images on divs do not get this treatment.