Optimizing the performance of your Webflow pages: The complete guide

Have a fast and efficient Webflow website is incredibly important for a number of reasons. Not only does this provide a smooth user experience, but numerous studies have concluded that A few extra seconds in the speed of loading a page can decrease the conversion, acquisition, and interaction of a website's customers.

However, user experience is also an important factor in Google's decisions when it comes to ranking your website in their search index. Page speed was included as a factor as early as 2010.

This article explains how you can measure performance and understand performance metrics to improve the performance of your Webflow site.

How to measure the performance of your Webflow site

Although there are several techniques for measuring the performance of a website or page, one of the most common methods is the use of performance analysis tools like Google Lighthouse. **

It is a tool developed by Google that analyzes websites in 4 categories, including performance. 6 metrics are provided, all of which are linked in one way or another to the performance of a web page.

But how do you use this tool? To run Google Lighthouse the easiest way is to download the extension on Google Chrome

Know how to interpret Lighthouse results: essential web signals (or Core Web Vitals for English speakers 😜)

Navigating the Google Lighthouse dashboard can be as complex as reading a treasure map, but once you know how to decipher the symbols, the treasure of performance is not far away!

Let's focus on essential web signals, or “Core Web Vitals.” You will find your results in the form of a score. A high score in the areas presented means that your site is not only fast, but also pleasant and stable to navigate.

You will find 4 main axes:

• The performance
• Accessibility
• Good practices
• The SEO

Within the “performance” axis that we are analyzing today, you will find a subset of metrics that Google considers to be the most important. Namely:

• The total blocking time (30%) (CWV)
• The largest content display (25%) (CWV)
• The cumulative layout lag (15%) (CWV)
• The first display of content (10%)
• The speed index (10%)
• Time to become interactive (10%)

Imagine that every item that Lighthouse looks at on your Webflow site is a player on a team. Some players, called Core Web Vitals, have a bigger role in the team winning, that is, in the speed of your site. Lighthouse gives more importance to these key players when it rates your site.

This means that in order to improve your site's score, it's a good idea to pay close attention to these Core Web Vitals. Google has put them forward because they play a big role in the quality user experience.

So these metrics are Google's preferred criteria for a quality user experience. By interpreting these signals, you have the key to optimizing your site so that it is not only fast, but also a pure pleasure to explore!

But now that we've learned how to analyze the performance of our Webflow site, what do we do?

Improve performance directly in Webflow

It is important to remember that Webflow offers many features that improve the performance of your website. Some examples of these features are:

• Asset delivery via CDNs
• Code minification
• Responsive image delivery
• Video transcoding
• CSS & Javascript cleaning features
• CMS management
• Responsiveness of images

However, as your site gets bigger and more complex, these features are often not enough to ensure fast load speeds, especially on mobile. It will therefore be necessary to think about optimizing a certain number of elements.

Optimize the elements you add to Webflow

This may seem “bogus” but the first things to improve when you build a site on Webflow are to import your content (images, videos, fonts, lotties...)

And the more elements your site will have, the more you will gain in performance by optimizing your content before importing it to Webflow.

Optimize images before importing them into Webflow

• Choice of image format. It is important to choose the format of your images carefully. Use the SVG format for illustrations and logos because it allows you to have lightweight elements that maintain their quality regardless of size. For photos without a transparent background, the JPG format is perfect because it allows you to have a file that will be smaller than PNG. On the other hand, it does not take transparency into account, in this case, it is the PNG format that you will have to use.
• Image size. Webflow adjusts the size of the images for the screens, but it's always better to set them to the right size from the start! If your image won't exceed 500px, you certainly don't need to import a 4000px image! You can find out how Webflow works to optimize images for all devices and resolutions.
• Make images less heavy. There are lots of free online tools like TinyPNG or iLoveIMG that will allow you to compress all your images. If you don't want to compress your images one by one before importing them to Webflow, you can use Optily Who actually owns an application directly on Webflow!
• Use delayed loading (or “lazy loading”)Webflow loads the images little by little with the “lazy load” to make your page appear faster. But be careful not to use it for important images that should appear right away when you visit your site. This is often the case for the hero sections of your pages. To choose this setting, you can click on your image, then in “Settings” you will find the “Load” parameter:

• Use background images only if necessary. LesBackground images do not always adapt well to different screens on Webflow. So, try not to put too much and prefer the addition of “classic” images if it requires being responsive.

Optimizing videos in Webflow

• Make videos lighter by compressing them. Like images, there are plenty of online tools out there that can reduce the size of your videos without sacrificing quality. Tools like Compress Video can help you with that.
• Promote the MPEG-4 formatIt is recommended that web videos be in MPEG-4 format (MP4, MV4). Be sure to export and download them in this format.
• Do not use the native Webflow video integration elementWebflow imports additional Javascript libraries when using its native video integration element. The ideal is therefore to add an “Embed element” to your Webflow site and to copy/paste the code from your video.

Choose the right font and import it directly into the settings of your Webflow project

• Upload your fonts manually. When you set up your Webflow site, you may be tempted to choose a font directly from Google Fonts or Adobe Fonts using the built-in parameters:

But it's not the best idea. Why? Because it forces your visitors' browsers to make additional requests to download the font from an external service, which can cause your site to load slowly. The best practice is to download the fonts you intend to use and set them up yourself in your site settings.

Pro tips: Keep the “display: swap” option and add this code in the <head>tag of your Webflow project:

<!-- Please keep this css code to improve the font quality--> <style>

{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -o-font-smoothing: antialiased;} This will avoid any flash effects of invisible or unstyled fonts when</style> loading.

• When the project allows it, use “system” fontsAll fonts must be downloaded by the visitor except fonts that may already be installed on their computer. If the design of your Webflow site allows it, try to opt for one of the commonly installed system fonts such as the classic Arial, or Verdana. And why not Comic Sans MS? 🙃
• Limit the number of fonts you use. Si you opt for a third-party font (Google, Adobe or others), try to limit the number of different fonts you use and only import the styles you are going to use on your project. The difference between having to load one font versus five different fonts can be huge when it comes to performance.

Limit the import of external Javascript/CSS libraries

Every piece of code added to your site, whether Javascript or CSS, must be processed by your visitors' browser. And even though Webflow is pretty (very) good at keeping its own code light, as soon as you start adding external code, your site speed can start to suffer.

This is often what causes the most common headaches for Webflow users, such as warnings that suggest you reduce main CPU activity, decrease Javascript execution time, or eliminate code that isn't being used.

Luckily, there are a number of strategies you can take to address these issues.

Place your scripts in the right place

Importing scripts into your site settings makes sense when using tools like Google Analytics or the addition of a cookie banner.

However, if you are importing a script to run a slider that is only on your home page, it is best to place the code only in the page settings.

Place your Javascript scripts before the body closing tag

The code of a web page is analyzed from top to bottom by the browser. This means that if you leave your scripts in the head tag, they must be fully downloaded and analyzed before they even begin to analyze the actual HTML on the page.

Therefore, it is best to import the script at the end of the page, unless you need to load the script directly when the page loads.

Use async or defer attributes

For each script you import, you can use async or defer attributes. These attributes are used to eliminate render blocking while scripts are loading.

The async attribute

The “async” attribute allows scripts to load in parallel without blocking the rest of the page. In other words, the other scripts will not stop loading or running to wait for an “async” script, and vice versa. This means that the “DOMContentLoaded” event, which signals that the HTML is fully loaded and the DOM is built, can fire before or after an “async” script has finished loading, depending on its size or if it was already cached.

Using the async attribute on scripts looks like this:

<script async src="https://mon-script.com"></script>

The defer attribute

The “defer” attribute is an instruction that you give to the browser to load the script while working on the rest of the page, without pausing it. The browser will therefore continue to organize the HTML and assemble the DOM quietly. Meanwhile, the script loads quietly behind the scenes and waits for the DOM to be ready to run.

Using the defer attribute looks like this:

<script defer src="https://mon-script.com"></script>

So how do I know if I should use async or defer?

The choice between async and Defer depends on several factors related to your script and how you want it to interact with the loading of your web page.

If you choose async, it's as if you have several small food processors working for you. Everyone does a different task (like peeling vegetables or mixing cake batter) as soon as they're on. They don't care about what others are doing; they just start working on their task right away, not waiting for others to finish.

Now, if you choose Defer, it's as if you had a team of chefs who follow a recipe step by step. They wait until you finish setting the table and everything is ready before serving the dishes in the order they should be eaten, such as the starter before the main course.

Basically, use async when the order is not important and you want things ready as soon as possible, and Defer when there is an order that must be respected in order for everything to go well.

Implement best practices from the start of building your site on Webflow

Webflow is an extraordinary tool for building a website but it is important to keep in mind that your bad practices can negatively impact the performance of your site. After having built more than 50 sites on Webflow, we can say that respecting the following points allows you to collect performance points on Lighthouse:

• Use a Webflow development framework and use a Style GuideIn order to keep the CSS code as light as possible, it's always interesting to follow a design system like The “Client-First” methodology. This can help you keep a component structure instead of creating new classes for everything (and therefore avoid the famous “148 div block” 😬). Consider setting up a comprehensive Style Guide that will include all of your important classes to use in your project. By the way, you can Clone the “Client-First Official Starter Project” to get started even more easily!
• Use Webflow's cleaning features. Webflow has cleaning features for cleaning generated code. You can automatically remove all unused CSS classes by opening the “Style Selectors”:

You can also remove your unused interactions by opening the “Interactions” panel and then clicking “Clean Up”:

Get in the habit of using these tools every time you make major changes to your site.

• Avoid using native Webflow elements and prefer div blocks. You may be tempted to use “pre-fabricated” Webflow elements such as “columns” or “sections”. These features are now considered obsolete and/or limiting. Today, it will be much easier for your design to use a div block with a display: grid for example. You will find a very good explanation from Pixel Geek about this.
• Create reusable animations. Avoid creating a new interaction as much as possible if you can use an existing one. This will reduce Javascript code.
• Minimize the total use of animations. As we know, Webflow allows you to create sites with numerous animations. These sites are often breathtaking and very beautiful in terms of design. Unfortunately, all of these animations have an influence on performances. Always keep in mind the main objective of your website, if you are creating a marketing site to create traffic to your products or services, it will be best not to “overdo it” in terms of animations. This is valid for reducing the code but also for facilitating the user experience. On the other hand, if your goal is to win a prize on Awwwards, then you can go for it 😜
• Encourage CSS animations to Webflow interactions

It's often fun to create native interactions on Webflow to change the font color or the background of a div block. But before creating your interaction, ask yourself the question of whether this animation could not be managed directly in CSS. This is often the case for the “hover states” for example. If animation is possible in this format, you should avoid creating it via the interaction panel.

Conclusion

In summary, optimizing the performance of a Webflow site is crucial for a quality user experience and better SEO. Analysis tools such as Google Lighthouse provide an in-depth view of what needs to be improved, with an emphasis on Core Web Vitals. Webflow's built-in features, such as CDN delivery, code minification, and responsive image management, are a good starting point. However, additional optimization is often required, especially for imported content such as images, videos, and fonts. By following rigorous practices from the start of building your site, by limiting the import of external libraries, and by implementing Webflow's cleaning features, you can significantly improve the loading speed of your site. Keep in mind that every kilobyte saved contributes to better overall performance, which results in an improved user experience and, ultimately, better customer conversion and retention.