Introduction
In today’s fast-paced digital world, users expect websites to load quickly and provide a seamless experience. Websites that load slowly not only frustrate the hell out of you but also negatively impact site performance.
All that results in decreased engagement, higher bounce rates and lower search engine rankings. In other words, if your website is not properly optimized for user experience, you won’t be able to compete at all.
And that’s the reason we put together this checklist - a comprehensive guide on optimizing your Webflow website for blazing fast performance.
By implementing all the tips and actionable advice in here, you’ll be able to improve your website’s load times, reduce bounce rates, improve user experience and increase conversion rates. In other words, your website will have everything necessary to bring you more traffic and business.
So whether you’re a Webflow website owner or a web developer, this guide is a must read for taking your site performance to the next level.
Use this guide as a reference to make your Webflow website faster.
Identify what is slowing down your website
First, you need to identify what may be slowing your site down. There are many different ways to analyze your page speed metrics. One of the most common ones is Google’s PageSpeed Insights (PSI) which they introduced in 2009 and started applying as a ranking factor. Another way to measure your site is by running Lighthouse through the Chrome Console Dev tools. Always check that you’re analyzing in “Incognito” mode to avoid any unneeded interferences.
Google’s PSI and Lighthouse report the following metrics:
- First Contentful Paint (FCP): Measure the time from when your page starts loading to when any part of the page's content is rendered.
- Speed Index (SI): Measures how quickly the content of your page is loaded and visible for the user.
- Largest Contentful Paint (LCP): Measures how quickly the main content of your page is loaded.
- Total Blocking Time (TBT): Measures the total amount your page was blocked, preventing the user from interacting with it.
- Cumulative Layout Shift (CLS): Measures the unexpected element shifting while your page is being rendered.
- First Input Delay (FID): Measures the time from when a user does something on your site (like clicking a button) to the time when browser is actually able to respond to that interaction.
- Interaction to Next Paint (INP): Measures how well your site handles visitor interactions (when user clicks, the site should respond fast).
- Time to First Byte (TTFB): Measures the time in which the server responds to a request (for example when a user clicks a button).
Disclaimer: Make sure you check results for both desktop and mobile because there might be different areas that need speed optimization.
But no matter what method you use, the goal stays the same - making sure your website performance improves. So let's see what can be done.
Webflow's built-in features
Thanks to Webflow’s blazing fast CDN hosting and the fact they run no add-ons or plugins (like for example WordPress), a lot of optimization on your website is already taken care of by default.
Here are some of the main features that Webflow handles or lets you handle them in the settings with a few simple clicks:
- Minify CSS/HTML/JS (turn it on or off for each).
- Images lazy load by default (does not cover background images).
- Automatically resizes your images for different screen sizes.
- Generates and stores static pages for your CMS collection items.
- Configure link preloading (prefetch or prerender).
- Enable smoother font loading (“swap” in the font display settings).
But although these Webflow features are helpful, they’re not enough for the best website performance possible - there's much more you can do.
Third-party scripts
There are still a lot of things you can do to optimize your website and stay in the green zone, meaning you will most likely improve conversion rates and overall user experience - bringing you positive results.
Third-party scripts running on your website are one of the most common causes for slow website performance. They are not properly optimized and are often very very heavy. But at the same time most modern sites just can't live without them - the least you probably use are analytics.
Can’t imagine having a website but not knowing what happens on it.
Not all scripts should run on all pages
Not all scripts are really mandatory to run on all pages if you’re only using them on one.
Make sure that the script is added only to the page where it’s used. A common mistake is to add a script that’s used on a single page to the global footer, which makes it load unnecessarily on all the other pages and slow down your site.
Only scripts like analytics or general fonts should be in the global footer.
Move scripts from <head> to <footer>
Move your scripts from <head> to <footer> before the closing </body> tag. When your site is rendered, the browser parses the page from top to bottom. Moving your scripts to the bottom makes sure the users see the content first, not being interrupted by slow loading times.
Add “async” or “defer”
When adding your <script> tag, you have an option to use “async” or “defer” attributes.
The “async” tag means the script will be fetched in parallel to parsing. This is great if the script doesn’t need to access any DOM elements and if you don’t really care about the order of the execution (most analytics).
The “defer” tag means that the browser will load your script in the background but start executing it only after the page is rendered. This is useful if the script needs to access the DOM elements or when order of execution is important (like JavaScript animations).
Disclaimer: There’s no rule where each option would be better, so try them both and see the results. For most scripts, “async” should be okay.
Use embed if the code is small
If you’re working with a smaller piece of code to improve your site’s functionality, it’s better to just use embed. Even if the script is very small (a few KB), adding it as a <script> would be heavy (the browser needs to establish a connection with the hosting, download it and then execute).
This would come handy for smaller scripts like a cookie consent banner.
But don’t embed if you have bigger scripts, because your HTML will become too big. Webflow has a character limit of 20.000 in the “Custom code” section and it’s not meant for bigger libraries, so make sure to double check on that.
Delay the script loading (“setTimeout”)
If your script is not absolutely crucial (like a live chat widget that doesn’t need to appear in the same second for the user), you can delay the loading for a few seconds with the “setTimeout” function. But don’t use it for measuring scripts like analytics because it won’t be as accurate.
Load scripts conditionally
In some cases, you don’t need your scripts all the time, but only when a specific condition is fulfilled. For example, if you’re running ad scripts, you can make it so the scripts are loaded only when the user comes from the specific ad campaign that you set.
That way you’ll still get the results you want to, but won’t put heavy weight on the website when it’s not needed to.
Images
Images are one of the heaviest assets on the page and offer the most room for improvement. Webflow handles a little portion by default, but that’s just the tip of the iceberg.
Use WebP format
In 2022, Webflow started supporting the WebP image format and that’s one of the must have features for a high-performing website. They went a step further and added an automatic conversion tool to WebP inside their editor, so make sure to use it for all images. They support transparent backgrounds and are super lightweight.
For images that are not part of the assets panel in Webflow and in the CMS, you can use Optily. It automatically downloads all images in your CMS, compresses them and reuploads back to your site.
Fun fact: WebP can reduce the image size by up to 95% compared with the same image in PNG/JPG formats. So it’s really a no-brainer.
Lazy load images
Webflow lazy loads all new images by default, but there’s a twist to it. No need to lazy load images on the first screen, because it will only delay the total load time that impacts your site performance. So only images below the first screen should be set to lazy load.
Don’t use images as background
Avoid using images at the background of any element. These images can’t lazy load and aren’t optimized, so they will slow your site for sure. The same effect can be achieved with the regular <img> tag positioned accordingly with the “object-fit” property.
Use SVGs for vector images
Most icons or simple forms can be replaced with SVGs, but you should always double-check what is better - SVG or WebP, because SVGs don’t necessarily end up smaller.
Embed small SVGs
If your SVG images are small, embed the code directly on the page. But this only makes sense for small SVGs, because bigger ones would slow down your site.
Fonts
Webflow already takes care of some aspects of font loading, but here’s what you can do on your end to improve it even more.
Don’t use too many fonts
Using a limited number of fonts on your page will do you a huge favor. Normally 1-3 should be enough (and let’s not forget it’s also crucial for a consistent design). For the best possible performance, use system fonts (like Arial or Helvetica) and not any custom ones that are often not optimized properly.
Preload fonts
This is one of the harder tricks in this guide and you can freely avoid it, especially if you’re not looking for the absolute best results (by using all the other tips, you should already see great results).
Since the font source is located in the CSS, the fonts start loading only after the CSS file is loaded and parsed. This means you should tell the browser to preload the font files earlier.
Loading your fonts from external origin with code will disable an option to select from the drop-down in Webflow. That’s why you need to first upload the font, select it in the drop-down for all classes, then delete it and load it with code. This trick should only be done if you know your way around custom code and Webflow’s editor.
Videos
Videos are the usual never-ending story resulting in slow performance. Webflow's native video solution can occasionally decrease video quality, especially if you use services that don't integrate with Webflow.
But thanks to Webflow's app marketplace, you can find great alternatives that are made specifically for Webflow.
One of them is Vidzflow. It's a video hosting app we built and made sure to optimize every part of it for Webflow. It's super easy to use, removes all distractions like ads, starts playing faster than other video players and is fully customizable - no code needed. The best part of it - it's available in Webflow Designer, so you can manage all of your videos without leaving the platform.
By hosting your videos on platforms optimized for Webflow, you ensure that they're playing faster and are lighter without losing on quality.
Website organization
A lot of improvements for your site actually come from routine actions that you should remember to do on a regular basis.
Clean up
When you just remove elements or pages, classes are not actually removed automatically and still run with your CSS file. That’s why you should regularly clean up in the “Style Manager” and manually remove unused elements. Do the same for unused draft pages and animations in the “Interactions” tab.
Enable browser caching
Browsers cache resources locally once they’ve been downloaded, so they can be used in the future. This is very simple. Unless the resource has changed, it won’t be needed to download it again every time. By enabling browser caching on server-side settings and configuring the expiration date, you’ll be able to reduce loading times on your site.
Organize styles
One of the most common development practices is to organize your styles and reuse them wherever possible. That means you should set fonts, text sizes, colors, default paddings and margins on the root level.
Instead of repeating the same “font-family” hundreds of times, it can be done just once on the <body> level for example - which helps in keeping the CSS file size smaller.
Also having a style guide (like Client-First) and class naming convention (like BEM) helps keep your site clean and organized and it reduces bugs and inconsistencies.
Turn off features you don’t use
Webflow has an option to enable ecommerce features on your website, but they come with extra JS code and pre-built pages, making your website a lot heavier and slower. This can be very inconvenient if you buy a template that has it enabled, so make sure to check twice (because you can’t turn it off anymore if the template has it enabled).
Extra recommendations
Put more focus on the first section
The first visible section on your website is the most important, because it needs to load everything at once. So it requires extra optimization.
Some general recommendations would be to make it as light as possible, with no or very few small images (embed SVGs), light animations and effects only with code/gradient (avoid heavy Lottie animations on the first section). Load time has to be super fast.
Test, test and test
Constantly testing your website performance to see if it’s improving is one of the best pieces of advice you’ll get. It will also continuously range depending on your network, hardware, server response time, browser extensions and software you run. That’s why it’s always important to keep testing and seeing where you are - one test will not be enough. Repeat at least 5-10 times for optimal results.
It’s also recommended that you learn how to use Dev tools, because you can get access to more in-depth analysis of your website with basically the exact things that need to be done.
Google Chrome has very powerful tools that let you run a detailed network and performance analysis on your site. You can see all server requests and their timings and determine which operations are the heaviest, so you know what to fix.
Don't worry if it's all too much for you
Everyone who’s working with Webflow should understand at least a little bit what has to be done, but when it comes to implementing these tips it can be a whole different story - especially if you’re running heavyweight websites that need a lot of manual work done.
If it’s either too technical or too time consuming for you, there’s nothing to worry about. We’ll happily take care of all your Webflow needs.
We partner with some of the world's fastest-growing companies like Jasper, Sendlane, Moz, Clearbit, Awning, Sequoia Capital, etc. to help them with unlimited Webflow design and development services.
So if you still feel overwhelmed or lack technical knowledge at your company, we strongly suggest delegating these tasks to professionals.
