How to make a Webflow website ninja-fast

In today’s day and age, we probably don’t need to tell you that building a fast website is as necessary as it is aesthetically pleasing and functional. Be honest if you need to wait for a page to load, do you even wait? Or do you just go back and search for another solution? In this blog, we’ll cover some tips on how to make a Webflow website ninja-fast!

‍

What is a Webflow website?

You might have already seen us mention Webflow, a SaaS application that designers use to build responsive websites. While the designers use the tool, Webflow automatically generates HTML, CSS, and JavaScript. In addition to this, it also has CMS (content management system), and it's a hosting platform.

We use Webflow to create fast, reliable, and - of course - good-looking websites and these are some of the tips we recommend you try when you start building your own Webflow website.

‍

Minimize, cut, compress…

These words may sound like we’ll be telling you to create a minimalistic website with low-res images and videos but hear us out:

Compress JPG/PNG to WebP

WebP is an image file format developed by Google. It’s envisioned as a replacement for JPEG, PNG, and GIF file formats. According to a study, WebP lossless images are 26% smaller in size compared to PNGs.

In other words, compressing your JPGs and PNGs to WebP will save you quite a lot of space without compromising the look of images

‍

‍

Don’t use unnecessary large images and videos

Webflow allows you to upload a video of up to 30Mb in size. However, you should always ask yourself 2 questions before uploading any video or a large image:

1. Can I compress this more?
2. Do I need this on my website?

For example, if you’re thinking of a background video, that’s a good idea! A background video can breathe life into your website but keep in mind that it is a background video - it may not be crucial for this video to be high-res or overly long.

‍

Import all graphics as SVG

SVG is short for Scalable Vector Graphic. The main difference between an image, or a JPG, and an SVG, is that SVG files are infinitely scalable - you can increase and decrease their size as much as you want, and they will never be pixelated or lose clarity.

So, yes, a vector being infinitely scalable is useful but how does it help your website’s speed? According to research, an SVG can be up to 60% to 80% smaller in size compared to a PNG. 

‍

Use WOFF or WOFF2 fonts and upload only those font families you use

Web Open Font Format (WOFF) and its successor WOFF2 offer the best compression, are focused on the best performance for modern browsers, and allow you to deal with fewer files in your code.

‍

“Lazy Load”

Ever since 2020. Webflow made new images lazy load, which means that they load as you scroll to them (or when they appear on the screen), and not before. Why? As with all the previous tips, the answer is the same: it saves space and makes the website faster.

If you don’t want your images to lazy load, you can go to individual images and reverse this. But we recommend you keep this option on.

‍

‍

Minify your CSS and JS code 

The term “minify” is describing the process of removing unnecessary characters in the code. That can be whitespaces, line breaks, comments, and block delimiters which are useful for people but machines don’t really need them.

When you minify your code, you shed loading time for the website but the minified code is harder to read later on, so keep that in mind, too.

‍

Don’t use too much custom code

You can use custom code in Webflow, and the supported formats are HTML, CSS, and JS. However, there are some issues that come with using (too much) custom code. You can read on the link the full explanation for why Webflow may not be able to help you if you run into any issues with your custom code.

Outside of running into trouble with your code, too many can slowdown your website significantly. Just like with videos and large images, think about what exactly you need and what might not be all that necessary.

‍

Clean up all unused Classes and Interactions

You can use a Style Manager on Webflow to do the clean up.

Style manager displays a complete list of classes, combo classes, and tags created or edited in the site. In addition to deleting unused classes, you can also rename, preview your class and tag styles, and search for classes and tags.

As for Interactions, you can use the “Clean up unused interactions” button in the interactions panel, choose the interactions you want to remove, then hit “delete.”

Cleaning up both of these will help boost your site’s loading time.

‍

Use global class utilization across the website 

A global class means it will be used across the entire project. It applies styles that remain unified across the project. With this, you create less unnecessary classes and keep your website fast.

‍

Conclusion

You’ve read our list of tips that can help make your website ninja-fast. You may not be able to apply all of them for your website and that’s ok. Even if you apply some of them, we’re sure you’ll notice a change.

And just in case you’d like to have it as a list, here’s what we covered in the blog:

• Compress JPG/PNG to WebP
• No unnecessary large images & videos
• Import all graphics as SVG
• Use WOFF & WOFF2 fonts
• Upload only the font families you use
• Opt for Lazy Load
• Minify your CSS & JS code
• Don’t use too much custom code
• Clean up unused classes & interactions
• Use global class utilization across your website

P.S. If you’re interested in playing a little game, hit us up with some of your before/after images of your site speed!