Webflow: performance and SEO settings worth changing

Webflow hosting does more of the work than most platforms: a global CDN, HTTP/2, a certificate, minified files and responsive image variants come with the plan. What is left is a short list of settings that decide whether a Webflow site scores 60 or 90, and most of them live in two places: Site settings and the settings of each page. This guide goes through them in the order they matter, with the findings a report will show on a typical Webflow site and the realistic fix for each. Allow an hour, most of it for images.

Quick answer

• Site settings → SEO: turn on the auto-generated sitemap, set the global canonical tag URL to your live domain, and switch on "Disable Webflow subdomain indexing" so the .webflow.io copy stays out of Google.
• Every page: a title and meta description in the page's SEO settings, an Open Graph image in its Open Graph settings; for CMS templates, bind those fields to the collection.
• Images: compress before upload, convert to WebP in the Assets panel, keep responsive variants on, and set the hero image's Load option to Eager (everything else stays lazy).
• Fonts: upload the two or three weights you use as custom fonts instead of loading a Google Fonts family, and preload the body font from the head code.
• Interactions and Lottie: every animation costs JavaScript on every page; keep them off the first screen.
• Redirects: add old paths in the 301 redirects list before you publish a restructure.
• Run the speed test and the SEO audit before and after. Server headers are set by Webflow; you cannot change them on standard plans.

Why it matters

A Webflow site starts from a good place. The HTML is served from an edge near the visitor, the CSS and JavaScript are minified, and the connection is HTTPS from day one. That means the findings a report shows on a Webflow site are almost never about the server; they are about what was put into the site. A 3 MB hero exported straight from Figma, a Google Fonts family with eight weights, a page-load animation on the hero, a missing meta description on every CMS item: these are the differences between Webflow sites, and every one of them is a setting or an upload you control.

The SEO side has the same shape. Webflow generates the sitemap, the canonical tags and the hreflang tags for localised sites, but each of those is a toggle that someone has to switch on, and each page still needs its own title, description and preview image. The report tells you which ones were missed.

How getReport checks it

The speed test runs the full report and opens the Speed module. The panel shows the lab metrics from a Lighthouse run on a throttled phone, the field numbers from real Chrome users when the site has enough traffic, the filmstrip and the request waterfall:

The four findings that come up most on Webflow sites:

On Webflow the LCP element is nearly always the hero image or a background image in the first section. The technical detail names it, which tells you which asset to compress and which image element to set to Eager.

The check comes from Lighthouse and lists each image that would be smaller as WebP or AVIF. Webflow's Assets panel converts to WebP; the finding passes once the listed images are WebP.

The last two are the SEO tab. The canonical finding is open when the global canonical tag URL is empty; the sitemap finding looks for a Sitemap: line in robots.txt, which the robots.txt editor in the same tab lets you add.

Step by step

1. Set the SEO tab once

Open Site settings → SEO. Four settings, top to bottom:

1. Auto-generate sitemap: on. Webflow then serves /sitemap.xml with every published static page and CMS item. Republish after changing it.

2. robots.txt: add the sitemap line so crawlers find it without Search Console:

   User-agent: *
   Disallow:
   
   Sitemap: https://www.example.com/sitemap.xml

   Use the full URL with the scheme and the exact host you serve the site on.

3. Global canonical tag URL: your live domain with scheme, for example https://www.example.com. Webflow appends each page's path and adds <link rel="canonical"> to every page. Without it, the same page is reachable at the custom domain and at name.webflow.io and nothing tells Google which one counts.

4. Disable Webflow subdomain indexing: on. The .webflow.io copy is a full duplicate of the site; this keeps it out of search results.

Then check the Hosting tab (Publishing in newer workspaces): SSL on, and under Advanced publishing options, minify HTML, CSS and JS all on. These are usually on already; confirm rather than assume.

2. Give every page a title, description and preview image

Page settings → SEO settings holds the title tag and meta description; Open Graph settings holds the preview title, description and image. For static pages, write them by hand. For CMS collection templates, bind each field to a collection field (the small purple "+" beside the field): a "Meta title" and "Meta description" plain-text field and an image field for the preview. Add a fallback in the collection so items without a custom value still get one.

Titles of 50–60 characters and descriptions of 120–155 characters fit the result page; the SEO audit's title and description findings say when one is missing or too long. The Open Graph image should be 1200 × 630 px; the Social module previews it as Facebook, LinkedIn and X will show it.

3. Fix the hero image first

This is where most Webflow points are. In order:

1. Resize before upload. A full-width hero needs 1600–2000 px, not the 5000 px original. Export at the largest size it is displayed at.
2. Convert to WebP in the Assets panel: select the images and use the compress option. Webflow keeps the original and serves the WebP.
3. Keep responsive variants on. Webflow generates smaller versions of inline images and writes a srcset for them; the per-image "Responsive image" setting must stay on. Background images set in CSS do not get variants, so if the hero is a background image, make it an inline image element instead.
4. Set the hero to Eager. Webflow lazy-loads images by default. A lazy-loaded hero is discovered late and pushes LCP back; in the image element's settings, change Load from Lazy to Eager for the first image on the page only.

Do the same for the first image of each CMS template (the article image, the product photo). Everything below the first screen stays lazy.

The formats question in more depth is in modern image formats: WebP, AVIF and when JPEG is still fine.

4. Trim the fonts

Site settings → Fonts lists Google Fonts, Adobe Fonts and custom uploads. A Google Fonts family loads from Google's servers, which is an extra connection before text can render, and adding a family adds every weight you tick. The lighter route:

1. Download the family and keep the two or three weights you use (Regular, Semibold, maybe Italic) as WOFF2.
2. Upload them under Custom fonts. They are then served from the same CDN as the page, with no extra connection.
3. Preload the body font from Site settings → Custom code → Head code:

<link rel="preload" href="https://cdn.prod.website-files.com/…/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>

Take the exact URL from the published page's CSS (view source, search for @font-face). Preload only the one or two fonts used above the fold; preloading eight files makes things worse. Which hint fits which case is in preload, preconnect, prefetch: which hint when.

5. Count the cost of interactions and Lottie

Webflow's interactions run from the site's JavaScript file, so every interaction on any page is downloaded on every page. That is fine for a hover state and expensive for a load animation on the hero: the animation delays the moment the biggest element is visible, which is exactly what LCP measures.

Lottie animations add a player library plus the animation's JSON file, which is often several hundred kilobytes. Rules that keep the score:

• No load animation on the hero section. Let it appear, animate the rest.
• Lottie below the first screen only, and export it small (fewer frames, simpler shapes).
• Delete interactions that are no longer used; they still ship.

The report's render-blocking, unused JavaScript and Total Blocking Time findings are where this shows up.

6. Add structured data in the head code

Webflow does not generate JSON-LD for you. Site-wide markup goes in Site settings → Custom code → Head code; page-specific markup in the page's own custom code. An Organization block for the whole site:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Example Studio",
  "url": "https://www.example.com/",
  "logo": "https://www.example.com/logo.png",
  "sameAs": ["https://www.linkedin.com/company/example-studio"]
}
</script>

For CMS templates, bind collection fields into the page custom code so each article or product carries its own block. Each custom code field has a 10,000-character limit, so keep it to what earns a rich result: Organization, Article or Product, BreadcrumbList. The Structured data module validates the result.

7. Set redirects before you restructure

Renaming a page or a collection slug changes URLs, and old links, Google's index and shared posts keep pointing at the old ones. Before publishing the change, add each old path in Site settings → Hosting (Publishing) → 301 redirects. Wildcards handle whole folders:

/blog/(.*)      →  /articles/%1
/old-services   →  /services

Redirect to the final page in one hop; a redirect that lands on another redirect is what the SEO audit's redirect-chain finding reports.

8. Localised sites

With Webflow Localization, each locale gets its own subdirectory (/fr/, /de/) and Webflow writes the hreflang tags for every localised page. What is still yours: translated titles and descriptions per locale, and checking that each locale's pages are actually published. The hreflang checker confirms the pairs point back at each other.

Platform notes

What the report will flag that you cannot change

• Security headers. Webflow sets the response headers; standard plans cannot add a Content-Security-Policy or change what is there. Custom HTTP headers are an Enterprise feature. Note these findings as "platform" and move on; the connection is HTTPS and that is what matters most.
• Unused CSS. Webflow ships one stylesheet for the whole site, so every page downloads rules for every other page. Deleting unused classes in the Style Manager (the "clean up" option) shrinks it, but the finding rarely closes completely.
• Server response time. The edge cache answers fast; if TTFB is high in the lab, re-run once, as the first request after a publish is a cache miss.

Exporting the code

Sites exported to another host lose the CMS but keep the CSS and JavaScript. The image variants and the WebP files come with the export; the redirects and the sitemap do not, so set those up again on the new host.

Verify

• The speed test shows LCP under 2.5 s on mobile and the technical detail names your compressed WebP hero; the image-formats finding passes.
• The SEO audit shows "Canonical tag is present" pointing at your live domain, "robots.txt declares a sitemap", and every tested page with a title and description.
• https://www.example.com/sitemap.xml opens and lists the pages you expect; https://name.webflow.io/ carries noindex.
• The Social module preview shows the right image for a CMS item, not the site default.

Common mistakes

• Global canonical URL left empty after connecting the domain. Both the custom domain and the .webflow.io copy are indexable duplicates. Fill in the field and republish.
• Hero image left on Lazy. The default is right for every image except the first one. Set that one to Eager.
• Uploading originals and relying on responsive variants. Variants scale the width, not the compression. A 4 MB original still produces a heavy largest variant; compress before upload.
• A Google Fonts family with every weight ticked. Each weight is a file. Upload the three you use as custom fonts.
• Load animations on the hero. They delay LCP on the most-visited section of the site. Animate the second section instead.
• Publishing a slug change without redirects. Add the old path to the 301 list first, then publish. Check it with the redirect checker.