Hey Nitrous, how do you make your Webflow sites load so fast?

Websites should be fast. Everyone agrees, even Google! That's why site speed is crucial for good rankings. But how do we achieve that in our Webflow builds? Let's find out.

Optimised images

A picture is worth a thousand words. It also takes a thousand times more disk/cloud space. The solution is compression; the key is balance. Always try to find the highest quality image at the lowest possible byte size.

For vector icons/simple illustrations, use SVG instead of PNG. For other images, export a 2x version of the image in your design and compress it with Tiny PNG or Photoshop/Affinity Photo. Just ensure you are not using the maximum size of the image in your design. For example, if the image is 500px wide and your design uses 500px of it on screen, then a 2x export will give you a 1000px wide pixelated image. In this case, export 1x.

In our experience, between PNG and JPG, we couldn't find one format to be better in all cases. However, WEBP is different. Lossless WebP produces around 20% smaller images and supports transparency. And with Webflow now supporting WebP and providing a conversion tool within the Assets panel, you should convert most images to WebP. Just ensure that the compressed images are not pixelated (they mostly aren't). Also, some apps don't support WebP Open Graph images. Be mindful of that, especially with Blog cover images.

Another great thing about Webflow is that it automatically generates responsive versions of uploaded images for different device sizes. To ensure all the images are responsive, press Command + Shift + I (on Mac) or Control + Shift + I (on Windows), and Webflow will scan and re-measure.

Proper font files

There are multiple ways to add Google fonts to your Webflow project. The easiest one is to add them from the in-built font selector. But here's the problem: this method uses an external script to fetch the fonts from Google and render it, and external scripts tend to bring the speed of the site down (and the Pagespeed scores).

The most optimal way is to find the WOFF/WOFF2 (more compressed vs OTF/TTF) versions of your font files, whether Google or custom and upload only the font weights you need and not the whole family. Also, you probably won't need the extended character sets, so it's wise to use only the ones you need.

Good structure

Speed is a perceived quality. There are ways to make an already-optimised page appear faster.

The hero section is the first thing a user sees on any page. Ensure that there aren't any time taking animations or heavy videos to load here. The content in the other sections, however, should load on demand. Use lazy load for images in these sections.

Even looping animations should be triggered only when the animated object appears in the viewport and not on the page load. In general, keep the page load animations to a minimum. Slow animations make the site seem slow. But they shouldn't feel rushed as well. Find the balance to make them appear natural. And don't animate every element, especially text!

If your images have overlays, export them as a single file rather than applying the effects in Webflow. On the other hand, apply simple gradients directly in Webflow rather than exporting images. Sometimes, gradient overlays on top of images can appear banded when exported and compressed. In such cases, upload the base image and apply the overlay in Webflow.

Lastly, minify your HTML, CSS and JS if you don't plan on exporting and reading the code.

Minimum clutter

The more unused classes and animations there are, the more elements your site will have to load. That's pretty obvious. So clean up!

Sometimes we create versions of different sections and elements that we hide, just in case we need them in the future. But we never use them. Remove them from the page because the browser will load them. If you don't wish to delete them, paste them into a draft page.

The pursuit of perfect speed scores

While Pagespeed is a good indicator of site performance, chasing perfect scores is futile. After reaching a minimum threshold, additional score points don't translate into real-world improvements. It's why the industry average scores are not that high, even for the websites of big brands!

Another reason is that adding external scripts (for Analytics, CRM integrations, chatbots, etc.) can bring the scores down. It is best to minimise the use of these scripts as much as possible. But if you need them for integration with other apps, there's not much you can do.

Our philosophy here is simple; optimise what you can, and don't fret over things you can't control. Try to minimise the use of external scripts. If you have to use some of them, make sure that the real-world performance of the site is good.