Webflow Page Speed: The 12 Fixes That Move Core Web Vitals and the 5 That Do Nothing

71.3% of Webflow sites passed all three Core Web Vitals on mobile in September 2026, against 52.8% of the web as a whole, according to the HTTP Archive's technology report. Among the 2,635 Webflow sites in the top one million origins, the pass rate drops to 49.8%. Webflow gives a site a fast start. Busy sites lose it, mostly in ways the platform's own settings can fix.

Below are twelve fixes that move Core Web Vitals on a Webflow site, grouped by metric, and five popular ones that do not. Field data comes from the HTTP Archive, settings from Webflow's help centre as of October 2026, and the reasoning from Google's performance documentation.

Where Webflow sites stand in 2026

Core Web Vitals are three measures of real visits: Largest Contentful Paint (LCP) for loading, Interaction to Next Paint (INP) for responsiveness and Cumulative Layout Shift (CLS) for visual stability. Google's thresholds are an LCP within 2.5 seconds, an INP of 200 milliseconds or less and a CLS of 0.1 or less, read at the 75th percentile of page loads. A site passes when all three are good.

Hosting is rarely the problem: 73.1% of Webflow origins have a good server response on mobile, against 45.9% of the web. Busy Webflow sites fail on loading and responsiveness. On desktop, CLS is the weak measure, at 87.5% good. Page weight explains part of the gap, and the growth is in JavaScript.

Images got 22% lighter while JavaScript grew 34%. The data is correlational: it shows heavier scripts and lower pass rates travelling together, not that one caused the other. Our Website Speed Statistics 2026 article has the web-wide benchmark, and Is Webflow Good for SEO? compares Webflow with other builders.

Fixes 1 to 6: Largest Contentful Paint

Google splits LCP into four parts: time to first byte, resource load delay, resource load duration and element render delay. On a well-built page each delay is under 10% of the total. Most fixes below remove a delay.

1. Set the hero image to Eager. Webflow's image settings offer Lazy, Eager and Auto loading. Lazy suits images further down the page and is wrong for the LCP image. Google's guidance is blunt: never lazy-load it. The 2025 Web Almanac found about 16% of pages still do.

2. Add fetchpriority="high" to that image. Add it as a custom attribute so the browser fetches the hero first. In Google's test on Google Flights, it moved LCP from 2.6 seconds to 1.9 seconds. Only 17% of mobile pages with an LCP image use it (Web Almanac 2025). Use it on one image per template.

3. Make the hero an image element, not a background image. The browser cannot see a CSS background image until the stylesheet is parsed, and Webflow makes no responsive variants for background images. If the design needs one, preload it in the page's head code with fetchpriority="high", as Google recommends.

4. Do not hide the hero behind a load animation. Google's LCP guide uses this exact case as its warning example: when the LCP element stays hidden until JavaScript finishes loading, a faster image download just moves the wait into render delay. Webflow's Interactions with GSAP hide any element with a "from" state using visibility: hidden until Webflow's script has started. Good for flicker, bad for LCP when that element is the hero. A/B testing scripts that hide the page do the same. Animate secondary elements and let the hero render as plain HTML.

5. Turn on asynchronous JavaScript and per page CSS. Both switches sit under Advanced publishing options. With Asynchronously load JavaScript off, which is the default, Webflow loads its scripts before the page content renders. Turning it on (paid plans only) lets the content render while the scripts load. Per page CSS, also off by default, splits the single site-wide stylesheet into a shared file and a page file. Both can break custom code, so test on staging first.

6. Load fonts without webfont.js, and load fewer of them. Webflow's Google Fonts integration loads the Google Fonts API script, webfont.js, and in the published head it sits as a plain script tag with no async or defer, so the browser waits for it. Webflow's own help article recommends downloading the fonts and uploading them as custom fonts instead, for privacy reasons. Rename each uploaded file, because Webflow says a custom font that shares a name with one in its Google library may still load from Google. Upload WOFF2, up to 50% smaller than TTF or OTF by Webflow's figure, set font display to swap, and keep only the weights the design uses.

Fixes 7 and 8: image and video weight

7. Upload images through Webflow. Webflow creates up to seven responsive variants for each image uploaded in the Assets panel or a CMS image field, from 500px to 3200px wide, and writes the srcset for you. Images added through a CSV import or the API get none, so a scripted migration can ship desktop files to phones. Variants are made for JPG, PNG and WebP, and not for rich text or background images.

8. Treat every video as a budget line. A hero background video is rarely the LCP element, but it competes with the hero image for bandwidth on a phone connection. Keep it short and small with a poster, and check videos in menus, tabs and sliders. We would gate those so they load only on screens where they show.

Fix 9: Cumulative Layout Shift

9. Reserve space for everything that loads late. Images without width and height, embedded forms, cookie banners, chat launchers and fonts that swap are the usual causes. The 2025 Web Almanac found the median page still has two unsized images, rising to 23 on mobile at the 90th percentile. Give image wrappers a fixed aspect ratio, give embed containers a minimum height matching the loaded form, and make banners overlay the page rather than push it down. Test at desktop width, where Webflow sites fail CLS more often.

Fixes 10 to 12: Interaction to Next Paint

INP is where popular Webflow sites fall furthest behind: 68.5% good in the top one million against 88.0% across all Webflow sites. The cause is main-thread work.

10. Cut third-party tags, then delay the rest. Tag managers, analytics, heatmaps, chat and testing scripts all compete for the main thread. List every tag, name an owner, and remove the ones nobody defends. Load the rest after the page is usable, or on first interaction for chat. Put scripts before the closing body tag, as Webflow's custom code guidance recommends.

11. Trim interactions and transitions. Scroll-linked animations, Lottie files and parallax run on the main thread while the visitor scrolls and taps. Animate transform and opacity, not width or position: 40% of mobile pages run non-composited animations, which force layout work (Web Almanac 2025). Set transitions on named properties, not "all".

12. Shrink the DOM. Every node adds style and layout work after each interaction. Lighthouse warns above about 800 body nodes and errors above about 1,400. Duplicated desktop and mobile navigation, mega menus, hidden tab panes and long Collection Lists get Webflow sites there. Render one navigation, cap lists to what the page shows, and load rarely opened content on click.

The 5 fixes that do nothing for Core Web Vitals

Each of these sounds useful. None moves the field data Google uses.

1. Chasing a Lighthouse score of 100. Lighthouse is a lab test, run on predefined device and network settings. Its score weights Total Blocking Time at 30%, Largest Contentful Paint and CLS at 25% each, and Speed Index and First Contentful Paint at 10% each. It does not measure INP. The median Webflow site scores 0.625 on mobile Lighthouse, yet 71.3% of Webflow sites pass Core Web Vitals in the field. Use it to find causes, not as the goal.

2. Anything that changes only what the test sees. Some optimisation scripts detect speed-testing tools and serve them a stripped page. The score rises, but Core Web Vitals come from the Chrome UX Report, which records real visits, so nothing changes. Worse, the lab test stops measuring the page visitors get.

3. Compressing images that are not holding up LCP. Smaller files save bandwidth. But if the hero waits on a script, animation or stylesheet, Google's own example shows the saved time moves into render delay and LCP stays put. Images further down the page are not the LCP element at all.

4. Removing jQuery. Webflow has included jQuery 3.5.1 on every newly published site since August 2020, and its help centre warns that loading other versions causes conflicts. It is one cached file against a median 904 KB of JavaScript per Webflow page. Look at the tags in fix 10 instead.

5. Preloading what the browser already finds. The Web Almanac notes preload is only needed when a resource is not quickly discoverable in the HTML, such as a background image. Preloading a hero image element that already has fetchpriority="high" adds nothing, and preloading many files makes them compete.

How to use this on a Webflow site

Work in the order the field data points to. If LCP fails on mobile, start with fixes 1 to 4, each a small change rather than a rebuild. If INP fails, start with fix 10. If CLS fails, test on desktop first.

We build marketing sites in Webflow and applications in Next.js, so we have a stake in Webflow looking good. We have also built more than 20 Webflow sites in twelve months as a white-label partner to Web Tonic, the largest with a CMS of over 1,200 items. On a build like that, we would put fixes 1 to 7 into the build checklist rather than a later speed project, and check field data per template a month after launch. Our Webflow development service page explains how we scope a build.