Webflow Speed Optimisation: Getting a High PageSpeed Score

Webflow gives you more performance control than Wix or Squarespace. Here is how to use that control to achieve strong PageSpeed scores without sacrificing design.

Why Webflow has better performance potential than other website builders

Unlike Wix or Squarespace, Webflow generates clean semantic HTML and gives you direct access to how assets are loaded, how CSS is structured, and how interactions are triggered. This means a well-built Webflow site can achieve PageSpeed scores above 90 — something rarely achievable on fully managed platforms.

But Webflow also makes it easy to build slow sites if you are not paying attention. This guide covers the specific choices that separate fast Webflow sites from slow ones.

Images

Images are the primary cause of poor PageSpeed scores on Webflow sites.

Use Webflow's built-in responsive images

Webflow automatically generates multiple sizes for uploaded images and serves the correct size for each device. To use this:

Upload images through the Webflow asset manager, not as background images.

Use the Image element in the Designer, not a Div with a background image. The Image element participates in Webflow's responsive image pipeline.

Set explicit width and height attributes in the element settings to prevent CLS.

Enable lazy loading

In Webflow Designer, select an image element and enable "Lazy load" in the image settings. Apply this to all images except the hero image above the fold.

Do not lazy load your hero image

The hero image is almost always your LCP element. If you lazy load it, the browser delays fetching it, which makes LCP worse. Keep lazy loading off for above-the-fold images.

Compress images before uploading

Even with Webflow's CDN, uploading a 4MB source file results in larger variants than necessary. Compress images to under 200kb at the target display size before uploading.

Interactions and animations

Webflow's Interactions panel makes it easy to add scroll-triggered and hover animations. These are implemented in JavaScript and can meaningfully affect INP and the total JavaScript bundle size.

Use CSS transitions for simple hover effects instead of Webflow Interactions. CSS transitions are hardware-accelerated and have zero JavaScript overhead.

Limit Interactions to meaningful moments. Each Interaction adds to the JavaScript payload.

Use transform and opacity only. Webflow Interactions support animating any property, but animating width, height, top, or left triggers expensive layout recalculation.

Avoid entrance animations on above-the-fold content. They can interfere with LCP measurement and feel janky on slow connections.

Fonts

Webflow loads fonts from Google Fonts or Adobe Fonts by default. Both require a third-party DNS lookup and download.

Self-host fonts using a custom upload. Upload WOFF2 font files directly to Webflow's asset manager and reference them in your font settings. This removes the third-party dependency.

Limit font weights. Every font weight (Regular, Medium, Bold, Italic) is a separate file download. Use only the weights your design actually requires.

Set font-display in custom code. Webflow does not expose font-display in its UI. Add the following in Site Settings → Custom Code → Head:

```html

```

Third-party scripts

Every script added via Webflow's Custom Code settings or via integrations (Intercom, HubSpot, Hotjar) adds to your main thread load.

Add non-critical scripts in the footer () rather than the head.

Use the defer attribute on script tags you inject manually.

Audit which integrations are genuinely needed. Remove unused ones.

Webflow hosting vs custom domain

Webflow's hosting uses Fastly's CDN globally. If you are on a paid Webflow hosting plan, your assets are already on a fast CDN. There is no meaningful performance benefit from moving to a different host unless you export your site's code.

How to benchmark your Webflow site

Run a free check with Loadzen on your homepage and your highest-traffic landing page. You will see your PageSpeed score across mobile and desktop, your Core Web Vitals, and a prioritised list of fixes.