Webflow SEO audit: the issues built into Webflow — and how to fix them

Audit your XML sitemap and internal linking so that every product and category page is discoverable and crawlable by Google — not hidden behind JavaScript, pagination, or missing links.

1. 1Webflow Project Settings › SEO: ensure 'Auto-generate sitemap' is enabled. The sitemap is served at yoursite.com/sitemap.xml.
2. 2CMS Collections: every Collection (e.g., Products, Categories) used on your site must have a Collection Page template published. Open the Designer › CMS Collections and confirm each collection has a live template page.
3. 3For each CMS Collection, open the Collection settings and confirm 'Indexable' is toggled ON — items with this off are excluded from the sitemap.
4. 4In the Designer, confirm your Navigation component contains links to category/collection list pages using standard <a> tags (Webflow's link element), not JavaScript-only interactions.
5. 5Webflow Ecommerce: Designer › Ecommerce › Products — ensure each product is Published (not Draft) and that the Product Template page is set to indexed.
6. 6Submit yoursite.com/sitemap.xml in Google Search Console after publishing.

<!-- CORRECT: Standard crawlable link -->
<a href="/products/blue-running-shoes">Blue Running Shoes</a>

<!-- WRONG: JavaScript-only — Googlebot cannot follow this -->
<span onclick="navigate('/products/blue-running-shoes')">Blue Running Shoes</span>

Eliminate unexpected layout shifts by reserving space for every image, video, embed, and dynamically injected element so nothing jumps when the page loads.

1. 1Images: In the Webflow Designer, click any image element → Element Settings (gear icon) → ensure 'Width' and 'Height' are set to explicit values (not 'auto' for both simultaneously). For CMS-bound images, set a fixed aspect ratio container: create a div wrapper with padding-top: 75% (for 4:3) and position the image absolutely inside it, or use the CSS aspect-ratio property in Webflow's Style panel.
2. 2Lazy loading: Webflow automatically adds loading='lazy' to images below the fold. Ensure images in the hero/above-the-fold area have loading='eager' (set in Element Settings) so they load immediately without a shift.
3. 3Fonts: In Project Settings → Fonts, Webflow inlines font-display: swap for Google Fonts automatically. For custom uploaded fonts (Project Settings → Fonts → Upload), add font-display: optional via a global CSS embed in Project Settings → Custom Code → Head code: <style>@font-face { font-display: optional; }</style>.
4. 4Interactions / animations: In Webflow Interactions panel, review any 'Page Load' animations that move elements downward on trigger — replace with opacity-only animations that do not affect layout.
5. 5Embeds: For any HTML Embed element (e.g. a reviews widget), wrap it in a div with a min-height style set in the Style panel to the expected rendered height.
6. 6Verify: Publish your site and run PageSpeed Insights; check CLS < 0.1 on mobile.

<!-- CORRECT: explicit width and height prevent layout shift -->
<img
  src="/images/product-red-sneaker.jpg"
  alt="Red canvas sneaker, side view"
  width="800"
  height="800"
  loading="lazy"
>

Reduce Interaction to Next Paint (INP) to under 200 ms by breaking up long JavaScript tasks, deferring non-critical third-party scripts, and lightening event handlers so the page feels fast and responsive after every tap or click.

1. 1In the Webflow Designer, go to Page Settings (the gear icon) for each page. Scroll to 'Before </body> tag' and move any third-party script embeds there if they are currently in 'Inside <head> tag', so they load after page content.
2. 2Add `defer` or `async` as an attribute directly in your `<script>` embed code within the Custom Code panel.
3. 3In Project Settings → Custom Code, review scripts in the 'Head Code' and 'Footer Code' sections. Move non-critical scripts to Footer and add `defer`.
4. 4For interactions built with Webflow Interactions, audit any 'Page Load' triggers that fire heavy animations immediately — delay them or trigger them on scroll/interaction instead.
5. 5Use Finsweet's Webflow Optimizer or a Cloudflare Worker to further defer scripts if native embed options are insufficient.
6. 6Verify INP improvement with PageSpeed Insights and Chrome DevTools Performance panel after publishing each change.

Reduce Largest Contentful Paint (LCP) to under 2.5 seconds by serving the hero image in a next-gen format (WebP/AVIF), preloading it, and eliminating render-blocking resources.

1. 1IDENTIFY LCP IMAGE: Run PageSpeed Insights on your published Webflow URL. The LCP element is usually a Hero Section background image or a large <img> element at the top of the page.
2. 2CONVERT TO WEBP/AVIF: In the Webflow Designer, select your hero image element › Asset panel › upload a WebP version of your hero image. Webflow also auto-generates WebP for images uploaded as JPEG/PNG in newer projects.
3. 3SET LOADING PRIORITY: Select the hero <img> in the Designer › Element Settings (D key) › set Loading to 'Eager' and in the Custom Attributes panel add: Name: fetchpriority, Value: high.
4. 4PRELOAD: Go to Project Settings › Custom Code › Head Code. Add: <link rel='preload' as='image' href='YOUR_WEBFLOW_IMAGE_CDN_URL' fetchpriority='high'>. Find the URL from the published page's source.
5. 5DEFER JS: In Project Settings › Custom Code, move non-critical third-party <script> tags to the Footer Code section and add 'defer'. Do not defer scripts that must run before first paint.
6. 6REMOVE INTERACTIONS FROM HERO: Webflow Interactions that trigger on page load for above-the-fold elements add JS weight. Simplify or remove entrance animations on the hero section.
7. 7VERIFY: Publish the site and re-run PageSpeed Insights. Check Webflow's SEO settings confirm no lazy-load is applied to the hero.

<!-- Webflow: Head Code injection — preload LCP hero image -->
<link
  rel="preload"
  as="image"
  href="https://uploads-ssl.webflow.com/YOUR_SITE_ID/YOUR_IMAGE_ID/hero-banner.webp"
  fetchpriority="high"
>