Core Web Vitals for Webflow

What real Webflow sites measure

We measured Webflow’s own marketing site and Lattice, a well-known Webflow customer site, with Lighthouse 13 (mobile emulation) in July 2026. webflow.com scored 33/100 — LCP 6.9 s, TBT 2,259 ms — a designer showcase paying for its own animation density. lattice.com scored 38/100 with LCP at 4.9 s and TBT of 1,795 ms. CLS was essentially zero on both (0.001 and 0.00), which is typical: Webflow’s generated markup is dimensionally stable. The pattern matches what we see across Webflow sites in general — stability excellent, blocking time inflated by interactions and third-party scripts, LCP delayed by heavy hero media. Both of these sites would move double digits with a static first viewport and deferred scripts, which is exactly the playbook the rest of this guide walks through.

Interactions and Lottie: the Webflow-shaped TBT problem

Webflow’s interactions engine (IX2) is the platform’s superpower and its main-thread liability. Every element with scroll-triggered movement, parallax, or multi-step reveals is animated in JavaScript — a handful is free, but marketing pages that animate every section stack main-thread work that shows up directly in Total Blocking Time on mobile. Audit the Interactions panel: consolidate near-duplicate animations, remove them from elements below the fold that nobody sees animate, and for simple fades and slides use CSS transitions via combo classes instead — the browser composites those off the main thread.

Lottie deserves its own line item. After-effects exports are JSON files that can run to hundreds of kilobytes each and render on the main thread; several Lotties above the fold routinely double a page’s blocking time. Replace decorative Lotties with SVG or a compressed video where possible, and lazy-trigger the rest.

Assets: what you upload is what users download

Webflow generates responsive srcset variants for inline images automatically and, in current projects, serves WebP/AVIF conversions from its CDN — but every variant derives from your upload, so compress before uploading and keep heroes under ~250KB. Two Designer-specific rules matter more than any compressor. First, prefer inline image elements over CSS background images for content imagery: background images get no srcset, no native lazy loading, and are invisible to the preload scanner — a background-image hero is the classic Webflow LCP mistake.

Second, mind the asset panel’s conversion tools: Webflow can convert existing images to WebP in place. Run it on legacy projects that predate automatic conversion, and re-publish. For video, use Webflow’s background-video element (which compresses and strips audio) rather than embedding raw MP4s, and keep it out of the first viewport.

Custom code embeds and third-party scripts

Everything in Project Settings → Custom Code head area blocks rendering on every page of the site. The head slot should contain almost nothing — analytics belongs in the footer slot or, better, loaded with defer; chat widgets, marketing pixels, and A/B testing snippets should load per-page via page-level custom code only where actually used. Each script you evict from the global head shows up as recovered FCP.

Check whether your project still ships jQuery: older Webflow projects include it for interactions, and newer ones can drop it (Site Settings → Advanced) if no custom code depends on it — that is ~30KB of parse-and-execute removed from every page. For fonts, upload WOFF2 files or use Webflow’s Google Fonts integration and confirm font-display: swap, so text renders in a fallback instead of staying invisible while fonts download.

Publishing settings and the Webflow platform

Webflow’s hosting stack — global CDN, HTTP/2+, TLS, asset fingerprinting — is managed and fast; you do not configure servers, and TTFB is rarely your problem. What you do configure lives in Site Settings: enable minification for HTML, CSS, and JavaScript under Advanced (off by default on some older sites), and review the SEO tab where global canonical tag, sitemap generation, and robots.txt rules live. The global canonical field in particular is empty until set — populate it so every page emits a self-referencing canonical.

Webflow also ships a genuinely useful custom 404 page slot (Site Settings → 404 page). Design one with navigation and search rather than leaving the default — the audit checks for exactly this, and it is the difference between keeping and losing a visitor who followed a dead link.

Measuring Webflow correctly

Test the custom domain, not the .webflow.io staging URL — staging skips some production optimizations and is not what Google indexes (staging is noindexed by default; verify yours is). Measure your heaviest template (usually the homepage or a feature page dense with interactions) and one CMS-driven page, since Collection pages carry different assets than static pages.

When diagnosing, use the waterfall: on Webflow the story is almost always visible in request order — a background-image hero fetched late, a Lottie JSON queued before the hero, or a head script delaying first paint. Fix the order (inline image + preload, defer the script), re-publish, and re-test; Webflow deploys are instant, which makes it one of the fastest platforms to iterate performance fixes on.