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.
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:
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
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:
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.
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.
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.
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.
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.
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.
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.
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.
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:
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!
Get weekly updates on the newest design stories, case studies and tips right in your mailbox.
This site uses cookies. Cookies are used to analyze and improve the user experience and help us to improve this website.
