Skip to content
IndieTools

Webflow PageSpeed Optimization Guide

A current Webflow speed guide for responsive images, fonts, interactions, custom scripts, publishing options, Core Web Vitals, and safe testing.

GuideCMS

By

Updated 6 min read

Webflow handles hosting and generates the site's core HTML, CSS, and JavaScript, while designers control the page structure, assets, interactions, fonts, embeds, and custom code. Performance work should concentrate on those controllable layers and verify the published result rather than relying on how the canvas feels in the Designer.

Measure the published site

Test the custom-domain production URL after a clean publish. The Designer and staging environment do not reproduce every production cache, domain, script, consent, or third-party condition.

Choose a representative set of URLs:

  • home page;
  • a large CMS collection page;
  • a CMS item or article;
  • a conversion landing page;
  • an Ecommerce product page where applicable;
  • the page with the most interactions or embeds.

Record mobile and desktop separately. Save transferred bytes, request count, LCP, CLS, FCP, main-thread long tasks, and the largest image, font, CSS, and JavaScript resources. Run comparable Lighthouse tests more than once, and use PageSpeed field data when the URL or origin has enough traffic.

What Is a Good PageSpeed Score? explains why a 90-plus lab score is useful but does not replace field Core Web Vitals.

Start with Webflow's own diagnostics

Webflow's current site-speed guidance points to large images, linked assets, third-party integrations, transitions, interactions, animations, and embedded content. Run the Site health scan where available, then verify each recommendation against the affected production page.

Start with high-confidence cleanup:

  • remove unused assets after confirming they are not referenced;
  • delete abandoned interactions and custom-code experiments;
  • consolidate duplicate styles and components;
  • remove hidden desktop or mobile sections that still download resources;
  • simplify oversized collection lists and nested structures;
  • document every external integration and its owner.

Avoid redesigning several systems at once. A small measured change is easier to validate and roll back.

Fix image delivery

Images are frequent LCP candidates and often dominate page weight. Webflow's responsive image system creates srcset and sizes variants for images uploaded directly through supported Webflow fields. Images introduced through other paths, including some imports and APIs, may not receive the same variants.

For each large image:

  1. Crop to the displayed aspect ratio.
  2. Resize the source to a sensible maximum.
  3. Compress it or use Webflow's supported WebP conversion workflow.
  4. Confirm responsive candidates exist in the published HTML.
  5. Add accurate width and height behavior to prevent movement.
  6. Write alternative text for informative images.

Inline image elements can use responsive variants. CSS background images and some rich-text images have different limitations, so do not assume they receive the same delivery behavior. For a visual hero, consider an image element positioned with object-fit when it provides better responsive semantics and discovery.

Do not lazy-load the likely LCP image. Lazy-load appropriate off-screen media, and avoid making several above-the-fold images compete for high priority. For CMS imports, inspect the published result and optimize source files when responsive variants are absent.

Reduce fonts and CSS

Every font family, weight, and style adds potential transfer and rendering work. Use WOFF2 for uploaded custom fonts where licensing permits. Webflow's custom-font guidance recommends WOFF2 and exposes font display controls.

Keep only the variants the design uses. A variable font can reduce separate files in some families, but compare its actual subset size with the static weights you need. Set a suitable fallback and test whether the swap moves text or changes button dimensions.

Clean unused classes and duplicate styling deliberately. Test shared components and CMS templates after cleanup, because a class that appears unused on the current page may still be used elsewhere. On large sites, Webflow's per-page CSS publishing option can reduce page-specific CSS, but it needs regression testing when custom CSS or shared libraries are involved.

Budget interactions and animation

Interactions can improve comprehension, but each trigger, timeline, and target adds runtime work. Prefer transforms and opacity for animation, limit simultaneous effects, and avoid scroll-linked motion across many large elements.

Review:

  • page-load sequences that hide meaningful content until animation completes;
  • large parallax backgrounds and filters;
  • interactions duplicated across individual elements instead of reusable classes;
  • continuous animations that run outside the viewport;
  • separate mobile and desktop animation systems;
  • motion that ignores prefers-reduced-motion.

Webflow now supports both GSAP-based and Classic interactions. Its comparison guidance warns that using both can load resources for both systems. Standardize where the product permits, then test the real page rather than assuming a newer engine removes the cost of complex animation.

Control custom code and embeds

Custom code can bypass Webflow's built-in optimizations. Inventory scripts in page settings, site settings, tag managers, embeds, and components. Attribute each request and long task in DevTools.

For every dependency, decide:

  • which pages genuinely need it;
  • whether consent must occur first;
  • whether it can load after interaction or viewport entry;
  • whether an embed can use a lightweight preview;
  • how its container reserves space;
  • how the feature is tested and rolled back.

Do not add async or defer mechanically. Execution order matters, and Webflow components or custom code may depend on earlier scripts. Use the vendor's supported integration and test navigation, forms, Ecommerce, consent, and analytics after any scheduling change.

Third-party code should be reviewed after campaigns end. A tag that no longer sends an event can still consume network and parsing time.

Use publishing options carefully

Webflow's advanced publishing options include HTML, CSS, and JavaScript minification, asynchronous JavaScript loading, and per-page CSS. Enable only the options appropriate to the site and republish before measuring.

Minification generally reduces transfer size, but it will not solve large images or long-running scripts. Asynchronous JavaScript loading can improve render timing, but custom code that assumes synchronous order may fail. Per-page CSS can reduce unused styles on large sites but requires testing of custom CSS and shared library behavior.

Use the staging domain to validate a change where practical, then check the custom domain after publish. Confirm response behavior and rendered resources rather than assuming a toggle took effect.

Validate Core Web Vitals

For LCP, identify the exact element. If it is a hero image, confirm responsive delivery, eager discovery, and reasonable file size. If it is text, inspect fonts, CSS, and reveal animation. If TTFB is the main delay, distinguish a service incident or network condition from page-owned assets.

For CLS, reserve space for images, videos, CMS media, cookie interfaces, forms, and embeds. Avoid injecting promotional content above an already rendered heading. Use What Is CLS and How to Fix It for trace-based debugging.

For INP, reproduce actual interactions: mobile menu, filter, tab, slider, form, and Ecommerce controls. Look for long event handlers, large DOM updates, third-party main-thread work, and animation presentation delay.

Field data reflects real users over time. Lighthouse is a controlled diagnostic run. Use both and avoid claiming that a single score proves a permanent result.

Follow a release checklist

Before publishing a Webflow performance change, verify:

  • representative pages were measured before the change;
  • responsive image variants exist where expected;
  • the likely LCP image is not lazy-loaded or hidden by animation;
  • fonts, weights, interactions, and assets are limited to what the site uses;
  • third-party scripts are scoped, owned, and consent-aware;
  • publishing options were tested with custom code and shared components;
  • forms, search, Ecommerce, analytics, and accessibility still work;
  • equivalent repeated lab runs improve the intended bottleneck;
  • field trends are monitored after the reporting window catches up.

Use IndieTools Speed to compare published histories and detect regressions. Return to the Webflow page, asset, interaction, or integration that changed before making a broader redesign.

More guide articles

A Content QA Checklist for 100 Programmatic Articles — IndieTools guide
IndieTools

A Content QA Checklist for 100 Programmatic Articles

A batch of 100 articles should be reviewed as both individual content and a connected system. Each piece needs an accurate answer, but the package also needs distinct intent, consistent product facts and a publishing process that does not create broken or competing pages.

Internal Links Between Products, Benchmarks and Guides — IndieTools guide
IndieTools

Internal Links Between Products, Benchmarks and Guides

Internal links should help a reader move from a question to the evidence or product detail needed next. For a software directory, the strongest structure connects guides, collections, benchmark methods and canonical product records without forcing every page to link to everything else.

CMS Tools for Product Directories: Model the Data Before the Pages — IndieTools guide
IndieTools

CMS Tools for Product Directories: Model the Data Before the Pages

A product directory needs a content system that can preserve relationships, evidence and update history—not just a place to paste descriptions. Choose a CMS by testing how it handles a product, its categories, its official domain and the changing facts used by collection pages.