How to Improve Site Speed on Your Webflow Website

Webflow gives you a fast foundation, but a few settings and habits decide whether your site actually feels fast on a phone. This guide walks through seven steps, in the order we'd tackle them on a wellness site: measure, switch on Webflow's built-in speed settings, then fix the usual culprits (images, fonts, scripts, video and animation, and bloated builds).

Why it matters: a slow page loses people before they ever see your booking button. Google also uses real-visitor speed data, called Core Web Vitals, as one of its page-experience signals. Most fixes below take minutes and need no code.

Step 1: Measure before you change anything

Run your homepage and your booking page through Google PageSpeed Insights and write down the mobile results. That's your baseline, so you can see what each fix actually changes.

PageSpeed Insights shows two kinds of results:

• Field data ("Discover what your real users are experiencing") comes from real Chrome visitors over the past 28 days. This is what Google uses. Smaller practices may not have enough traffic to show it yet.
• Lab data (the 0–100 Performance score) is a single simulated test. It's useful for diagnosing problems, but the score moves between runs. Don't chase a perfect 100.

The three Core Web Vitals and Google's targets (web.dev):

To pass, 75% of your visits need to hit "good" on all three. INP replaced the older First Input Delay (FID) metric in March 2024, so ignore older guides that still talk about FID.

Tips for cleaner tests:

• Test the published site, not the Webflow Designer preview or the staging link.
• Test on mobile first. That's where most clients find you, and where scores are lowest.
• Run each test two or three times and look at the typical result.
• Scroll down to the Diagnostics list. It tells you exactly which image, font or script is slowing the page.

Step 2: Turn on Webflow's built-in speed settings

Webflow has five switches that shrink and speed up your site's code. Find them under Site settings → Publishing → Advanced publishing options, or in the Publish dropdown in the Designer (Webflow Help).

After changing these, click Save, then Publish. Nothing changes on the live site until you publish.

If something breaks after you turn on async JavaScript, it's almost always custom code that runs before Webflow's own scripts finish loading. Turn the setting off, republish, and have your developer add defer to external scripts or wrap inline scripts in a page-load event.

Step 3: Shrink and prioritize your images

Images are usually the heaviest thing on a wellness site: studio photos, practitioner portraits, treatment rooms, retreat galleries. They're also where the biggest wins are.

Convert to WebP or AVIF. These modern formats keep photos looking sharp at a fraction of the size. Google reports that WebP images are 25–34% smaller than comparable JPEGs, and lossless WebP is 26% smaller than PNG. AVIF is usually smaller still. Webflow can convert your existing images for you (Webflow Help):

1. Open the Assets panel and click the expand icon.
2. Select the images to convert, or click Select all.
3. Choose AVIF or WebP.
4. For blog posts, practitioner bios and other CMS content, go to the CMS panel, open the more-options menu, click Compress assets, and choose a format.

Two cautions before you click:

• Conversion replaces the original file and can't be undone in Webflow. Download your originals first if you might need them.
• Don't convert your Open Graph (social share) images. Webflow doesn't support WebP or AVIF there, and your link previews on Facebook or WhatsApp may break.

Upload images at the size they're shown. A 6000-pixel photo straight from a camera is far bigger than any screen needs. Resize before uploading: about 2400 px wide is plenty for a full-width hero, and much less for cards and portraits. Webflow automatically creates smaller responsive versions for phones, but it can only work with what you give it. Free tools like Squoosh resize and compress in one step.

Load the hero first, everything else later. Webflow sets images to lazy-load by default, meaning they wait until a visitor scrolls near them. That's right for images further down the page, but wrong for your hero image, which is usually what Google measures for LCP.

• Select your hero image, open the Settings panel, and set Load to Eager.
• On that same image, add a custom attribute: name fetchpriority, value high. This tells the browser to download it before anything else.
• Leave every image below the fold on Lazy.

Use image elements, not background images, where you can. Background images can't be lazy-loaded or prioritized the same way. For a hero you want to load fast, a regular image element with text layered on top usually performs better.

Fewer, better images. A retreat gallery of 40 photos on one page will be slow no matter how well each is compressed. Pick your strongest dozen, or move the rest to a separate gallery page.

Step 4: Load fewer, lighter fonts

Every font weight is a separate file. A site using one family in six weights, plus italics, can download a dozen font files before the text looks right.

• Use only the weights you need. Most sites look great with two: a regular and a bold. Remove the rest in Site settings → Fonts.
• Upload fonts as WOFF2. It's the smallest web font format, and the one Webflow recommends (Webflow Help). If you only have TTF or OTF files, a converter like Transfonter will create WOFF2 versions.
• Set Font display to Swap. In the custom font's settings, choose swap. Visitors then see your text right away in a system font, which switches to your brand font once it loads, instead of staring at blank space.

One catch: Webflow's font display setting only works on custom uploaded fonts, not on Google Fonts or Adobe Fonts added through the built-in integrations (Webflow). To get it, download the Google Font files and upload them as custom fonts. If the font shares a name with one in Webflow's Google library (Montserrat, for example), rename it slightly, or Webflow may keep loading it from Google.

Check the license before uploading any font you didn't create. Google Fonts are free to self-host; commercial fonts need a web license.

Step 5: Audit your third-party scripts

On many Webflow sites, the slowest things aren't Webflow at all. They're the extras added over time: analytics tags, Facebook and TikTok pixels, chat bubbles, review widgets, newsletter popups and booking embeds. Each one loads its own code, often from a slow server you don't control. They also hurt INP, because heavy scripts keep the page busy when someone taps.

Open Site settings → Custom code and each page's Page settings → Custom code, and list everything you find. Then for each item:

1. Remove it if no one uses it. Old pixels from a past ad campaign and trial tools are common.
2. Move it to the pages that need it. A Mindbody, Jane, Acuity or Vagaro booking widget only needs to load on your booking page, not site-wide. Put its code in that page's settings instead of the site-wide head code.
3. Combine tags in Google Tag Manager. One container is easier to manage than five separate snippets.
4. Delay what isn't urgent. Chat widgets and some tracking can wait until the visitor scrolls or moves the mouse. Your developer can set this up with a small script. The trade-off: a visitor who leaves within the first second may not be counted in analytics.

Re-run PageSpeed Insights after each change. The "Reduce the impact of third-party code" diagnostic shows which scripts cost the most.

Step 6: Keep video, Lottie and animations light

Movement makes a wellness site feel calm and alive. Used carelessly, it's also the fastest way to slow a page down.

Background video. Keep hero videos short (10–20 seconds, looping) and compressed, with no audio track. Always set a poster image: it shows instantly while the video loads, and it's what Google measures for LCP. On mobile, consider showing only the poster image.

YouTube and Vimeo embeds. A single embedded player, such as a class preview or a guided-meditation sample, can pull in a large amount of code before anyone presses play. Below the fold, use a "click to play" approach: show a thumbnail image that loads the real player only when tapped. Your developer can add this with a lightweight embed script.

Lottie animations. Keep the files small, and use them for accents rather than full-screen scenes. A complex Lottie file can easily outweigh your hero photo.

Page-load interactions. This is the most common Webflow-specific speed trap. A "fade in on page load" animation on your hero starts the headline and image at 0% opacity, so the main content can't appear until the animation finishes. That can add a second or more to LCP. Keep the hero visible from the start, and save gentle fades and slide-ins for content further down the page.

Animate the right properties. Interactions that use move, scale, rotate or opacity are smooth and cheap. Animating width, height or margins makes the browser recalculate the whole layout, which feels janky and can increase layout shift (CLS).

Step 7: Keep the build lean

Sites get heavier as they grow: new class schedules, retreat pages, practitioner bios, blog posts. A quarterly tidy-up keeps that weight in check.

• Clean up unused styles. In the Style selectors panel, use Clean up to remove classes no element uses. Fewer styles means a smaller stylesheet.
• Delete unused assets. Old images and files in the Assets panel don't slow pages on their own, but clearing them makes it easier to spot oversized files that are still in use.
• Avoid extra wrappers. Every "div inside a div inside a div" adds to the page. Sections can sit directly in the body, and a container rarely needs more than one wrapper inside it.
• Limit long CMS lists. A services page that loads all 60 blog posts, or a team page with every bio expanded, is slow on a phone. Show 6–12 items and add pagination or a "view all" link.
• Use components. Reusing one navbar, footer and booking banner keeps code consistent and easier to optimize in one place.

Quick checklist

• Baseline PageSpeed Insights results saved (mobile, homepage and booking page)
• Minify HTML, CSS and JS turned on
• Async JavaScript and per-page CSS turned on and tested
• Images converted to WebP or AVIF (Open Graph images left as JPG or PNG)
• Images resized before upload; hero set to Eager with @@PROTECT0@@
• Font weights trimmed, uploaded as WOFF2, font display set to Swap
• Unused scripts removed; booking widgets moved to the booking page only
• Hero video has a poster image; no page-load fade on the hero
• Unused styles cleaned up; long CMS lists paginated
• Site republished and PageSpeed Insights re-run

FAQ

Is Webflow already fast?

Yes, compared with most website platforms. Webflow hosts sites on a global CDN, serves responsive images automatically and lazy-loads images by default. Most slow Webflow sites are slow because of oversized images, extra fonts and third-party scripts, all of which you can fix.

What PageSpeed score should I aim for?

Focus on passing Core Web Vitals in the field data rather than a perfect lab score. A mobile Performance score in the 80s or 90s with all three vitals in the green is an excellent result for a site with photos, booking and analytics.

Will my booking widget slow my site down?

It can. Booking tools like Mindbody, Jane, Acuity and Vagaro load their own code. Load them only on the page where people book, and link to that page from everywhere else.

Will converting images to WebP hurt quality?

Not noticeably for photos on screen. Keep a copy of your originals, since Webflow replaces the file when it converts.

Does site speed affect my Google rankings?

It's one of many signals Google uses, alongside relevance and content quality. The bigger effect is on visitors: a page that loads quickly keeps more of them around long enough to book.

How often should I check?

Run PageSpeed Insights after any big change (a new hero, a new widget, a redesign) and do a full check every quarter.