What Slows Down a Webflow Site (and How to Fix Each One)

The short answer: most slow Webflow sites are slowed down by oversized images, too many third-party scripts, heavy videos or Lottie files above the fold, and page-load animations that hide content. Fix those four and most sites improve noticeably, without a redesign.

First, measure the right thing

Run your page through PageSpeed Insights. Look at the mobile results first, and pay attention to Google's three Core Web Vitals:

• Largest Contentful Paint (LCP): how long until the main content, usually the hero image or headline, appears.
• Interaction to Next Paint (INP): how quickly the page responds when someone taps or clicks.
• Cumulative Layout Shift (CLS): how much the layout jumps around while loading.

If your site has enough traffic, the report also shows real-user data from Chrome. That's more useful than the lab score, because it reflects how actual visitors experience the site.

1. Oversized images

This is the most common problem. A 4000-pixel-wide PNG straight out of a design file can be several megabytes on its own.

• Export at the largest size the image is actually displayed, roughly double for high-density screens, not larger.
• Use modern formats. Webflow's Assets panel can convert images to WebP or AVIF.
• Use PNG only when you need transparency or crisp UI screenshots; use JPG, WebP or AVIF for photos.
• Leave lazy loading on for images below the fold, but set the main hero image to load eagerly so it isn't delayed.

2. Too many third-party scripts

Analytics, heatmaps, chat widgets, pixels, and embedded tools each add JavaScript the browser must download and run. Individually they look small; together they often do more damage than everything else on the page.

• List every script in your site and page settings. Remove anything nobody checks anymore.
• Avoid running two tools that do the same job, like two heatmap tools.
• Load scripts with async or defer where the vendor allows it.
• Consider loading chat widgets only after the visitor scrolls or after a short delay.

3. Heavy videos and Lottie files above the fold

Background videos and large Lottie animations in the hero look great but compete directly with your LCP.

• Keep background videos short and heavily compressed, and always set a poster image.
• On mobile, consider replacing the video with a still image.
• Check Lottie JSON file sizes; complex animations exported from After Effects can be surprisingly large.

4. Page-load animations that hide content

A very common Webflow pattern is setting elements to 0% opacity and fading them in on page load. If the hero headline starts invisible, the browser can't show it until the JavaScript runs, which delays your largest content.

• Keep the hero headline and main image visible from the start.
• Save entrance animations for content further down the page.
• Shorten long load sequences and preloaders. A one-second intro is one second of blank screen for every visitor.

5. Fonts

Every font weight is a separate file. Loading five weights of two families adds up.

• Use only the weights you actually use in the design.
• Prefer variable fonts where available, since one file covers many weights.

6. Layout shift

If content jumps while loading, it's usually images without set dimensions, embeds that load late, or banners inserted at the top of the page. Give images and embeds fixed sizes or aspect ratios, and reserve space for anything that loads in later.

A sensible order to work in

1. Compress and resize images.
2. Remove unused scripts.
3. Make the hero visible immediately.
4. Trim fonts.
5. Re-test on mobile and compare.

Change one thing at a time and re-test, so you know what actually helped. If you'd like us to audit your site's speed, book a free 15-minute call.