Skip to main content
StackraStackra
Website Builder
~1% of the web

Webflow SEO Explained: Platform Strengths and Configuration Gaps

Webflow generates clean, semantic HTML server-side and serves it via Fastly CDN. The platform is not a ceiling -- but Interactions, missing schema, and the webflow.io subdomain trap are the most common causes of poor scores on Webflow sites.

Free to sign up · Results in ~3 minutes

What Stackra audits

Your Growth Score is built from three pillars. Here is what each one covers and why it matters for Webflow sites specifically.

Technical Confidence

How fast your pages load and how securely they are served. Webflow's server-side rendering and Fastly CDN are advantages. What varies between a fast and slow Webflow site is mostly Interactions, source image weight, and third-party embeds.

Search Visibility

Whether search engines can find, read, and understand your site. Webflow sites are crawlable on a custom domain. The main SEO gaps are missing schema markup (not auto-generated) and missing or thin meta descriptions on individual pages.

Growth Readiness

Whether your site converts visitors into leads or customers. Measured through CTAs, contact options, trust signals, and how clearly your offer is presented. Webflow gives full control over all of these elements.

67% of Webflow sites pass all three Core Web Vitals on mobile. LCP is the primary drag -- Interactions, Lottie animations, and large source images are the main causes.

Source: CrUX February 2026.

What Webflow controls vs. what you control

Webflow manages the hosting layer but gives you more configuration access than fully managed builders like Wix or Squarespace.

Platform handles
  • CDN delivery via Fastly (all hosted plans)
  • SSL certificates automatically provisioned
  • Server-side rendering of all pages
  • robots.txt editing in Project Settings > SEO
  • Sitemap generation (must be enabled in Project Settings > SEO)
  • Image format conversion and responsive delivery via Fastly CDN
  • Custom response headers (Business plan and above)
You control
  • Source image quality before uploading
  • Interactions and animations -- scroll effects, parallax, hover states
  • Third-party embeds via Embed elements (Lottie, video, chat, forms)
  • Web font selection and number of font weights loaded
  • Meta descriptions and SEO settings per page
  • Custom domain connection (webflow.io subdomain is not indexed)
  • Schema markup via Embed elements or custom code

Why Webflow sites are sometimes slow

In order of how often each is the root cause. Fix from the top down.

1

Heavy Interactions and scroll-triggered animations

Webflow Interactions are the most common cause of poor Core Web Vitals on Webflow sites. Scroll-triggered animations, parallax effects, and complex hover states add layout recalculation work that hurts Cumulative Layout Shift and Interaction to Next Paint. Sites with no Interactions enabled typically score well; sites that use them heavily often do not.

Audit your Interactions in the Webflow Designer. Disable or simplify scroll-triggered effects on above-fold elements first. Use CSS transitions instead of Webflow Interactions where possible -- they carry lower runtime overhead. Parallax effects on large images are particularly costly and should be removed unless essential to the brand.

2

Lottie animations and Rive files

Lottie animations load the lottie-web library (approximately 150KB) plus each animation JSON file. Rive files load a separate runtime. A single Lottie in the hero section can add 200-400KB to the page before the main content appears and often blocks rendering.

Audit every Lottie and Rive animation on your site. Remove animations that are not essential. For animations that must stay, load them lazily below the fold rather than in the hero. Replace simple animations with CSS keyframe animations where possible -- they carry zero library overhead and render significantly faster.

3

Large source images uploaded at full resolution

Webflow's CDN (Fastly) handles format conversion and responsive sizing automatically. But it does not reduce the source file weight. A 10MB hero image is served in WebP via CDN but still carries its original weight. This is the most common Largest Contentful Paint driver on Webflow sites that are failing CWV.

Compress images before uploading. Target under 300KB for full-width hero images, under 150KB for secondary images. Squoosh.app is free and effective. Set explicit width and height on each image element in the Designer so the browser reserves space -- this prevents Cumulative Layout Shift from image reflow.

4

Third-party embeds via Embed elements

Chat widgets, video players, booking tools, and marketing scripts added via Webflow Embed elements load outside Webflow's optimization layer. Unlike Fastly-served assets, these run on third-party infrastructure with no performance guarantees. Each additional embed competes for network bandwidth and delays rendering.

Audit every Embed element on your site. Defer non-essential scripts (chat, analytics) by loading them after the main content is interactive. Where Webflow's native Form block covers the need, use it instead of an embedded third-party form tool.

5

Too many web fonts or font weights

Loading multiple typefaces or more than three weights of the same typeface adds network requests before text can render. Google Fonts loaded via @import in Webflow custom code blocks is a common pattern that delays rendering because the browser must resolve the import before rendering any text on the page.

Limit to one typeface and two to three weights. Load Google Fonts via a link rel=preconnect in the head custom code block, not @import. Webflow's built-in font picker handles this correctly; issues arise when fonts are added manually via custom code.

Schema and structured data on Webflow

Webflow does not generate schema markup automatically. All structured data must be added manually via an Embed element on the page or via the custom code fields in Page Settings or Project Settings.

JSON-LD via page Embed element

Place a Webflow Embed element on the page, add a script tag with type application/ld+json containing your JSON-LD, and publish. This gives you per-page schema without affecting other pages or the site-wide codebase.

JSON-LD via Page Settings custom code

Open Pages, click the gear icon on any page, then SEO Settings > Custom Code (head). Paste your JSON-LD there. This applies only to that page and persists across Designer changes.

Site-wide JSON-LD via Project Settings

For schema that applies to every page (Organization, WebSite), add it in Project Settings > Custom Code > Head Code. This injects the block on every published page. Use for entity-level schema that does not change per page.

What Webflow does not do natively

Webflow has no native schema generator for products, blog articles, or local business details. Unlike Wix or Shopify, which generate schema automatically from active apps or platform features, every schema type on a Webflow site must be written and maintained manually.

Platform quirks Stackra checks for

Webflow-specific signals and behaviors that affect how scans are interpreted.

webflow.io subdomain is not indexed by search engines

Any site published only to its webflow.io subdomain will not appear in Google or any other search engine. Connect a custom domain and republish before running any SEO audit. Stackra checks for the webflow.io subdomain and flags it if the scanned URL is on the staging domain.

Auto-generate sitemap must be turned on manually

Webflow does not enable sitemap generation by default on all projects. Go to Project Settings > SEO and turn on Auto-generate sitemap. Individual pages can be excluded per-page in Page Settings > SEO Settings. If this checker reports a missing sitemap, this setting is almost always the cause.

Custom response headers available on Business plan and above

Webflow's Business hosting plan and above lets you set custom response headers. This means security headers are configurable without a separate proxy. Stackra evaluates a Webflow site's security header grade as a configuration choice, not a platform ceiling -- the same way it treats Vercel and Netlify sites.

Clean semantic HTML is a genuine SEO advantage

Webflow generates clean, semantic HTML server-side. Pages contain their full text content in the raw HTML response -- no JavaScript execution required to read the content. This is meaningfully better than client-side rendered React or Vue SPAs for search engine crawlability and AI crawler access.

CMS-powered pages and static pages have similar profiles

Webflow CMS collection pages render dynamic content from Webflow's CMS at request time. Static pages and collection pages typically have similar performance profiles. The main variable is how much Interaction code and custom embeds are added to each page type.

See how your Webflow site scores

Stackra detects Webflow automatically and tailors every recommendation to what you can actually change in the Designer, Project Settings, and custom code.

Free to sign up · Results in ~3 minutes