3 ways to supercharge your Webflow site load times

How fast does your website load? Do you know?

Does it matter?

Yes, to a certain point. 

Nearly 1 in 4 visitors will abandon your site if it takes more than 4 seconds to load. So yes, not optimizing your load speed could cost your visitors - and money. 

But focusing strictly on load times while sacrificing the rest of the experience can make for plain-looking websites. Sometimes it’s worth including heavier animations, background videos or more functionality to enhance the user experience on our website which can in turn increase conversion. 

You’d be surprised to see the lighthouse scores of some of your favorite website.

So while speed is important, it is possible to find a balance between the two and still have a visually appealing and effective website.

Luckily, optimizing your Webflow’s website load times is simple, but you need to know what to look for first. So what can you do to make sure your Webflow website loads faster than you can blink? Well, you’re in luck - Webflow offers a lot of features and functionalities to help you keep your load times fast.

I’m going to cover the top three things I always look for when I’m creating websites or evaluating my clients’ websites. These are low-hanging fruit that are easy to check, but will have huge benefits for your site speed.

Optimize your images

Images are the biggest contributor to website bloat. Keeping your images compressed without losing quality will really boost your load speeds - but there’s more to image optimization than a small file size.

First of all, make sure you have the right format for the job. The most common formats you’ll work with are:

• SVGs. SVGs are best for logos and graphics, as they can scale infinitely without losing quality.
• JPGs and PNGs. There are a lot of differences, but basically what you should do is have your images in JPG unless you really need transparency in your image. JPG file sizes are smaller, but they don’t support transparency.
• WebP. This is a new format created by Google to help compress images for the web. Webflow now supports this format, so when possible, consider using WebP, as it will compress your image size considerably while keeping your image quality crisp.

Also, make sure you export them at the right quality! If you’re using something like Figma, exporting your images at 2x is more than enough, as this ensures it will keep its quality on retina displays.

And speaking of compression, you should always compress your images to minimize the file size (and maximize your load times). I used to use ImageOptim, but now that you can convert images to WebP on Webflow, I do that to save time. Even if you can compress the image by a few kilobytes, when you add that up across all the images you upload to your website, the savings can be considerable.

When it comes to Webflow itself, avoid using the background image property as much as possible. The image element is most likely better. Why? Well, Webflow automatically optimizes images in the image element for all devices, so you don’t have to worry about making your images responsive. The background image property doesn’t have that function.

Finally, let’s talk about lazy loading. Lazy loading means your images start loading when the user scrolls to them, and not before. So the rest of your website has a chance to load without that extra stress. Webflow has lazy loading enabled by default, so unless you have a really good reason to turn it off (if the image is above the fold), I recommend keeping it on at all times.

Limit the load on your website

Once your images are optimized, the next step is to evaluate everything else loading with your websites, like your scripts and fonts.

Let’s talk about fonts first. In most cases, they aren’t a huge load on your site - but since they require different files for italics, bold, light, and more, loading all of these can add up and increase your load times slightly. And increasing your load times even a little bit can have big implications!

(A side note: A single variable font file solves a lot of these issues, and Webflow has announced that they are now supporting this.)

First of all, limit the number of fonts you use. While it can look cool to have different fonts, each version needs different files, and those are just more things that need to load. If you’re using fonts from Google Fonts or a similar service, download the fonts you need and upload them to your website.

When you use Google Fonts straight from Google, your website needs to ping Google’s servers each time they want to load them. While this probably won’t impact your load times a ton, again, the best websites save a little bit of load times across a lot of places.

Whenever possible, download your fonts as .woff2 formats, as this format is the most optimized.

Then, for scripts, most will be a necessary evil for analytics purposes or retargeting. But really think about all the scripts on your website and whether they are necessary, as they need to be loaded, often before the webpage loads first.

Optimize your CSS and Javascript

Finally, when it comes to the code of your website, you can optimize it in a couple ways.

First, take a look at your CSS classes and delete whatever you aren’t using. If you're using Client-First methodology, finding unused classes should be simple. To find unused classes, just go to your style manager and select “clean up”. This will get rid of unused classes in a couple clicks - easy!

Also, while animations on your website look super cool, these also significantly increase load times. If you need to use them, use them in key locations, and make sure they serve a purpose. We want to strike a balance between cool and fast!

Finally, minimize your HTML, CSS and JS files. Again, minor gains everywhere add up to a big boost in load speed.

Outro

While there are more tactics you can use to optimize your website load time, these three will do the bulk of the work. They’re best used simultaneously - the incremental gains will pay big dividends in the end.

With internet speeds increasing around the world, and more powerful devices being released every day, it’s easy to fall into the trap of thinking you can keep adding more and more to your website without considering the cost to speed.

If your potential visitors feel your site is too slow, then they’ll leave and go to your competitors, no matter how cool your site is!

But if you obsess over speed and lighthouse scores, you may miss out on powerful storytelling options that will boost conversions more than speed ever could.

So by keeping this balance in the front of your mind, you’ll be the site that your competitors’ traffic comes to.

I create Webflow websites that are built with both speed and user experience in mind. They’re always client-first and I’m ready to help you build your next site – let’s chat and see what we can do to turn your site from sloth to supersonic!