Slow Site Speeds using webflow

Community resources General
1

Has anyone fixed site speed issues on Webflow?

We’ve always had a problem with slow site speeds. We fail Google’s core web vitals assessment on both mobile and web.

On mobile (which is especially bad) our LCP is 4s, CLS is 0.02, FCP is 4.3s and TTFB is 2s.

I am being told it’s because we use Webflow. I’ve tried compressing images.

Anyone figured this out?

2

Hi there,

Slow loading times can significantly impact your site’s performance. While image compression is a great start, here are additional optimization areas to consider:

Linked assets: Remove any unused fonts, scripts, or stylesheets. In the Designer, check your Project Settings > Custom Code section for unnecessary external resources.

Third-party integrations: Review your embedded elements and keep only essential ones. Each integration adds load time to your site. You can find these in the Navigator panel under Embeds.

Animations and interactions: Excessive animations can slow down your site. In the Designer, review your Interactions panel and consider simplifying complex animations or removing unused ones.

Transitions/transforms: Large numbers of CSS transforms can impact performance. Check your element settings and remove any unnecessary transition effects.

You can monitor your site’s performance through the Site Usage dashboard under Project Settings > Hosting. A well-optimized Webflow site typically loads within 2-3 seconds.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Hi @Max_Shepherd-Cross,

I totally understand how frustrating it can be to see slow site speeds, especially when your Core Web Vitals aren’t passing on both mobile and desktop. The good news is that there are plenty of ways to optimize performance in Webflow to meet those standards!

  1. Image Optimization –
    Use WebP Format: Convert your images to WebP for better compression without losing quality.
    Lazy Loading: Make sure that images that are not immediately visible (below the fold) are set to lazy load. This will improve your LCP and FCP scores.

  2. Font Optimization –
    Custom fonts can add significant load time, especially if they’re not optimized:
    @font-face {
    font-family: “Your Font”;
    src: url(“path-to-font.woff2”) format(“woff2”);
    font-display: swap;
    }
    Load Fonts Asynchronously: Consider using the WebFont Loader to avoid render-blocking.

  3. JavaScript and CSS Optimization
    Defer Non-Critical JavaScript: This prevents blocking the rendering process and improves FCP.

Alternative, If you’d rather automate these optimizations without manually tweaking each aspect, consider using Website Speedy webflow APP. It handles image compression, lazy loading, JS/CSS minification, and more, specifically designed for Webflow users. Plus, there’s a 14-day free trial to test its impact before committing.

(Disclaimer: I’m affiliated with Website Speedy and happy to answer any questions.)