How to Fix Webflow Performance Problems

Webflow sites tend to share a set of performance problems that are specific to the platform. Most of them have built-in fixes in the site settings, but the fixes are off by default for compatibility reasons. A Webflow site that flips on the right switches usually ends up a lot lighter without any custom development work.

This guide walks through the five changes we run on every Webflow site we audit. For deeper background on the bandwidth side of the same problems, see our existing guide on reducing Webflow bandwidth and the dedicated Webflow optimizer.

Step 1: Turn on per-page CSS

By default, Webflow generates a single stylesheet that contains every class used anywhere on the site. Every page downloads every class, even classes that only appear on other pages. Per-page CSS splits the stylesheet so each page only ships what it actually uses.

Open site settings, go to the Publishing tab, and enable per-page CSS. Publish the site. The generated HTML now references a smaller stylesheet scoped to the specific page. For a large site with dozens of pages, this change alone can cut CSS weight significantly.

For the general render blocking case, pair this with the advice in render blocking CSS. Per-page CSS reduces the weight. The rest of that guide reduces the blocking.

Step 2: Enable asynchronous JS loading

Webflow's interaction scripts load synchronously by default, which means they block HTML parsing until they download. Turning on async JS loading adds the async attribute to those script tags.

The setting lives in the same Publishing tab as per-page CSS. Toggle it on, publish, and confirm in the Network tab that the Webflow script tags now carry async. Interactions continue to work because Webflow's runtime handles the load order internally.

For the broader picture on script loading, see JavaScript page load time. Webflow's async toggle is the platform specific version of what step two in that guide covers for general sites.

Step 3: Audit and clean up embedded scripts

Custom embeds accumulate. A chat widget that a past team installed, an A/B test that never got removed, an analytics tag that was replaced but the old one stayed. Open every embed on your site and the global site-wide custom code panel, then read through.

Remove anything unused. For embeds that only apply to one page, move them out of the site-wide settings and into a per-page embed. The Website Optimizer flags third party scripts with no corresponding resource hint, which is a fast way to find embeds that should not be loading at all.

Step 4: Preconnect to the Webflow CDN

Webflow serves assets from website-files.com. Every Webflow page makes at least one request to that domain, often dozens. Adding a preconnect hint in the head lets the browser resolve DNS and complete TLS for the CDN in parallel with parsing your HTML.

<link rel="preconnect" href="https://cdn.prod.website-files.com" crossorigin />

Add this to the site-wide custom code, inside the head tag section. For the general resource hints pattern, see DNS prefetch. The MDN reference on rel="preconnect" covers the attribute details.

Step 5: Move heavy video off Webflow

Native Webflow video hosting counts every byte streamed against your hosting bandwidth. For any video that gets meaningful views, this is the single fastest way to blow through a bandwidth tier. Move the file off platform.

• YouTube or Vimeo: the easy answer for most marketing videos. Free bandwidth, good player, adaptive streaming.
• Dedicated streaming hosts: Cloudflare Stream, Mux, or Bunny Stream for branded players without the YouTube chrome.
• Static files on a CDN: for short autoplay background videos, Cloudflare R2 or similar serves the file cheaply and keeps it off your Webflow allowance.

See web.dev's video best practices for the delivery side. Once video is off platform, re-run the Website Optimizer against your worst Webflow pages and confirm the total page size has dropped meaningfully.