Webflow performance optimisation
Webflow's infrastructure is solid, but interactions, CMS collections, video backgrounds, and third-party embeds can push load times past what Google and real users will tolerate. We find those bottlenecks and fix them.
A beautiful Webflow site with a low PageSpeed score loses rankings to simpler, faster competitors — especially on mobile where interaction costs are highest.
For Webflow agencies and in-house teams who want both design quality and performance scores.
Webflow generates clean, semantic HTML and CSS — a genuine advantage over page builder output — and its global CDN delivers assets reliably. But the performance advantage disappears when sites load heavy custom interactions, large Lottie animations, background video loops, and multiple analytics or chat scripts added through the project's custom code settings. Each addition accumulates silently until a PageSpeed audit reveals a mobile score in the 40s.
Webflow CMS collections are particularly prone to image performance problems. Images uploaded to the CMS often lack explicit dimensions, causing layout shift when they load. Without responsive image markup, mobile devices receive the same full-resolution image as desktop visitors — often two to four megabytes for a single blog post header. Multiply that across a collection of fifty posts and the category page becomes difficult to cache and expensive to load.
Third-party integrations are the other common culprit. HubSpot forms, Intercom chat, Typeform widgets, and Calendly embeds are popular on Webflow marketing sites, and each one adds a synchronous script that blocks the main thread during load. On a site with four of these integrations, the browser may spend 800ms–1,200ms executing third-party code before your hero text is even visible.
Lottie animations present a particular trade-off. They look premium and differentiate branded sites, but each animation file is a JSON payload that must be parsed and rendered frame by frame on the client's CPU. A 500kB Lottie file on the hero section costs more in CPU time than the animation appears to be worth when you look at the resulting INP score. Lighter alternatives — SVG animations or CSS keyframes — often achieve a similar visual effect with a fraction of the performance cost.
800ms–1.2s
blocked by third-party scripts
A typical Webflow marketing site with four third-party integrations (forms, chat, analytics, video) can spend over a second executing external scripts before the page is interactive.
500kB+
Lottie animation file size
A single complex Lottie animation on a hero section can exceed 500kB of JSON that must be parsed and rendered on the client's CPU, directly impacting INP and mobile performance.
2–4×
image weight without responsive sizes
Without explicit srcset attributes on CMS images, mobile devices download the same full-resolution asset as desktop — typically two to four times more data than needed for the viewport.
Performance improvements that work within Webflow's Designer and CMS constraints.
We profile every Webflow Interaction and Lottie animation using browser performance tooling to measure their CPU cost. Scroll-triggered interactions that run on every scroll event are restructured to use Intersection Observer, reducing continuous main-thread work. Heavy Lottie files are replaced with CSS or SVG alternatives that achieve the same visual effect.
We add explicit width and height attributes to every CMS image field in collection templates, preventing layout shift when images load. Responsive srcset markup is implemented so mobile devices receive appropriately sized images. Upload guidelines are provided to your content team so future images are added at correct dimensions and compression levels.
Every script loaded through Webflow's custom code settings is profiled for its size and execution time. Non-critical scripts — chat widgets, Calendly embeds, Typeform — are deferred until after the page is interactive using a facade or delayed script load approach. Marketing pixels are consolidated through Google Tag Manager to reduce individual network requests.
Background video loops are replaced with a static image poster on mobile viewports, where the video adds bandwidth cost without visual benefit. Large Lottie animations are converted to lighter CSS keyframe or SVG equivalents where the animation complexity allows it, typically reducing the hero section payload by 300–500kB.
We reduce Google Fonts families and weights to the minimum required by the design, add preload hints for the most-used font file, and implement font-display swap to prevent invisible text during load. Where the design allows, we transition to system fonts or a single variable font to eliminate multiple font download requests.
The hero image or section background is identified as the LCP element and given explicit preload priority. We add a preconnect hint to the Webflow CDN domain and a preload link for the hero asset so the browser fetches it before parsing the rest of the page, reducing LCP time by 300–600ms on most sites.
We review every script in Webflow's project-level and page-level custom code sections, profile their size and blocking impact, and restructure loading order so critical scripts load first and non-critical scripts are deferred or loaded asynchronously. Tags that can be moved to a tag manager are migrated for better control.
We address LCP through hero image preloading and video poster optimisation; INP through Interaction audit, scroll event reduction, and third-party script deferral; and CLS through image dimension attributes, stable font loading, and ensuring late-loading embeds do not push content below them.
Webflow's Designer outputs well-structured HTML and scoped CSS, which gives sites a performance head start compared to bloated page builders. However, the Webflow platform's own JavaScript runtime — which powers Interactions, the Lightbox, Slider, and other native components — is loaded globally even on pages that do not use those components. This is a known limitation of the platform, and while Webflow has reduced the runtime size over time, it still represents a baseline JavaScript cost that affects mobile INP scores before any custom code is added.
The custom code embed blocks in Webflow's project settings and individual page settings are the primary source of controllable performance problems. Agencies add analytics tags, marketing pixels, chat tools, and form providers here — often without profiling their individual cost. A script that adds one tracking event may also download a 200kB SDK, set up a polling loop, and listen to every DOM event. Auditing these embeds with browser DevTools consistently reveals opportunities to defer or replace three to five scripts with no loss of functionality.
Webflow's native asset pipeline handles hosting and CDN delivery, but it does not automatically resize or compress images uploaded to the CMS. The responsibility for upload quality lies with the editor adding the content. Teams that use Webflow CMS for blog posts, case studies, or team directories often accumulate thousands of unoptimised images over time. A systematic image audit and replacement — combined with adding width, height, and loading attributes to CMS image fields — resolves CLS and LCP issues across entire collection types with a single template change.
Representative outcomes from optimization projects. Your results depend on stack and traffic.
SaaS marketing site
Before
Mobile score 42
After
Mobile score 83
Lottie replacement and image pipeline implementation
Agency portfolio
Before
LCP 4.1s
After
LCP 1.9s
Video poster optimisation and font preloading
B2B CMS blog
Before
INP 380ms
After
INP 160ms
Scroll interaction deferral and third-party script audit
We run a deep speed and Core Web Vitals audit on your key templates — home, collection, product, and checkout where relevant. Every issue is ranked by its impact on real user experience and revenue.
We implement prioritised fixes: images, scripts, caching, and theme or app bloat — focused on revenue pages first. Each change is tested in staging and measured against a baseline.
You get ongoing checks so regressions from new apps, themes, or campaigns are caught before they hurt SEO and sales. Alerts fire when scores drop below your target threshold.
Explore our speed optimization services
Straight answers about timelines, risk, and what to expect.
PageSpeed optimisation service to increase your PageSpeed Insights score on mobile and desktop. Fix low scores with a clear, prioritised plan backed by Lighthouse data.
Learn more →Core Web Vitals fix service to improve LCP, INP, and CLS scores. We diagnose failing metrics and implement changes that help SEO and real-user experience.
Learn more →Speed up your Wix website and improve Core Web Vitals. Fix slow load times caused by Wix apps, images, and scripts with a clear, prioritised action plan.
Learn more →Run a free speed test and get a prioritised list of fixes tailored to Webflow.