Top 10 Webflow Performance Problems That Are Easy to Miss
Ten Webflow performance problems that look fine in the Designer, with how to spot each one and how to fix it inside Webflow.
.jpg)
Is your Webflow site slow, costly or hard to find?
Send me your siteThe Webflow performance problems easiest to miss are the ones that look fine in the Designer: full-size background images on phones, a lazy-loaded hero, load animations that hide content, and leftover scripts. Each is quick to spot on the published site and most can be fixed inside Webflow. Here are ten, with how to spot and fix each.
Test the published site in Chrome DevTools with the Network tab open. The Designer preview loads its own code and tells you little about what visitors download.
1. Background images with no responsive sizes
Spot it: the hero is a Style panel background, and the Network tab shows the same large file on mobile. Fix it: Webflow makes responsive variants for Image elements only. Use an Image element set to cover the section.
2. A lazy-loaded hero image
Spot it: PageSpeed Insights warns the LCP image was lazily loaded. Fix it: in the hero's image settings, switch loading from lazy to eager.
3. Load interactions that hide content
Spot it: the hero starts at opacity 0 in an Interaction, and the filmstrip stays blank. Fix it: remove load animations from the hero and main heading.
4. Too many fonts and weights
Spot it: filter the Network tab by Font and count the files. Fix it: keep one or two families and only the weights in use. Remove the rest in Site settings > Fonts.
5. Leftover scripts in site-wide custom code
Spot it: read Site settings > Custom code line by line. Fix it: delete tools with no owner, move single-page scripts to Page settings, and add defer where allowed.
<script src="https://example.com/tool.js" defer></script>6. A Tag Manager container nobody owns
Spot it: GTM Preview mode shows many tags firing on every page. Fix it: delete dead tags, tighten triggers, and install GA4 once.
7. CMS Collection lists with no limit
Spot it: Lighthouse flags an excessive DOM size. Fix it: set an item limit in the list settings, paginate archives, and avoid nested lists inside long lists.
8. Duplicate sections hidden per breakpoint
Spot it: the Navigator shows desktop and mobile copies of one section. Both stay in the HTML. Fix it: build the section once and adjust it per breakpoint in the Style panel. If a copy must stay, lazy load its images so hidden copies are less likely to download.
9. Video and map embeds that load immediately
Spot it: YouTube or Maps requests appear before any scroll. Fix it: use a thumbnail that opens the video, and add loading="lazy" to map iframes in Embed elements.
10. Banners and embeds that push content
Spot it: the page jumps when a cookie banner or form appears. Fix it: make banners fixed and give embed wrappers a min-height.
Checklist
- Large images are Image elements
- Hero image not lazy loaded or hidden by an animation
- Two font families or fewer
- Every custom code line has a purpose
- GTM cleaned, GA4 installed once
- Collection lists limited
- Embeds load on demand or have reserved space
Example: a hypothetical 300-page SaaS blog can have a fast homepage and a slow blog template because its related posts list has no limit. Check each template, not only the homepage.
FAQ
Which should I fix first?
Whatever affects your failing metric. LCP: items 1 to 4. INP: 5 to 7. CLS: 10.
Can I remove Webflow's own scripts?
No. Interactions and native components depend on them. Focus on what you added.
Dealing with this on a live Webflow site? It is the kind of work I do in a Webflow audit. Send me your site and I will tell you what I would fix first.
.jpg)
.jpg)
.jpg)