Introduction
Core Web Vitals are the three performance metrics Google has officially used as ranking criteria since 2021. In 2026, they remain active, measured signals — with one major evolution: INP (Interaction to Next Paint) permanently replaced FID (First Input Delay) in March 2024 as the responsiveness metric.
The three active metrics in 2026 are:
LCP — Largest Contentful Paint: Loading time of the largest visible element. Target: under 2.5 seconds.
CLS — Cumulative Layout Shift: Visual stability of the page — absence of unexpected content shifts. Target: under 0.1.
INP — Interaction to Next Paint: Page responsiveness to user interactions (clicks, keystrokes). Target: under 200 milliseconds.
This guide covers the most common causes of poor scores on Webflow sites and the fixes that can be applied directly in the Webflow interface, without any external developer.
Last updated: April 2026.
Metric 1 — LCP (Largest Contentful Paint): Improving Load Speed
What is LCP?
LCP measures the time it takes for the largest visible element on the page — typically a hero image or H1 heading — to be fully loaded and displayed. Google targets an LCP under 2.5 seconds for an experience considered "good."
Common causes of poor LCP on Webflow
Oversized hero image: The image at the top of the page is the most common LCP element. An unoptimized image of several megabytes immediately degrades the LCP score.
Lazy loading enabled on the hero image: Lazy loading is beneficial for off-screen images, but counterproductive on the main image — it delays its priority loading.
Web fonts blocking render: If a web font takes time to load and the H1 heading depends on it, LCP is delayed until the font is available.
Entry animations on above-the-fold elements: Webflow animations that delay the appearance of main content directly contribute to a high LCP.
Fixes applicable in Webflow
Fix #1 — Disable lazy loading on the hero image: Click the main image > in the Webflow element panel, ensure the "Lazy load" option is disabled for this specific image. Enable it only for off-screen images.
Fix #2 — Add the "eager" attribute on the LCP image: Via the image's Custom Attributes in Webflow, add the loading attribute with the value eager to signal the browser to load this image with priority.
Fix #3 — Upload compressed, correctly sized images: Webflow converts to WebP but does not resize. Upload images at their actual display resolution — a 4000px image on a 1440px section is unnecessarily heavy.
Fix #4 — Remove or delay entry animations on above-the-fold elements: In Webflow's Interactions tab, check that elements visible immediately on page load don't have "fade in" or "slide in" animations with a delay. These animations delay the LCP measured by Google.
Fix #5 — Use font-display: swap for fonts: In Webflow's font settings, enable the font-display: swap option so text displays immediately with a fallback font while the main font loads.
Metric 2 — CLS (Cumulative Layout Shift): Eliminating Visual Shifts
What is CLS?
CLS measures the sum of unexpected layout shifts that occur during page loading. A high CLS means elements move after their initial display — creating a frustrating experience and hurting rankings. Google targets a CLS under 0.1.
Common causes of poor CLS on Webflow
Images without defined dimensions: If an image is placed without reserved height, the browser doesn't know how much space to allocate before it loads — causing a visual shift.
Animations that modify block height or width: Webflow animations such as "slide down", "expand", or "height from 0" modify the page geometry and generate CLS.
Web fonts causing FOUT: The "Flash of Unstyled Text" occurs when a web font replaces the fallback font — if the two fonts have different dimensions, the text shifts and generates CLS.
Banners or pop-ups that insert into the document flow: Cookie bars or pop-ups that push existing content downward create measurable CLS.
Fixes applicable in Webflow
Fix #1 — Define fixed dimensions for all images: In Webflow, for each image, define a fixed width and height or use an aspect ratio in the style settings. This reserves space before loading and eliminates the associated CLS.
Fix #2 — Replace size animations with opacity animations: In Webflow's Interactions tab, avoid effects that change height, width, padding, or margin. Use exclusively opacity (0 to 1) and transform (translate, scale), which don't modify layout geometry.
Fix #3 — Enable font-display: swap: This option in Webflow's font settings reduces FOUT and therefore the CLS associated with font replacement.
Fix #4 — Position banners and pop-ups as fixed: In Webflow, elements with fixed or absolute positioning are not part of the document flow and don't generate CLS. A cookie bar in fixed position at the bottom of the screen doesn't affect the CLS score.
Fix #5 — Check CLS on mobile via Webflow breakpoints: CLS is often higher on mobile due to layout differences. Preview each page on mobile breakpoints in the Webflow editor to identify mobile-specific shifts.
Metric 3 — INP (Interaction to Next Paint): Improving Responsiveness
What is INP?
INP (Interaction to Next Paint) measures the time elapsed between a user interaction (click, keyboard input, mobile tap) and the browser displaying the next frame. It replaced FID in March 2024 and covers all interactions throughout the session, not just the first one. Google targets an INP under 200 milliseconds.
Common causes of poor INP on Webflow
Complex Webflow interactions on the main thread: Click- or hover-triggered animations that execute many JavaScript calculations block the main thread and delay the visual response.
Too many simultaneous interactions on the same page: A tab system, carousel, animated menu, and active hover effects running simultaneously overload rendering and degrade INP.
Heavy third-party scripts: Chat, tracking, or advertising scripts injected via Webflow Custom Code consume main thread resources and increase INP.
Unoptimized CMS images in dynamic lists: Loading many high-resolution images in a Webflow CMS list can block the render thread and affect INP.
Fixes applicable in Webflow
Fix #1 — Reduce the number of interactions on high-traffic pages: In Webflow's Interactions tab, audit all active animations on the page. Remove redundant hover effects and simplify navigation animations to reduce load on the main thread.
Fix #2 — Use CSS transitions rather than JavaScript animations: CSS transitions (opacity, transform) run on the GPU and don't block the main thread. In Webflow, prefer native style transitions over complex JavaScript interactions for simple visual effects.
Fix #3 — Load third-party scripts in deferred mode: In Webflow > Settings > Custom Code > Footer Code, place third-party scripts in the footer rather than the head. Add the defer or async attribute on script tags via Webflow's Custom Attributes.
Fix #4 — Limit the number of items in CMS lists: In Webflow's Collection List settings, limit the number of displayed items to the minimum necessary. Use pagination rather than displaying 50 entries at once.
Fix #5 — Optimize CMS images before upload: Resize images to their actual display size before uploading them to CMS fields. A 400x300px thumbnail doesn't need to be stored at 2000x1500px.
How to Measure Core Web Vitals on a Webflow Site
Four methods allow measuring Core Web Vitals on a Webflow site:
1. PageSpeed Insights (pagespeed.web.dev) — Google's most direct tool. Provides LCP, CLS, and INP scores for real data (CrUX) and lab data (Lighthouse), separately for mobile and desktop.
2. Google Search Console > Core Web Vitals — Global report that identifies failing, needs improvement, and good pages across the entire site, based on real user data.
3. Chrome DevTools > Lighthouse — Local audit executable from the browser on any URL, including unpublished Webflow previews (webflow.io).
4. Web Vitals Chrome extension — Google extension that displays CWV scores in real time during browsing, useful for testing specific INP interactions.
The 3 Most Common Errors on Webflow
Error #1 — Enabling lazy loading on all images without exception: Lazy loading must be disabled on the main image (LCP element). Applying it to all images indiscriminately degrades LCP.
Error #2 — Using "height: auto" animations to reveal content: Animations that transition an element from height: 0 to height: auto are the main sources of CLS on Webflow sites. Use opacity + transform animations instead.
Error #3 — Testing only on desktop: Google evaluates Core Web Vitals primarily on mobile. A site that performs well on desktop may have poor scores on mobile due to the lower processing power of mobile devices. Always test on both.
Conclusion
Core Web Vitals — LCP, CLS, and INP — are measurable and improvable ranking criteria directly from the Webflow interface. The most common causes of poor scores on Webflow are: misconfigured lazy loading, animations that modify page geometry, and non-deferred third-party scripts.
The recommended optimization priority: start with LCP (most visible ranking impact), then CLS (easiest to fix in Webflow), then INP (most dependent on interaction design choices).
Want an expert to audit and optimize the Core Web Vitals of your Webflow site? Our team can perform a complete diagnostic and implement the necessary fixes.
This guide is updated in April 2026 to reflect the active Core Web Vitals metrics in 2026, including INP as the official replacement for FID.
