Loading tutorials…
Loading tutorials…
Most fresh Webflow sites launch at PageSpeed 90+ and degrade to 60-70 over 12 months as you add Custom Code, images, and interactions. This is the systematic checklist specialists run to claw the score back without redesigning the site.
Who this is forWebflow site owners whose PageSpeed Insights score dropped 15-30 points over the last 6-12 months. Or owners launching a new site who want to ship at 90+ on mobile. Bonus if you have ever added a Custom Code block 'just to test something' and never removed it.
What you'll need
Step 1
pagespeed.web.dev → run mobile and desktop scores for 5 representative pages. Record the numbers. Every optimization is measured against this baseline.
Open pagespeed.web.dev. Run each of your 5 key URLs (homepage, top landing page, top blog post, signup page, contact page).
For each URL, record: mobile Performance score, desktop Performance score, LCP, CLS, INP, TBT, and the top 3 "Opportunities" identified.
Save as a spreadsheet. Color-code: green 90+, yellow 50-89, red <50.
This baseline is what you compare against after every change. Without it, you cannot tell if a fix actually helped.
Tip: PageSpeed scores vary 5-10 points between runs due to network/CDN variance. Run each URL 3 times, take the median.
Step 2
Webflow Assets panel → bulk-select images → Convert to WebP. Set lazy-load on images below the fold. Resize hero images to actual rendered dimensions.
Webflow Designer → Assets panel (left sidebar, image icon). Sort by file size (largest first).
Any image over 500KB is a candidate for optimization. Hero images that are 3000px wide rendered at 1200px display = 6x file size for no visual benefit.
Resize: download the original, resize to 2x the rendered display width (for retina), re-upload. Webflow's built-in resize is limited; tools like Squoosh or TinyPNG do better.
Convert to WebP: Webflow has a Convert to WebP option (right-click image in Assets). Bulk-convert all images over 100KB. WebP is 25-35% smaller than PNG/JPG at equivalent quality and supported in every modern browser.
Lazy-load: Webflow auto-lazy-loads images below the fold by default since 2022. Verify on the Designer: select any image → Settings → Loading → 'Lazy' should be selected for non-hero images. Hero images should be 'Eager' (no lazy).
Add explicit width/height attributes on all images (Webflow does this automatically for assets, less so for HTML embeds). Prevents CLS from images.
Step 3
List every Custom Code block. For each, ask: is this still in use? Most Webflow sites have 30-50% dead Custom Code blocks contributing to load time.
Webflow Designer → Project Settings → Custom Code. Read every script in Head and Footer. Identify what each one does.
For each: is the service still being used? Hotjar, FullStory, Drift, Intercom, A/B testing tools — many sites have leftover scripts from trials or canceled tools.
Walk every page that has Page-level Custom Code (Page Settings → Custom Code on each page). Same audit.
Walk Symbols (Webflow Designer → Symbols panel → check each Symbol for Embed elements with Custom HTML).
Kill anything not in use. Each removed third-party script saves 50-200ms of page load.
Consolidate what remains: move 5 individual pixel scripts into a single GTM container (see the GTM tutorial). One snippet instead of five.
Step 4
Webflow Project Settings → Fonts. Each font weight loaded adds 30-80KB. Limit to 2-3 weights total per font family.
Webflow Designer → Project Settings → Fonts.
Look at "Custom fonts" and "Google Fonts." Note every weight/style enabled for each family (e.g., Inter 400, 500, 600, 700, 400 italic, 700 italic).
Each weight is a separate file the browser downloads. 6 weights of Inter = ~400KB of font data alone.
Audit your design: are you actually using all 6 weights, or do you only really use Regular (400) and Bold (700)? Disable unused weights.
For body text, system fonts (system-ui, -apple-system, Segoe UI, Roboto) are free — they ship with the OS. Reserve custom fonts for headlines only.
Set font-display: swap in the Project Settings → Fonts → Display style dropdown. Prevents invisible text during font load (improves perceived speed).
Step 5
Interactions are JavaScript-heavy. A page with 12 interactions adds 200-400KB of webflow.js init work. Audit and simplify.
Webflow Designer → Interactions panel (lightning bolt icon).
Look at "Element trigger" and "Page trigger" sections. Each interaction adds to the webflow.js bundle.
Common offenders: complex multi-step animations on scroll, parallax on hero sections, hover animations on every element in a long list.
Replace where possible with CSS-only animations (transition, animation) which the browser handles natively without JS.
For interactions that must stay: ensure they don't fire on mobile if they're not needed there. Interaction Settings → check the breakpoint toggles → disable for Tablet/Mobile if appropriate.
Test impact: disable an interaction temporarily, re-run PageSpeed, measure delta. If the delta is <2 points and the interaction adds visual polish, keep it. If the delta is 5+ points and the interaction is invisible to most users, kill it.
Step 6
Webflow hosts on AWS CloudFront by default — already a CDN. Verify caching headers, enable Brotli compression, and consider Webflow Cloud for app-style sites.
Webflow hosting includes AWS CloudFront CDN automatically — every Webflow site is on a CDN out of the box. No config needed.
Verify caching: visit your site in Chrome DevTools → Network tab → reload → look at the "Cache-Control" header on static assets. Should show max-age=31536000 (1 year) for images and CSS.
Brotli compression: enabled by default on Webflow hosting since 2022. Verify in DevTools → Network → any asset → Content-Encoding header should show "br" or "gzip" for text-based assets.
Custom CDN in front of Webflow (Cloudflare, Bunny.net): rarely necessary and can break things. Webflow CDN is fast. Only add a Cloudflare layer if you need specific Cloudflare features (Workers, advanced firewall, Argo). Test thoroughly because dual-CDN can cause cache invalidation issues.
Webflow Cloud (new in 2024-2025): a separate hosting offering for full-stack apps adjacent to Webflow sites. Not relevant for standard marketing-site speed optimization — but if you are running a Webflow Cloud app, check the App Functions cold-start time as a separate optimization.
Step 7
After each round of fixes, re-run PageSpeed on the same 5 URLs. Document the delta. Schedule a quarterly re-audit because regressions creep back in.
Re-run PageSpeed on the 5 baseline URLs. Compare against the original spreadsheet.
Expect 15-30 PageSpeed points of improvement from a thorough audit on a previously-unoptimized site.
Document what you did: which Custom Code blocks were removed, which images were optimized, which interactions were simplified. This documentation saves you (or the next person) hours during the next audit.
Quarterly cadence: set a recurring calendar reminder for every 3 months. The pattern: every quarter, someone adds Custom Code or interactions that quietly degrade speed. Quarterly audit catches it before regression compounds.
Track Core Web Vitals in Google Search Console → Experience → Core Web Vitals. Watch the trend — that's the long-term measure that affects ranking.
Common mistakes
Adding 4+ Custom Code blocks over time without auditing
What goes wrong: Each Custom Code block adds 50-200ms of third-party load. We have seen Webflow sites drop from PageSpeed 92 to 65 after 4 Custom Code blocks were added over 12 months — none of which were individually flagged as an issue.
How to avoid: Quarterly audit of Project Settings → Custom Code. Remove anything not actively in use. Consolidate multiple pixels into a single GTM container.
Using 3000px+ hero images rendered at 1200px
What goes wrong: Hero images at 3000px wide for a 1200px display use 6x the file size for zero visual benefit. LCP balloons to 4-6 seconds on mobile. Core Web Vitals fail on threshold.
How to avoid: Resize hero images to 2x rendered display width max (for retina). Convert to WebP. Use the Webflow Assets panel sort-by-size to find offenders.
Loading 6+ font weights "just in case"
What goes wrong: Each font weight adds 30-80KB of font file data. 6 weights of Inter = 400KB+ of fonts loading before text renders. Mobile users on slow connections see invisible text for 2-4 seconds.
How to avoid: Project Settings → Fonts → disable unused weights. Most sites only need Regular and Bold; sometimes Medium and Semibold for headlines. Set font-display: swap to render fallback text immediately.
Webflow Interactions on every element in a long list
What goes wrong: A 50-item list with hover interactions on each becomes 50 individual JavaScript bindings. Mobile scroll performance jitters, INP scores fail, users perceive the page as laggy.
How to avoid: Use a single CSS hover state on the parent container with child selectors, instead of 50 individual Interaction bindings. CSS-only hover is free; JS interactions cost.
Not lazy-loading CSS background images
What goes wrong: Webflow auto-lazy-loads <img> tags, but background-image set via Style panel does NOT lazy-load. A hero section with a background image loads it eagerly on every page, even if the section is below the fold.
How to avoid: Convert background images to <img> elements with object-fit: cover and CSS positioning. Webflow then auto-lazy-loads them. Or, for above-the-fold heroes, keep background image but ensure the image is heavily optimized.
Adding a Cloudflare CDN in front of Webflow without testing
What goes wrong: Webflow already includes CloudFront CDN. Adding Cloudflare on top is usually unnecessary and can cause cache-invalidation bugs (publishing changes in Webflow doesn't immediately purge Cloudflare). Some configs even slow the site down due to double-routing.
How to avoid: Only use Cloudflare in front of Webflow if you need a specific Cloudflare feature (Workers, advanced firewall). Otherwise, trust Webflow's built-in CDN.
Recap
Done — what's next
Webflow CMS SEO basics — dynamic meta, schema, and sitemap config
Read the next tutorial
Hand it off
A full Webflow speed audit + fix pass usually recovers 15-30 PageSpeed points and improves Core Web Vitals enough to pass Google's thresholds — which directly affects mobile rankings. A vetted Webflow specialist runs the audit + fix + documentation in one day, typically $120-240 at $14-16/hr.
See specialist rates
Mobile is throttled to a slow 4G connection in PageSpeed Insights — so any heavy asset or third-party script disproportionately hurts mobile. Optimize for mobile first: smaller images, fewer custom scripts, lighter interactions on mobile breakpoints. Desktop will improve automatically.
No — Webflow is generally faster than WordPress out of the box because Webflow ships static HTML on CloudFront. WordPress speed depends heavily on theme and plugins. A clean Webflow site at 90+ PageSpeed is normal; a clean WordPress site usually needs WP Rocket + Cloudflare to hit the same number.
No. The Designer is a separate authoring tool that runs in your browser — visitors to your live site only see the published HTML/CSS/JS. Designer slowness affects your editing experience, not visitor performance.
Webflow loads a base webflow.js bundle of ~120KB (gzipped ~40KB) on every page. If you use Interactions, the bundle grows by an additional 50-150KB depending on interaction complexity. This is the cost of using Webflow's interaction system — you cannot remove webflow.js entirely without breaking the site.
Webflow Cloud is for full-stack apps adjacent to Webflow sites — it does not make a marketing site faster. For pure marketing sites, regular Webflow hosting with CloudFront CDN is already fast. Only consider Webflow Cloud if you need to ship custom backend code next to the marketing site.
Quarterly. Speed regressions creep back in as you add Custom Code, images, and interactions over time. A 30-minute quarterly audit prevents 4-6 hour annual cleanup projects.
Webflow
Webflow CMS is one of the best content tools on the market — until you realize your blog posts all share the same generic meta description because no one wired up dynamic SEO fields. This walks the Collection-level SEO setup that fixes it.
Webflow
GTM is the right move once you are running 2+ marketing pixels. The wrinkle on Webflow: GTM needs both a Head snippet AND a body-open snippet — and Webflow only gives you one body-end slot. Here is the workaround that ships clean.
Webflow
Both platforms are great. Both can host the same marketing site. Pick wrong and you spend 6-12 months fighting the platform's grain. This is the honest decision framework specialists use when clients ask which to choose.
Webflow
DIY Webflow is great for the first 6 months — the visual editor really is that good. After that, the math usually flips. This is the honest framework: when self-managing costs more than hiring help.