The ultimate guide to Webflow site performance optimization

Community resources Webflow Tips
1

Hey, Webflow developers,

Today I want to share some tips to maximize your Webflow site performance and impress your users with lightning page load and blazing interactions.

When you start working on the new site, the site speed is rarely on top of your mind. However, when the design and content are finalized, the question of site performance becomes acute.

How to measure speed and performance

Google uses the tool Lighthouse to measure and report on the PSI site the following metrics of the website:

  1. First Contentful Paint (FCP).
  2. Speed Index (SI).
  3. Largest Contentful Paint (LCP).
  4. Time to Interactive (TTI).
  5. ​​Total Blocking Time (TBT).
  6. Cumulative Layout Shift (CLS).

Each metric has a ‘weight’ from 10% (FCP) to 30% (TBT). You can play with the performance calculator here.

Webflow default speed optimization features

Not surprisingly, Webflow has many optimization features working out of the box. They deliver your site and assets through the Content Delivery Network (CDN). You can enable HTML/CSS/JS code minification (don’t forget to do it).

Webflow uses Responsive images to automatically resize your images for different screen sizes (through added “srcset”). It doesn’t mean you can stop paying attention to the image sizes, but it’s very useful and handy.

Webflow generates and stores static pages for your CMS collection items, lazy loads images by default, etc.

However, you’d need to do much more than that to create a snappy website. Let’s get to them.

Third-party scripts optimization

Third-party scripts are probably the number 1 cause of bad site performance. And it will be most likely the number one recommendation in your Lighthouse / PSI report.

Unfortunately, no modern production website can get away without any scripts. You’d need at least 2-3 analytics and likely at least one ad library on your site. Here’s what you should do.

  1. Ensure that the script is added only to the page where it’s used. Leave in the global footer page only scripts that are used on every single page (like analytics, fonts, etc.). And make a policy to test any new script through performance analysis before adding it.

  2. Move scripts from “” to “” before the closing “” tag.

  3. When adding the “” tag, you have an option to use “defer” or “async” attributes.

  4. If the piece of code is small, just copy-paste it on your site.

  5. If the script is not critical but still useful to have — delay the loading of this script for a few seconds with the “setTimeout” function.

  6. Load scripts conditionally. For example, if you don’t run remarketing campaigns, your ad scripts are not always needed.

  7. Use “preconnect” or “dns-prefetch” for required origins

Fonts

Fonts are an important part of almost every website. Unfortunately, as of 2022, the default implementation in Webflow is done very poorly. Below is what you should do.

  1. Minimize the number of fonts
  2. Upload fonts manually with “swap”
  3. Preload fonts with code
    ‍

Images

Images are often among the heaviest assets on the page. Getting them right is crucial for a snappy website. Webflow helps with the Responsive images feature, but it’s not enough.

  1. Compress all images and use WebP.
  2. Ensure all your images below the first screen are set to lazy load.
  3. Do not use images as “background”
  4. Use SVGs where applicable
  5. Embed small SVGs directly

Video

Webflow doesn’t make good friends with videos. Their automatic video transcoding can dignficantly decrease video quality (and there’s no option to disable it).

Also, many users complain that the resulting “optimized” and transcoded video file by Webflow can have an even larger size than the original (up to twice the size).

This is why I avoid using native Video elements in Webflow and prefer the Youtube element or embed Youtube/Vimeo iframe directly where needed.

Site organization

There are many recommendations for your site organization that will help make your website smaller in size and more responsive to your users.

  1. Make sure to regularly press “Clean up” in the “Style Manager”.
  2. Set styles on the root level
  3. Disable features you don’t use
  4. Preload critical links

I give even more tips with examples and screenshots in my article.

If you prefer video content, here’s Youtube tutorial.

2 Likes