Webflow Site Speed: How to Make a Designer Site Load Fast (7 Steps)

Webflow sites have a reputation for being fast. Then the designer adds a full-screen background video, three font families and a hero that fades in from nothing.

The platform handles hosting and produces clean code, so you can't fix Webflow site speed with a caching plugin.

Every fix lives in the Designer and your site settings.

Here are the seven I work through on Webflow builds, starting with the ones that usually make the biggest difference.

Step 1: Find the Element That Makes Each Page Feel Slow

On Webflow, the question isn't "is my server slow?"

It's "which part of my build is slow?"

Test three page types in PageSpeed Insights, on mobile:

• The homepage, which usually carries the heaviest design
• One CMS template item, such as a blog post or case study
• The page with the most interactions or animation

For each one, note which element PageSpeed names as the Largest Contentful Paint element. On Webflow sites it's usually one of these:

That table maps straight onto the steps below.

If you need the general metric definitions first, my guide to improving Core Web Vitals covers them.

Step 2: Switch the Hero Image to Eager Loading

This is the quickest fix on most Webflow sites.

In August 2020, Webflow set all new images to lazy load by default.

Lazy images wait until they're near the screen before downloading.

That's great for images further down the page. It's bad for the image at the top.

web.dev's guide to optimising LCP is direct about it: never lazy-load your LCP image, because it always adds unnecessary delay.

So check every image in the first screen of your key templates:

1. Select the hero image on the canvas.
2. Open its image settings.
3. Change the loading option from Lazy to Eager.
4. Publish and re-test.

Do this on your CMS templates too.

A blog post template with a lazy-loaded featured image slows down every post in the collection at once.

Keep lazy loading on everything below the first screen. That's where it earns its keep.

Step 3: Swap Background-Image Heroes for Image Elements

Designers love background images for heroes.

They're easy to style and crop.

They're also one of the biggest Webflow site speed problems I find, for three reasons:

• No responsive variants. Webflow's responsive images article says the feature doesn't apply to background images. A phone downloads the same file as a large desktop screen.
• No lazy loading. Webflow's lazy loading covers inline images only, not backgrounds.
• Late discovery. web.dev explains that a CSS background image can't be found in the HTML, so the browser only starts downloading it after the stylesheet is applied.

The fix keeps the design intact.

Replace the background with a normal image element inside the section. Position it absolutely to fill the section, then set object-fit to cover.

Webflow itself suggests object-fit as the alternative, because the image then gets lazy loading controls and responsive variants.

Then set your new hero image to eager, as in Step 2.

Your designer won't see a visual difference. Your mobile visitors will see the page much sooner.

Step 4: Compress, Convert and Re-Measure Your Images

Webflow does a lot of image work for you, but only when images arrive the way it expects.

When you upload an image in the Assets panel or a CMS image field, Webflow creates resized variants and adds srcset and sizes attributes.

For originals wider than 3,200 pixels, it generates seven variants, from 3,200 down to 500 pixels wide.

Now the exceptions. According to the same help article, variants are not created for:

• Images added through a CSV import or the API. Common on CMS sites populated in bulk.
• Images inside rich text elements. That covers most images in blog post bodies.
• Background images, as covered in Step 3.

For those, size and compress the file before it goes in.

A 3,000-pixel screenshot dropped into a rich text field ships at full size to every phone that opens your post.

Next, convert formats. Webflow's image conversion tool turns existing JPEG and PNG assets into AVIF or WebP, from the Assets panel or for a whole CMS collection.

Two cautions from Webflow's help article on the tool.

It replaces the original files, so download a backup first. And AVIF isn't widely supported for Open Graph images, so choose WebP for anything you use as a sharing image.

Finally, if you've changed components or classes that affect image sizes on other pages, press Ctrl + Shift + I (or Cmd + Shift + I on a Mac). The Designer re-measures every page and regenerates the variants.

Step 5: Stop Interactions Hiding Content in the First Screen

Entrance animations are the Webflow-specific cause of slow LCP that nobody suspects.

Here's the mechanism.

Many hero sections are built with an interaction that starts headings and images at zero opacity, then fades them in once the page loads.

web.dev's LCP definition excludes elements with an opacity of 0, and says an element only counts once it has rendered and is visible.

So while your hero is invisible, it can't become the LCP element.

In plain terms: the page has loaded, but Google's metric waits for your animation.

The fix doesn't mean removing the animation entirely:

• Leave the main heading and hero image visible from the start. No initial hidden state on content in the first screen.
• Animate secondary elements like badges, buttons or decorative shapes instead.
• Keep scroll animations for sections further down the page, where they don't affect LCP.
• Shorten long load sequences. A staggered reveal with several wait steps keeps the first screen incomplete for longer.

Test the result on a mid-range phone.

Animations that feel instant on a design laptop often lag on a real mobile device. If you're planning a redesign anyway, put these rules in the brief; my guide to redesigning without losing SEO shows where they fit.

Step 6: Trim Fonts, Lottie Files and Background Video

Webflow makes it easy to add rich media.

Each piece costs load time.

Fonts. Every family and weight is another file you make visitors download. Most sites need one family in two or three weights, not three families in six.

For custom fonts, Webflow offers a font display setting. Choosing "swap" shows text in a fallback font while the custom one loads.

Webflow's announcement of that setting notes it's only available for custom fonts, not Google or Adobe fonts. To get it for a Google font, download the files and upload them as a custom font, if the licence allows.

Lottie files. They look light, but complex animations can be large files with heavy rendering work.

Keep them out of the first screen where you can, and simplify any that run constantly.

Background video. A full-screen video on the homepage hero competes with everything else on the page.

Ask whether a still image does the same job on mobile. If the video stays, keep it short, compress it hard and check the size of its poster image too.

None of these are banned. They just need to earn their weight on the pages that matter.

Step 7: Turn On Advanced Publishing Options and Clean Custom Code

Webflow has a set of speed settings that are off by default.

You'll find them under Site settings → Publishing → Advanced publishing options.

According to Webflow's advanced publishing options article, the relevant ones are:

Switch them on one at a time, publish and test.

Async JavaScript needs the most care.

Webflow's own fix for custom code that breaks is to add defer to external scripts and wrap inline scripts in a window load event.

Then open the site-wide custom code in the head and footer.

Old tracking snippets, chat widgets and testing tools pile up there over the years, and each loads on every page. My Webflow SEO checklist includes this clean-up, and my guide to Tag Manager best practices covers auditing the tags that remain.

Make Your Webflow Hero Fast First

Start with the first screen of your homepage and your busiest CMS template.

Check three things today: is your hero image eager, is it an image element rather than a background, and is anything in that first screen hidden by an interaction?

Those answers fix more Webflow site speed problems than any other change. When the fixes go deeper than settings, such as third-party scripts you can't remove, that's technical SEO territory.

CMS templates deserve their own pass, because one fix there applies to every item. My guide to Webflow CMS SEO covers the template side.

Still choosing a platform? My Webflow vs WordPress comparison explains how speed differs between them. Moving an existing site across? Work through the website migration checklist first.

And if you'd rather hand the build review over, speed and interactions are part of my Webflow SEO service. I measure your key templates, show your designer exactly which settings to change and keep the look intact. You can see what else a Webflow SEO review covers before deciding.