How to Make Your Webflow Site Load Faster

Introduction

If you're like most people, you're probably not that patient. And when it comes to waiting for a website to load, you might not even have the patience to wait more than a few seconds before giving up and going somewhere else.

So if your website is slow or has slow loading pages, you're definitely losing out on potential customers and leads.

How to speed up Webflow website

Wondering how to optimize a Webflow website? Don't worry – we've got some Webflow optimization tips to help make your Webflow site load faster! Keep reading to find out more.

1. Minifying your code

The first step to making a Webflow website faster is minifying code. Minifying code is the process of removing unnecessary characters from code without changing its functionality. This can help to reduce the size of your files, which can lead to faster page load times.

In Webflow, you can minify your code by going to Project Settings, then Hosting, and scroll down to "Advanced Publishing Options, and checking the "Minify HTML, CSS and JavaScript" box.

Website code is written with spaces, tabs, and line breaks, which helps readability for the programmer writing it. However, these characters are not necessary for the web browser to interpret the code correctly. Minifying your code can help to reduce its size, which can lead to faster page load times.

You can also manually minify your code by eliminating useless elements on your pages and the classes or animations associated with them. One of the many advantages of Webflow is the clean, semantic code it generates, which already gives it an advantage over bloated site builders like Wix and WordPress.

You can eliminate unused CSS styles in the Designer by opening the Style Manager (using the G key) and clicking "Clean up (x)" which will remove x number of unused classes from your site's CSS stylesheet.

2. Optimizing images

Images are often the heaviest element on a web page, which can lead to slow page load times. Fortunately, there are several things you can do to reduce the file size of your images without compromising quality.

Use Lazy Loading

First, before optimizing image files, it's important to use lazy loading. Lazy loading is a technique that allows web pages to load faster by deferring the loading of images until they are needed.

When a webpage loads, we only need to immediately display the images that will be visible when the page finishes loading. Everything else that's not visible yet does not need to be loaded in immediately. This is what lazy loading does.

Instead of loading every single image (even ones that are much further down the page and not immediately visible) when the page loads, we can tell the browser to only load the images that it thinks will be visible.

In Webflow, Lazy Loading is enabled by default, but you can choose to load images by clicking on the image, opening Image Settings, and selecting Auto, Lazy, or Eager loading.

Resize Images

Next, resize your images. Images that are too large will take longer to load. Typically, a maximum width or height is about 1920 pixels. You can resize your images in the program of your choice.

Webflow can automatically generate responsive images from your originals, and use them at different screen widths to squeeze a bit more performance out of your site.

To do open this dialog and optimize your images for maximum responsiveness, open the Designer and press Command/Control + Shift + i. Then, let Webflow work its magic!

Compress Images

Finally, compress your images before uploading to Webflow. We've created a complete guide to image compression, but you can get a quick and easy compression using a website called compressor.io. Make sure to aim for about 250 kilobytes or less.

3. Subsetting fonts

Subsetting fonts is the process of including only the characters you need in your web font files. Font files often include multiple languages, which are unnecessary if your site is in English or one language only.

For example, the Chinese language includes thousands of characters, most or all of which will not be used on your website if it's only in the English language. Removing the Chinese characters from your font file can reduce its size, and decrease the amount of time it takes for your website to load fonts.

How do you subset fonts?

You can use a program called FontForge to manually remove characters from your font. FontForge gives you a very high degree of control over what characters are included in your font files and what characters are not.

However, this can be very tedious and time consuming, so we like to use EverythingFonts's Font Subsetter Tool, which is almost instantaneous. It allows you to select certain sets of characters that will be used.

When subsetting our fonts, select Basic Latin and add in other sets as needed. When subsetting, the tool will eliminate all unchecked sets of characters and download the subsetted font to your computer.

Pro-tip: 98.4% of global users are using browsers that support WOFF2 font format, a highly compressed web font format. You can convert TTF or OTF files to WOFF2 using CloudConvert.

When subsetting our TTF fonts and converting them to WOFF2 format, we've saved on average about 200 to 300 kilobytes per font.

For a site that only uses Regular, Regular Italic, Bold, and Bold Italic, you could save up to 1.2 megabytes just by subsetting and compressing your fonts.

4. Using SVGs instead of PNGs or JPGs where possible

SVG images are vector images that are resolution independent. This means that they can be scaled up or down without any loss in quality. They are also very small in file size, making them a great choice for web images.

SVGs can be made by using a program like Adobe Illustrator, or by using a website like vecta.io. You can also use a program like Nucleo to manage icons and get them in SVG format, straight from your computer.

However, the main disadvantage of SVGs is the lack of detail. If you need very high quality images, or if your image is complex with many different colors, you may want to use a PNG or JPG instead.

5. Using a content delivery network (CDN)

A CDN is a group of servers that are located around the world. When you use a CDN, your website's static files are cached on these servers, and then served to users from the server that is closest to them.

This can speed up your website's loading time, because the user doesn't have to download the files from your website's server, which may be located far away.

CDNs are especially useful for images, because they can be quite large and take a long time to download. A CDN can make sure that your users are always getting the fastest possible speeds.

If you're using Webflow hosting, the Basic and CMS plans include a regional CDN, which covers a certain area (like the United States). The Business and Enterprise plans include a global CDN, which is even faster.

You can also use a service like CloudFlare, which offers both free and paid plans.

6. Removing unnecessary scripts and embeds

Sometimes you may have scripts or embeds on your website that are no longer being used. These can be from old versions of your website, or from plugins that you no longer need.

It's a good idea to go through your website's custom code and remove any unnecessary scripts, because they can add extra weight to your pages and slow down your website.

Conclusion

By following the tips in this article, you can speed up your website's loading time and improve its performance. We've outlined six different ways that you can do this, so there's sure to be something here that will help you out.

We hope you found this article helpful! If you have any questions, feel free to reach out to our team. We're always happy to help.