Improving Webflow Core Web Vitals

I've recently spent some time diving into a few sites made with Webflow. If you've never heard of Webflow it is an online service for building and hosting websites. At its heart is a visual editing interface that allows anyone to design, build, and launch a website. Webflow also has CMS and e-commerce features.

Webflow makes it remarkably easy to quickly spin up snappy landing pages, websites, and blogs. But with the ease of use also comes the potential for things to get out of hand, and for Core Web Vitals to suffer.

In this post, I'll go over a few of the things to keep in mind to help with Core Web Vitals when building a site on Webflow.

First, an observation

Webflow has good caching out of the box. It uses hashes to create unique filenames for stylesheets, scripts, and other content that is created in the editor. Caching these files means that they'll be available locally on the next page a user navigates to (or when they next return to the site).

This is important, since Webflow uses global CSS and JavaScript files. These files contain all the styles and scripts required for the entire site. It's a bummer that they are hosted on Webflow's own assets CDN, meaning the first time they're requested we do have to go through DNS lookup and TLS negotiation (see rows 2 & 4 of the waterfall chart below). But, the caching helps speed up subsequent navigation & return visits.

It's worth noting that Webflow's caching rules appear to set cache max-age of 1 day for CSS & JS files, and 1 year for image files. I wasn't able to find cache-control headers to video.

Bring your own fonts

Helps with: Cumulative Layout Shift (CLS)

Webflow allows you pull in fonts from Google Fonts or Adobe Fonts with just a couple of clicks. A couple of sites I've looked into do just that. You can see the initial request on row 3 of the waterfall above. That JS file, then goes off and requests a CSS file which then loads the fonts needed for the page. Below is a truncated waterfall chart of the process.

That's three third-party domain we're having to hit to get the first font file downloaded. There's a couple of ways we can tackle this:

Option 1: Preconnect to font domains

We could use preconnect to warm up the fonts.googleapis and fonts.gstatic connections (rows 18 & 29 respectively). This would bring forward DNS lookup and TLS negotiation and allow us to start requesting the CSS & font files a bit sooner.

You'd do this by adding the code snippets below as a custom code block in the Head of your page. Here's a Webflow tutorial on how to do that.

<!-- preconnect to google font apis -->
<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Option 2: Upload your own fonts

This is the option I'd personally recommend. In part because it gives you more control over the fonts you use. And, in part because the extra effort involved might make you think twice about whether you really need that custom font in the first place.

Let's say you want to use the Merriweather font family from Google Fonts. Here is how you'd go about uploading that to your site.

• Download the font files - Head over to Google Fonts, select the font weights & styles you need, and then download them. Google will give you TTF formats for each.
• Optimise the fonts - There's many websites & tools out there for font optimisation. We'll use Fontie and keep things very simple - removing unused characters from the font files and changing them to modern formats. Below is a sample of the settings to set in Fontie.
  • Formats: Check only Web Open Font Format (WOFF) and Web Open Font Format 2 (WOFF2).
  • Subsetting: If your site is in English only, check Include Latin characters and Include HTML entities. You can choose any other you might feel apply for multi-lingual sites.
  • Hinting: Keep existing hinting
  • Styleheets: Uncheck Generate CSS @font-face
  • Click Generate & download your @font-face package. After a short time, a .zip file will be downloaded containing the new fonts.

Next, we have to upload the new fonts we've created to Webflow. You can find out how to do so in this tutorial.

When uploading the custom fonts, be sure to upload both the WOFF and WOFF2 versions of the font files, and make sure they have the same Font Family name.

Take a moment for images

Helps with: Cumulative Layout Shift (CLS) & Largest Contentful Paint (LCP)

When (and when not) to lazy-load

Lazy-loading helps us tell the browser to defer the downloading of certain images until just before they're going to be seen. It helps ensure that our page load (and LCP critical path) is not clogged up by the downloading of images that are waaaaay down the page.

Webflow lets you set one of three options for image loading. Here's how I recommend you should approach deciding which one to select for each image:

• Lazy: Select this for any image that's definitely off-screen when a page loads (on desktop or mobile).
• Eager: Set this for any large images that are going to be visible when the page loads. These will most likely be your LCP element.
• Auto: Set this for smaller images that are visible when the page loads (company logos for example).

Set width and height

I cannot stress how important this is. Setting the width and height attributes for images helps the browser guestimate how much space it should reserve for images in the layout. This prevents content from shifting around, especially as lazy-loaded images are downloaded and displayed.

You can set the height and width based on your design if you want (e.g. if you know an image will always be 300 x 300px then you can set that). Otherwise, use the dimensions of the original image you uploaded as a guide.

Image optimisation before uploading

At the time of writing, Webflow doesn't have support for modern image formats like WebP or AVIF. I'm sure they're working on it, and it will be a huge win for Webflow sites when this is available.

In the meantime, it's advisable to spend some time optimising images before uploading them to Webflow. This helps to ensure the images on your site are as small as they could be, before Webflow applies further optimisations such as image resizing. Here's a few tools (of the many available) that you can use:

• Compressor.io​
• ImageOptim - App for Mac
• Optimizilla​
• Imgbot.ai​
• Squoosh - Use for single images, offers fine-grain control.

Background video instead of GIFs

If your site is using GIFs for animated content, then swap them out for a background video component. One site I looked at had a 1.9MB animated GIF on their homepage. Converting this to an MP4 video and uploading it as a background video component saw that size come down to 20kB!

Here's a guide from Webflow on how to use background video.

Go easy on animations & interactions

Helps with: Largest Contentful Paint (LCP) & First Input Delay (FID)

The animations and interactions on Webflow sites are mostly JavaScript driven. So the more you use, the larger your site's JavaScript file will be. This has a cascading impact, since a larger file takes the browser longer to download and parse. There's the potential here to block the rendering of LCP elements on a page. Equally as important is the chance that JavaScript execution might prevent user interactions, impacting your site's FID metric.

It's worth regularly checking your site for unused interactions which can be removed. Webflow makes it really easy to do this. You can do the same for styles as well.

Speed up key site navigation

Helps with: Largest Contentful Paint (LCP)

Slow loading pages can confuse, frustrate, and deter users. So, it is even more important that pages on our site which have key user actions are optimised to render and be usable fast.

One way of doing this is by hinting to the browser where we expect the user to navigate next. The browser can then start preparing resources for that page once it's done with the page the visitor is currently on.

Within the Link Settings menu in Webflow there are three link loading options available to us:

• Default: Does nothing until the link is clicked.
• Prefetch: The browser will start downloading resources for the linked page once the current one has finished rendering.
• Prerender: The browser will start downloading resources for the linked page immediately.

For most links you should leave this property set as Default. For links to important action pages you can use Prefetch.

These tips should get you a long way to having a Webflow site that meets Google's Core Web Vitals best practice thresholds.